Object collision

rooms/sample.tmj

@@ -92,6 +92,11 @@
                  "id":5,
                  "name":"sign_crate",
                  "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }, 
                         {
                          "name":"interactEvent",
                          "type":"string",

src/message.js

@@ -35,6 +35,7 @@ export default class Message {
     ctx.fillRect(0, 0, ctx.canvas.width, this.backgroundHeight)
     ctx.font = `bold ${this.textSize}px sans-serif`
     ctx.textBaseline = "top"
+    ctx.textAlign = "left"
     ctx.fillStyle = this.textColor
     ctx.fillText(this.currentText.substring(0, this.textIndex), 5, 5)
     if (this.messageComplete()) {

src/player.js

@@ -27,9 +27,7 @@ export default class Player extends Actor {
     this.x += this.xVel 
     this.y += this.yVel 
 
-    const tur = this.game.currentRoom.tilesUnderRectangle(this).filter(x => x)
-    const colliders = tur.filter(tile => tile.properties.find(prop => prop.name == "collides" && prop.value))
-    if (tur.length >= 1) {
+    if (this.collidesWithAbsolutelyAnything()) {
       this.x -= this.xVel
       this.y -= this.yVel
     }
@@ -40,6 +38,21 @@ export default class Player extends Actor {
     else this.interactHitbox = null
   }
 
+  collidesWithAbsolutelyAnything() {
+    return this.collidesWithTiles() || this.collidesWithObjects()
+  }
+
+  collidesWithObjects() {
+    const objects = this.game.currentRoom.objectsUnderRectangle(this)
+    return !!objects.find(object => object.collides())
+  }
+
+  collidesWithTiles() {
+    const tur = this.game.currentRoom.tilesUnderRectangle(this).filter(x => x)
+    const colliders = tur.filter(tile => tile.properties.find(prop => prop.name == "collides" && prop.value))
+    return !!colliders.length
+  }
+
   createInteractHitbox() {
     this.interactHitbox = {
       width: this.width,

src/room.js

@@ -1,11 +1,12 @@
 import RoomObject from "./roomObject.js"
+import { doRectanglesOverlap } from "./util.js"
 
 export default class Room {
   constructor(game, json, name) {
     this.game = game
     this.json = json
     this.name = name
-    const objectJson = this.json.layers.find(layer => layer.type == "objectgroup")?.objects || []
+    const objectJson = this.objectLayers.map(layer => layer.objects).flat()
     this.objects = objectJson.map(RoomObject.fromJson.bind(null, this.game))
   }
 
@@ -37,6 +38,14 @@ export default class Room {
     return this.json.layers.filter(layer => layer.type == "tilelayer")
   }
 
+  get objectLayers() {
+    return this.json.layers.filter(layer => layer.type == "objectgroup")
+  }
+
+  objectsUnderRectangle(rect) {
+    return this.objects.filter(object => doRectanglesOverlap(object, rect))
+  }
+
   tilesUnderRectangle(rect) {
     return this.tileLayers.map(layer => this.tilesUnderRectangleInLayer(layer, rect)).flat()
   }

src/roomObject.js

@@ -45,4 +45,8 @@ export default class RoomObject {
     ctx.fillStyle = this.getProperty("color") || "#00000000"
     ctx.fillRect(this.x, this.y, this.width, this.height)
   }
+
+  collides() {
+    return this.getProperty("collides") || false
+  }
 }