fix: [#443] Fix Tiled tilesets with margin/spacing defined (#444)

Closes #443 

TODO:
* [x] Tests


Tiled and Excalibur use the same words for different things 🤦
 * Tiled tileset `margin` is the same as Excalibur's `SpriteSheet.originOffset`
 * Tiled tileset `spacing` is the same as Excalibur's `SpriteSheet.margin`

Uploaded a Tiled example that demonstrates this in the plugin

<img width="320" alt="image" src="https://github.com/excaliburjs/excalibur-tiled/assets/612071/60844efe-929a-438a-9ea5-01540130d99c">

<img width="414" alt="image" src="https://github.com/excaliburjs/excalibur-tiled/assets/612071/f3daa2e1-fd2d-487e-b2bb-2146c5002933">

example/game.ts

@@ -84,6 +84,26 @@ const start = (mapFile: string) => {
 
    (window as any).map = map;
    game.start(loader).then(() => {
+
+      game.input.pointers.primary.on('down', evt => {
+         // ex TileMap data structure by name
+         const tilemap = map.getTileMapLayers().filter(tm => tm.name === 'Ground')[0];
+         const tile = tilemap.getTileByPoint(evt.worldPos);
+         const tileIndex = tilemap.tiles.indexOf(tile);
+
+         // Tiled data
+         // gid can be found by looking up the original data, locate layer by name
+         const tiledLayer = map.data.getTileLayerByName('Ground');
+         const tileGid = tiledLayer.data[tileIndex];
+
+         // tileset properties
+         const tiledTileset = map.getTilesetForTile(tileGid);
+         // odd quirk of Tiled's data the gid's here are off by 1 from the data array :/
+         const tiledTile = tiledTileset.tiles.find(t => t.id === (tileGid - 1));
+         console.log('gid', tileGid);
+         console.log('tile props', tiledTile?.properties);
+      });
+
       player.pos = ex.vec(100, 100);
       if (isIsometric) {
          player.graphics.use(playercube.toSprite());
@@ -103,6 +123,8 @@ const start = (mapFile: string) => {
          if (start) {
             player.pos.x = start.x;
             player.pos.y = start.y;
+            console.log("player start", start.x, start.y);
+            console.log("props:" , start.getProperty<number>("Custom Prop"));
          }
 
          // Use polyline for patrols

example/index.html

@@ -13,6 +13,7 @@
 
     <select id="select-map" name="select-map">
       <option value="example-city.tmx">tmx</option>
+      <option value="margin.tmx">margin.tmx</option>
       <option value="example-isometric.tmx">isometric</option>
       <option value="example-city-external-tsx.tmx">tmx external tsx</option>
       <option value="example-city-base64.tmx">tmx base64</option>

example/margin.tmx

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.10.1" orientation="orthogonal" renderorder="right-down" width="30" height="20" tilewidth="10" tileheight="10" infinite="0" nextlayerid="2" nextobjectid="1">
+ <tileset firstgid="1" name="margin" tilewidth="10" tileheight="10" spacing="10" margin="10" tilecount="100" columns="10">
+  <image source="assets/margin.png" width="200" height="200"/>
+ </tileset>
+ <layer id="1" name="Tile Layer 1" width="30" height="20">
+  <data encoding="csv">
+1,2,1,2,1,2,1,2,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+11,12,11,12,11,12,11,12,11,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+1,2,1,2,1,2,1,2,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+11,12,11,12,11,12,11,12,11,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+1,2,1,2,1,2,1,2,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+11,12,11,12,11,12,11,12,11,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+1,2,1,2,1,2,1,2,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+11,12,11,12,11,12,11,12,11,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+1,2,1,2,1,2,1,2,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+11,12,11,12,11,12,11,12,11,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+</data>
+ </layer>
+</map>

src/tiled-map-resource.ts

@@ -573,6 +573,9 @@ export class TiledMapResource implements Loadable<TiledMap> {
          const rows = Math.floor((tileset.imageheight + spacing) / (tileset.tileheight + spacing));
          // Single image tilesets
          if (this.imageMap[tileset.firstgid]) {
+            // Tiled and Excalibur use the same words for different things :facepalm:
+            // Tiled margin is the same as Excalibur originOffset
+            // Tiled spacing is the same as Excalibur margin
             const ss = SpriteSheet.fromImageSource({
                image: this.imageMap[tileset.firstgid],
                grid: {
@@ -582,6 +585,10 @@ export class TiledMapResource implements Loadable<TiledMap> {
                   spriteHeight: tileset.tileheight
                },
                spacing: {
+                  originOffset: {
+                     x: tileset.margin ?? 0,
+                     y: tileset.margin ?? 0
+                  },
                   margin: {
                      x: tileset.spacing ?? 0,
                      y: tileset.spacing ?? 0,

test/integration/ex-tests.ts

@@ -29,6 +29,7 @@ test('Tiled Tests', async (page) => {
    }
 
    const legacyMapTypes = [
+      'margin.tmx',
       'v1',
       'v1 external tileset',
       'v0 gzip',