How to access TiledTilesetTile custom properties?

[max-vogler]

I'm using a Tiled tileset with custom properties on tiles, e.g. how a player can interact with the tile. I'm able to locate the tile that the player clicked on, but unsure how to get the associated custom properties:

// Resources.Map is my TiledMapResource.
const layer = Resources.Map.getTileMapLayers()[0];
const tile = layer.getTileByPoint(clickEvent.coordinates.worldPos);
// tile has no custom properties, they are located in the TiledTilesetTile:
Resources.Map.getTilesetForTile(gid).tiles[id].properties
// but I am unsure how to get gid and id from a Tile returned by getTileByPoint.

[eonarheim]

Hi @max-vogler

Unfortunately there are some co-mingling abstractions here that make this confusing.

This part of the API is definitely not as friendly, the gid's are only part of Tiled's raw structure. I'll write an issue to make this better.

Here is the code you can use to get at the tileset tile properties stashed on a tile

const map: TiledMapResource = ...;
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); // both ex and tiled share the same index

   // 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];

   // Tiled 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);
});

In this example "custom prop 2" set to 99.0

An alternative?

You can use Tiled objects to store data around the Tiled map, which currently has a much smoother API. In this example we store the "player start" point and the "Camera" point.

const excalibur = map.data.getExcaliburObjects();
if (excalibur.length > 0) {
   const start = excalibur[0].getObjectByName('player-start');
   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"));
   }
}

Question

What are planning to do in your game? We can prioritize make common uses cases better!

[max-vogler]

I'm playing around with a little farming simulator, where I define plantable=true for certain tile types in Tiled.

Thanks for your example! Even though it gets the correct tiledTileset, it doesn't locate the correct tile. tileGid is 385 as you correctly documented off-by-1, but the id is the same as the array position (1) and not tiledId - 1. See this copy-and-paste from my Chrome DevTools:

tileGid: 385
tileIndex: 161
tiledLayer: ...
tiledTile: undefined
tiledTileset: 
  firstGid: 1
  tiles: Array(3)
    0: ...
    1: 
      id: 1
      properties: Array(1)
        0: {name: 'plantable', type: 'bool', value: true}

[eonarheim]

Ope! Thanks for spotting that! Glad it mostly worked out though

[eonarheim]

@max-vogler Let me know what you think of the API here excaliburjs/excalibur-tiled#445

I'm looking into the id lookup, my example seems to be working so there is probably an edge case I'm not considering