3 files changed, 36 insertions, 7 deletions
diff --git a/src/model/MapData.ts b/src/model/MapData.ts
index 14f2586..351632f 100644
--- a/src/model/MapData.ts
+++ b/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[][][];
 
diff --git a/src/model/TileData.ts b/src/model/TileData.ts
new file mode 100644
index 0000000..b736e5d
--- /dev/null
+++ b/src/model/TileData.ts
@@ -0,0 +1,7 @@
+'use strict';
+
+
+export default class TileData {
+        file: string;
+        subtile: number;
+}
diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index daab7cb..282b819 100644
--- a/src/view/MapView.ts
+++ b/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}> {
-        return loadImages(_.mapValues(tiles, (t) => `resources/sprite/tile/${t.file}.png`));
+function loadTiles(tiles: {[key: string]: TileData}): Promise<{[key: string]: HTMLImageElement}> {
+        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]);
                                 }
                         }
                 });