Get spaced tileset images to line up correctly

src/assets.js

@@ -54,7 +54,7 @@ export default class Assets {
 
   loadTileset(name, path) {
     return fetch(path).then(rsp => rsp.json()).then(json => {
-      return this.assetMap[name] = new Tileset(this.game, json, name)
+      return this.assetMap[name] = new Tileset(this.game, json, name, path)
     }).then(tileset => this.loadImages(tileset.imagesToLoad))
   }
 

src/room.js

@@ -24,6 +24,8 @@ export default class Room {
       ts.populateImage(assets)
       return ts
     })
+    console.log(this.tilesets)
+    console.log(this)
   }
 
   draw(ctx) {
@@ -70,8 +72,15 @@ export default class Room {
     for (let y = 0; y < layer.height; y++) {
       for (let x = 0; x < layer.width; x++) {
 	const index = x + (y * layer.width)
-	const tileIndex = layer.data[index] - 1
-	const tileset = this.tilesets[0]
+	let tileIndex = layer.data[index] + 1
+	if (tileIndex == 1) continue
+	let tileset = this.json.tilesets
+	    .sort((a, b) => b.firstgid - a.firstgid)
+	    .find(ts => ts.firstgid <= tileIndex)
+	const { firstgid } = tileset
+	tileset = this.tilesets.find(ts => ts.source == tileset.source)
+	tileIndex -= firstgid + 1
+
 	const [sx, sy] = tileset.tileOffset(tileIndex)
 	ctx.drawImage(
 	  tileset.image,

src/tileset.js

@@ -1,8 +1,9 @@
 export default class Tileset {
-  constructor(game, json, name) {
+  constructor(game, json, name, source) {
     this.game = game
     this.json = json
     this.name = name
+    this.source = source
     this.tiles = json.tiles || []
   }
 
@@ -30,8 +31,8 @@ export default class Tileset {
 
   tileOffset(index) {
     return [
-      ((index % this.columns) * this.tileWidth),
-      (Math.floor(index / this.columns) * this.tileHeight)
+      ((index % this.columns) * (this.tileWidth + this.json.spacing)),
+      (Math.floor(index / this.columns) * (this.tileHeight + this.json.spacing))
     ]
   }
 

style.css

@@ -1,3 +1,7 @@
 body {
     background-color: #666;
 }
+
+canvas {
+    image-rendering: pixelated;
+}