Walk between rooms

rooms/sample.tmj

@@ -161,7 +161,7 @@
                         {
                          "name":"transport_to_coords",
                          "type":"string",
-                         "value":"[10, 10]"
+                         "value":"[300, 410]"
                         }, 
                         {
                          "name":"transport_to_room",

rooms/sample_inside.tmj

@@ -21,6 +21,44 @@
          "x":0,
          "y":0
         }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"Object Layer 1",
+         "objects":[
+                {
+                 "height":51.8134715025906,
+                 "id":1,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"event",
+                         "type":"string",
+                         "value":"transport"
+                        }, 
+                        {
+                         "name":"transport_to_coords",
+                         "type":"string",
+                         "value":"[528, 386]"
+                        }, 
+                        {
+                         "name":"transport_to_room",
+                         "type":"string",
+                         "value":"sampleRoom"
+                        }],
+                 "rotation":0,
+                 "type":"",
+                 "visible":true,
+                 "width":112.262521588946,
+                 "x":264.001973846533,
+                 "y":453.984702689366
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 28302, 28303, 28304, 0, 0, 28204, 0, 0,
@@ -40,8 +78,8 @@
          "x":0,
          "y":0
         }],
- "nextlayerid":3,
- "nextobjectid":1,
+ "nextlayerid":4,
+ "nextobjectid":3,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.11.2",

src/game.js

@@ -54,8 +54,8 @@ export default class Game {
 
   initiateTransport(object) {
     const coords = JSON.parse(object.getProperty("transport_to_coords"))
-    this.loadRoom(this.assets.get(object.getProperty("transport_to_room")))
     this.actors = [this.player]
+    this.loadRoom(this.assets.get(object.getProperty("transport_to_room")))
     this.player.x = coords[0]
     this.player.y = coords[1]
   }
@@ -90,6 +90,7 @@ export default class Game {
     this.actors.forEach(actor => actor.draw(ctx))
     this.message?.draw(ctx)
     this.drawFps(ctx)
+    this.drawPlayerPosition(ctx)
   }
 
   drawFps(ctx) {
@@ -102,4 +103,17 @@ export default class Game {
     ctx.fillText(Math.round(average(this.fpsBuffer)), ctx.canvas.width, 0)
     ctx.strokeText(Math.round(average(this.fpsBuffer)), ctx.canvas.width, 0)
   }
+
+  drawPlayerPosition(ctx) {
+    if (!this.player) return
+
+    ctx.fillStyle = "white"
+    ctx.fillRect(ctx.canvas.width, 20, -80, 20)
+    ctx.strokeStyle = "black"
+    ctx.textBaseline = "top"
+    ctx.textAlign = "right"
+    ctx.font = "bold 20px serif"
+    ctx.fillText(`${this.player.x}, ${this.player.y}`, ctx.canvas.width, 20)
+    ctx.strokeText(`${this.player.x}, ${this.player.y}`, ctx.canvas.width, 20)
+  }
 }

src/room.js

@@ -24,8 +24,6 @@ export default class Room {
       ts.populateImage(assets)
       return ts
     })
-    console.log(this.tilesets)
-    console.log(this)
   }
 
   draw(ctx) {