From 8ee24fdbdfb2f64899e68d44e4c4f236c8c34e86 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Fri, 8 Jan 2016 12:23:05 +0100 Subject: Add support for subtiles --- src/model/MapData.ts | 7 +++++-- src/model/TileData.ts | 7 +++++++ src/view/MapView.ts | 29 ++++++++++++++++++++++++----- static/resources/map/test.json | 6 +++--- static/resources/sprite/tile/road.png | Bin 0 -> 329 bytes 5 files changed, 39 insertions(+), 10 deletions(-) create mode 100644 src/model/TileData.ts create mode 100644 static/resources/sprite/tile/road.png 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]); } } }); diff --git a/static/resources/map/test.json b/static/resources/map/test.json index e76b195..4689076 100644 --- a/static/resources/map/test.json +++ b/static/resources/map/test.json @@ -1,8 +1,8 @@ { "tiles": { - "G": {"rotate": 0, "file": "grass"}, - "<": {"rotate": 0, "file": "road_left"}, - ">": {"rotate": 0, "file": "road_right"} + "G": {"file": "grass"}, + "<": {"file": "road", "subtile": 0}, + ">": {"file": "road", "subtile": 1} }, "collision": [ "00000000000110000000000000000000", diff --git a/static/resources/sprite/tile/road.png b/static/resources/sprite/tile/road.png new file mode 100644 index 0000000..93e0a81 Binary files /dev/null and b/static/resources/sprite/tile/road.png differ -- cgit v1.2.3