diff --git a/README.md b/README.md index 1ca771cf..50467aa2 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,23 @@ game.start(loader).then(function() { ## Documentation -The `TiledResource` loadable will load the map file you specify along with any referenced tile set assets (images). The image paths -loaded will be relative to where the original TMX file lived. +The `TiledResource` loadable will load the map file you specify along with any referenced tile set assets (images). + +### Handling Tile Image Paths + +The image paths loaded will be relative to where the exported file was saved. + +If you need to override this behavior, you can set `imagePathAccessor` to a custom function that takes two parameters: path and `ITiledTileSet` data. + +```js +// Create a new TiledResource loadable +var map = new ex.Extensions.Tiled.TiledResource("test.json"); + +map.imagePathAccessor = function (path, tileset) { + return "/maps/tx/" + path; +} +``` + +### Supported Formats Only supports JSON file format with CSV or Base64 (uncompressed) tile layer format. \ No newline at end of file diff --git a/dist/excalibur-tiled.d.ts b/dist/excalibur-tiled.d.ts index e0b3d47d..0b361e27 100644 --- a/dist/excalibur-tiled.d.ts +++ b/dist/excalibur-tiled.d.ts @@ -131,6 +131,7 @@ declare namespace ex.Extensions.Tiled { } class TiledResource extends ex.Resource { protected mapFormat: TiledMapFormat; + imagePathAccessor: (string, ITiledTileSet) => string; constructor(path: string, mapFormat?: TiledMapFormat); load(): Promise; processDownload(data: any): ITiledMap; diff --git a/dist/excalibur-tiled.js b/dist/excalibur-tiled.js index 5b872d47..b069366a 100644 --- a/dist/excalibur-tiled.js +++ b/dist/excalibur-tiled.js @@ -33,6 +33,7 @@ var ex; throw "The format " + mapFormat + " is not currently supported. Please export Tiled map as JSON."; } this.mapFormat = mapFormat; + this.imagePathAccessor = function (s) { return s; }; } TiledResource.prototype.load = function () { var _this = this; @@ -41,7 +42,7 @@ var ex; var promises = []; // retrieve images from tilesets and create textures _this.data.tilesets.forEach(function (ts) { - var tx = new ex.Texture(ts.image); + var tx = new ex.Texture(_this.imagePathAccessor(ts.image, ts)); ts.imageTexture = tx; promises.push(tx.load()); ex.Logger.getInstance().debug("[Tiled] Loading associated tileset: " + ts.image); diff --git a/src/TiledResource.ts b/src/TiledResource.ts index 3332264c..5f8baad3 100644 --- a/src/TiledResource.ts +++ b/src/TiledResource.ts @@ -17,6 +17,8 @@ namespace ex.Extensions.Tiled { export class TiledResource extends ex.Resource { protected mapFormat: TiledMapFormat; + + public imagePathAccessor: (string, ITiledTileSet) => string; constructor(path: string, mapFormat = TiledMapFormat.JSON) { switch (mapFormat) { @@ -28,6 +30,7 @@ namespace ex.Extensions.Tiled { } this.mapFormat = mapFormat; + this.imagePathAccessor = (s) => s; } public load(): Promise { @@ -39,7 +42,7 @@ namespace ex.Extensions.Tiled { // retrieve images from tilesets and create textures this.data.tilesets.forEach(ts => { - var tx = new ex.Texture(ts.image); + var tx = new ex.Texture(this.imagePathAccessor(ts.image, ts)); ts.imageTexture = tx; promises.push(tx.load());