Bring RoomObjects closer to being Actors

rooms/sample.tmj

@@ -41,7 +41,7 @@
                 {
                  "height":64,
                  "id":1,
-                 "name":"",
+                 "name":"hi_box",
                  "properties":[
                         {
                          "name":"color",
@@ -63,7 +63,7 @@
                 {
                  "height":64,
                  "id":4,
-                 "name":"",
+                 "name":"low_box",
                  "properties":[
                         {
                          "name":"color",
@@ -86,6 +86,23 @@
                  "width":64,
                  "x":128,
                  "y":384
+                }, 
+                {
+                 "height":46.3794477161778,
+                 "id":5,
+                 "name":"sign_crate",
+                 "properties":[
+                        {
+                         "name":"interactEvent",
+                         "type":"string",
+                         "value":"show_message"
+                        }],
+                 "rotation":0,
+                 "type":"",
+                 "visible":true,
+                 "width":41.2588439219327,
+                 "x":331.477887674811,
+                 "y":401.217123575356
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -125,7 +142,7 @@
          "y":0
         }],
  "nextlayerid":4,
- "nextobjectid":5,
+ "nextobjectid":6,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.11.2",

src/game.js

@@ -15,7 +15,8 @@ export default class Game {
     this.currentRoom = null
     this.events = {
       "log_test": new Event("log_test", () => console.log("Log events work!")),
-      "change_color": new Event("change_color", object => object.properties.find(property => property.name == "color").value = "blue")
+      "change_color": new Event("change_color", object => object.setProperty("color", "blue")),
+      "show_message": new Event("show_message", object => console.log("Message from " + object.name))
     }
   }
 

src/room.js

@@ -31,11 +31,11 @@ export default class Room {
 
   draw(ctx) {
     this.json.layers.forEach(this.drawLayer.bind(this, ctx))
+    this.objects.forEach(object => object.draw(ctx))
   }
 
   drawLayer(ctx, layer) {
     if (layer.type == "tilelayer") this.drawTileLayer(ctx, layer)
-    else if (layer.type == "objectgroup") this.drawObjectGroup(ctx, layer)
   }
 
   drawTileLayer(ctx, layer) {
@@ -59,11 +59,4 @@ export default class Room {
       }
     }
   }
-
-  drawObjectGroup(ctx, layer) {
-    layer.objects.forEach(object => {
-      ctx.fillStyle = object.properties.find(property => property.name == "color").value
-      ctx.fillRect(object.x, object.y, object.width, object.height)
-    })
-  }
 }

src/roomObject.js

@@ -20,6 +20,15 @@ export default class RoomObject {
     return property.value
   }
 
+  setProperty(name, value) {
+    const p = this.properties.find(p => p.name == name)
+    if (p) {
+      p.value = value
+    } else {
+      this.properties[name] = value
+    }
+  }
+
   tick(dt) {
     const { player } = this.game
     if (doRectanglesOverlap(player, this)) {
@@ -31,4 +40,9 @@ export default class RoomObject {
       if (eventName) this.game.triggerEvent(eventName, this)
     }
   }
+
+  draw(ctx) {
+    ctx.fillStyle = this.getProperty("color") || "#00000000"
+    ctx.fillRect(this.x, this.y, this.width, this.height)
+  }
 }