Handle events or whatever

rooms/sample.tmj

@@ -33,13 +33,41 @@
          "x":0,
          "y":0
         }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"Object Layer 1",
+         "objects":[
+                {
+                 "height":64,
+                 "id":1,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"event",
+                         "type":"string",
+                         "value":"logSomething"
+                        }],
+                 "rotation":0,
+                 "type":"",
+                 "visible":true,
+                 "width":64,
+                 "x":128,
+                 "y":256
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 203, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 223, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-            182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            182, 0, 0, 0, 0, 188, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 189, 229, 0, 0, 0, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
@@ -64,8 +92,8 @@
          "x":0,
          "y":0
         }],
- "nextlayerid":3,
+ "nextlayerid":4,
- "nextobjectid":1,
+ "nextobjectid":4,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.11.2",

src/game.js

@@ -6,8 +6,8 @@ export default class Game {
     this.canvas = canvas
     this.ctx = canvas.getContext("2d")
     this.timestamp = 0
-    this.actors = []
+    this.player = new Player(this, 200, 200)
-    this.actors.push(new Player(this, 200, 200))
+    this.actors = [this.player]
 
     this.input = new Input().initialize()
 
@@ -30,6 +30,7 @@ export default class Game {
 
   tick(dt) {
     this.actors.forEach(actor => actor.tick(dt))
+    this.currentRoom.tick(this, dt)
   }
 
   draw() {

src/room.js

@@ -1,3 +1,4 @@
+import { doRectanglesOverlap } from "./util.js"
 export default class Room {
   constructor(json, name) {
     this.json = json
@@ -5,6 +6,19 @@ export default class Room {
     console.log(json)
   }
 
+  tick(game, dt) {
+    this.json.layers.forEach(layer => {
+      if (layer.type == "objectgroup") this.tickObjectGroup(game, layer)
+    })
+  }
+
+  tickObjectGroup(game, layer) {
+    const { player } = game
+    layer.objects.forEach(object => {
+      if (doRectanglesOverlap(player, object)) console.log(object)
+    })
+  }
+
   get tilesetsToLoad() {
     const ts = {}
     this.json.tilesets.forEach((tileset, index) => {
@@ -23,26 +37,40 @@ export default class Room {
   }
 
   draw(ctx) {
-    this.json.layers.forEach(layer => {
+    this.json.layers.forEach(this.drawLayer.bind(this, ctx))
-      for (let y = 0; y < layer.height; y++) {
+  }
-	for (let x = 0; x < layer.width; x++) {
+
-	  const index = x + (y * layer.width)
+  drawLayer(ctx, layer) {
-	  const tileIndex = layer.data[index] - 1
+    if (layer.type == "tilelayer") this.drawTileLayer(ctx, layer)
-	  const tileset = this.tilesets[0]
+    else if (layer.type == "objectgroup") this.drawObjectGroup(ctx, layer)
-	  const [sx, sy] = tileset.tileOffset(tileIndex)
+  }
-	  ctx.drawImage(
+
-	    tileset.image,
+  drawTileLayer(ctx, layer) {
-	    sx,
+    for (let y = 0; y < layer.height; y++) {
-	    sy,
+      for (let x = 0; x < layer.width; x++) {
-	    tileset.tileWidth,
+	const index = x + (y * layer.width)
-	    tileset.tileHeight,
+	const tileIndex = layer.data[index] - 1
-	    x * this.json.tilewidth,
+	const tileset = this.tilesets[0]
-	    y * this.json.tileheight,
+	const [sx, sy] = tileset.tileOffset(tileIndex)
-	    this.json.tilewidth,
+	ctx.drawImage(
-	    this.json.tileheight
+	  tileset.image,
-	  )
+	  sx,
-	}
+	  sy,
+	  tileset.tileWidth,
+	  tileset.tileHeight,
+	  x * this.json.tilewidth,
+	  y * this.json.tileheight,
+	  this.json.tilewidth,
+	  this.json.tileheight
+	)
       }
+    }
+  }
+
+  drawObjectGroup(ctx, layer) {
+    layer.objects.forEach(object => {
+      ctx.fillStyle = "#FF000066"
+      ctx.fillRect(object.x, object.y, object.width, object.height)
     })
   }
 }

src/util.js

@@ -2,7 +2,20 @@ const SQRT_OF_TWO = Math.sqrt(2)
 
 const isZeroVector = vector => !vector.x && !vector.y
 
+const doRectanglesOverlap = (rect1, rect2) => {
+  return (
+    doLengthsOverlap({ x: rect1.x, width: rect1.width }, { x: rect2.x, width: rect2.width })
+      &&
+      doLengthsOverlap({ x: rect1.y, width: rect1.height }, { x: rect2.y, width: rect2.height })
+  )      
+}
+
+const doLengthsOverlap = (l1, l2) => {
+  return !((l1.x + l1.width < l2.x) || (l2.x + l2.width) < l1.x)
+}
+
 export {
   SQRT_OF_TWO,
-  isZeroVector
+  isZeroVector,
+  doRectanglesOverlap
 }