Oh yeah we're moving from map to map

rooms/sample.tmj

@@ -147,6 +147,33 @@
                  "width":30.3798879567435,
                  "x":656.930237743527,
                  "y":411.661417542295
+                }, 
+                {
+                 "height":23.3879051119279,
+                 "id":8,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"event",
+                         "type":"string",
+                         "value":"transport"
+                        }, 
+                        {
+                         "name":"transport_to_coords",
+                         "type":"string",
+                         "value":"[10, 10]"
+                        }, 
+                        {
+                         "name":"transport_to_room",
+                         "type":"string",
+                         "value":"sampleInside"
+                        }],
+                 "rotation":0,
+                 "type":"",
+                 "visible":true,
+                 "width":48.4463748747077,
+                 "x":518.988751531351,
+                 "y":358.61454504956
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -186,7 +213,7 @@
          "y":0
         }],
  "nextlayerid":4,
- "nextobjectid":8,
+ "nextobjectid":9,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.11.2",

rooms/sample_inside.tmj

@@ -0,0 +1,62 @@
+{ "compressionlevel":-1,
+ "height":8,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[722, 720, 720, 720, 720, 720, 720, 720, 720, 723,
+            778, 894, 895, 895, 895, 895, 895, 895, 896, 778,
+            778, 891, 890, 890, 890, 890, 890, 890, 893, 778,
+            778, 1063, 1005, 1005, 1005, 1005, 1005, 1005, 1006, 778,
+            778, 2219, 2220, 2220, 2220, 2220, 2221, 1005, 2219, 778,
+            778, 1004, 1005, 1005, 1005, 1005, 1005, 1005, 1006, 778,
+            778, 1004, 1005, 1005, 1005, 1005, 1005, 1005, 1006, 778,
+            779, 720, 720, 721, 1004, 1006, 719, 720, 720, 780],
+         "height":8,
+         "id":1,
+         "name":"Tile Layer 1",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 2148, 2149, 2150, 0, 0, 2050, 0, 0,
+            0, 1841, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 1903, 0,
+            0, 0, 0, 0, 0, 0, 0, 1358, 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],
+         "height":8,
+         "id":2,
+         "name":"Tile Layer 2",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":3,
+ "nextobjectid":1,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.11.2",
+ "tileheight":16,
+ "tilesets":[
+        {
+         "firstgid":1,
+         "source":"..\/tilesets\/kenney_roguelike_base.tsj"
+        }, 
+        {
+         "firstgid":1768,
+         "source":"..\/tilesets\/kenney_roguelike_indoor.tsj"
+        }],
+ "tilewidth":16,
+ "type":"map",
+ "version":"1.10",
+ "width":10
+}

src/assets.js

@@ -8,7 +8,8 @@ const TILESET_ASSETS = {
 }
 
 const ROOM_ASSETS = {
-  sampleRoom: "./rooms/sample.tmj"
+  sampleRoom: "./rooms/sample.tmj",
+  sampleInside: "./rooms/sample_inside.tmj"
 }
 
 export default class Assets {

src/game.js

@@ -10,7 +10,7 @@ export default class Game {
     this.canvas = canvas
     this.ctx = canvas.getContext("2d")
     this.timestamp = 0
-    this.player = new Player(this, 200, 200)
+    this.player = new Player(this, 500, 450)
     this.actors = [this.player]
 
     this.input = new Input().initialize()
@@ -19,7 +19,8 @@ export default class Game {
     this.events = {
       "log_test": new Event("log_test", () => console.log("Log events work!")),
       "change_color": new Event("change_color", object => object.setProperty("color", "blue")),
-      "show_message": new Event("show_message", object => this.message = new Message(this, object.getProperty("messageText")))
+      "show_message": new Event("show_message", this.openMessage.bind(this)),
+      "transport": new Event("transport", this.initiateTransport.bind(this))
     }
 
     this.message = null
@@ -43,10 +44,22 @@ export default class Game {
     this.currentRoom.objects.forEach(roomObject => this.actors.push(roomObject))
   }
 
+  openMessage(object) {
+    this.message = new Message(this, object.getProperty("messageText"))
+  }
+
   closeMessage(message) {
     this.message = null
   }
 
+  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.player.x = coords[0]
+    this.player.y = coords[1]
+  }
+
   loop(timestamp) {
     this.dt = timestamp - this.timestamp
     const fps = 1000 / this.dt
@@ -71,6 +84,8 @@ export default class Game {
 
   draw() {
     const { canvas, ctx } = this
+    ctx.fillStyle = "black"
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
     this.currentRoom.draw(ctx)
     this.actors.forEach(actor => actor.draw(ctx))
     this.message?.draw(ctx)

src/tileset.js

@@ -3,7 +3,7 @@ export default class Tileset {
     this.game = game
     this.json = json
     this.name = name
-    this.tiles = json.tiles
+    this.tiles = json.tiles || []
   }
 
   get imagesToLoad() {

tilesets/kenney_roguelike_base.tsj

@@ -0,0 +1,14 @@
+{ "columns":57,
+ "image":"..\/assets\/roguelikeSheet_transparent.png",
+ "imageheight":526,
+ "imagewidth":968,
+ "margin":0,
+ "name":"kenney_roguelike_base",
+ "spacing":1,
+ "tilecount":1767,
+ "tiledversion":"1.11.2",
+ "tileheight":16,
+ "tilewidth":16,
+ "type":"tileset",
+ "version":"1.10"
+}

tilesets/kenney_roguelike_indoor.tsj

@@ -0,0 +1,14 @@
+{ "columns":26,
+ "image":"..\/assets\/roguelikeIndoor_transparent.png",
+ "imageheight":305,
+ "imagewidth":457,
+ "margin":0,
+ "name":"kenney_roguelike_indoor",
+ "spacing":1,
+ "tilecount":468,
+ "tiledversion":"1.11.2",
+ "tileheight":16,
+ "tilewidth":16,
+ "type":"tileset",
+ "version":"1.10"
+}