Add support for subtiles

src/model/MapData.ts

@@ -1,14 +1,17 @@
 'use strict';
 
 
+import TileData from './TileData';
+
+
 interface Input {
-        tiles: {[key: string]: {file: string}};
+        tiles: {[key: string]: TileData};
         collision: string[];
         layers: string[][][];
 }
 
 export default class MapData {
-        tiles: {[key: string]: {file: string}};
+        tiles: {[key: string]: TileData};
         collision: string[];
         layers: string[][][];
 

src/model/TileData.ts

@@ -0,0 +1,7 @@
+'use strict';
+
+
+export default class TileData {
+        file: string;
+        subtile: number;
+}

src/view/MapView.ts

@@ -5,6 +5,7 @@ import * as util from '../util';
 import EntityPosition from '../model/EntityPosition';
 import MapData from '../model/MapData';
 import Position from '../model/Position';
+import TileData from '../model/TileData';
 
 
 const tileSize = 32;
@@ -25,8 +26,14 @@ function loadImages(imgs: {[key: string]: string}): Promise<{[key: string]: HTML
         return util.mapPromises(_.mapValues(imgs, loadImage));
 }
 
-function loadTiles(tiles: {[key: string]: {file: string}}): Promise<{[key: string]: HTMLImageElement}> {
+function loadTiles(tiles: {[key: string]: TileData}): Promise<{[key: string]: HTMLImageElement}> {
-        return loadImages(_.mapValues(tiles, (t) => `resources/sprite/tile/${t.file}.png`));
+        var imgs: {[key: string]: string} = {}
+
+        _.forOwn(tiles, t => {
+                imgs[t.file] = `resources/sprite/tile/${t.file}.png`
+        });
+
+        return loadImages(imgs);
 }
 
 function loadEntities(entities: EntityPosition[]): Promise<{[key: string]: HTMLImageElement}> {
@@ -114,11 +121,23 @@ export default class MapView {
                 this.redraw()
         }
 
-        private drawTile(x: number, y: number, tile: HTMLImageElement): void {
+        private drawTile(x: number, y: number, tile: TileData): void {
                 if (!tile)
                         return;
 
-                this.ctx.drawImage(tile, tiles(x)*this.scale, tiles(y)*this.scale, tileSize*this.scale, tileSize*this.scale);
+                var img = this.tiles[tile.file];
+                if (!img)
+                        return;
+
+                this.ctx.drawImage(
+                        img,
+                        tiles(tile.subtile || 0), 0,
+                        tileSize, tileSize,
+                        tiles(x)*this.scale,
+                        tiles(y)*this.scale,
+                        tileSize*this.scale,
+                        tileSize*this.scale
+                );
         }
 
         private drawEntity(e: EntityPosition, time: number): boolean {
@@ -186,7 +205,7 @@ export default class MapView {
                                         if (!tile)
                                                 continue;
 
-                                        this.drawTile(x, y, this.tiles[tile]);
+                                        this.drawTile(x, y, this.map.tiles[tile]);
                                 }
                         }
                 });

static/resources/map/test.json

@@ -1,8 +1,8 @@
 {
 	"tiles": {
-		"G": {"rotate": 0, "file": "grass"},
+		"G": {"file": "grass"},
-		"<": {"rotate": 0, "file": "road_left"},
+		"<": {"file": "road", "subtile": 0},
-		">": {"rotate": 0, "file": "road_right"}
+		">": {"file": "road", "subtile": 1}
 	},
 	"collision": [
 		"00000000000110000000000000000000",