**Language / Langue :** [[fr:yaml:tuiles-tilemaps|FR]] | **EN**

====== Tiles And Tilemaps ======

Tiles extract one cell from a spritesheet. Tilemaps assemble several tiles into a grid, directly in the text or inside a persistent frame.

===== Extracting A Tile =====

<code yaml>
text: "Tile: [[/scenarios/images/test/tiles.png:4x4:1:2]]"
</code>

The complete form is %%[[url:NxM:col:row]]%%.

  * ''N'' is the number of columns in the spritesheet.
  * ''M'' is the number of rows in the spritesheet.
  * ''col'' and ''row'' are the tile coordinates, starting at 0.

===== Building A Grid =====

<code yaml>
text: |
  [[grid:3x3]]
  /scenarios/images/test/tiles.png:4x4:0:0 | /scenarios/images/test/tiles.png:4x4:1:0 | /scenarios/images/test/tiles.png:4x4:2:0
  /scenarios/images/test/tiles.png:4x4:0:1 | /scenarios/images/test/tiles.png:4x4:1:1 | /scenarios/images/test/tiles.png:4x4:2:1
  /scenarios/images/test/tiles.png:4x4:0:2 | /scenarios/images/test/tiles.png:4x4:1:2 | /scenarios/images/test/tiles.png:4x4:2:2
  [[/grid]]
</code>

Each cell contains either an extracted tile with ''url:NxM:col:row'', or a direct picture URL. Cells are separated with ''|''.

===== Dynamic Variables =====

Coordinates can use variables between braces. This is useful for a minimap or HUD updated by events.

<code yaml>
frame: |
  [[grid:3x3]]
  /scenarios/images/test/tiles.png:4x4:0:0 | /scenarios/images/test/tiles.png:4x4:1:0 | /scenarios/images/test/tiles.png:4x4:2:0
  /scenarios/images/test/tiles.png:4x4:0:1 | /scenarios/images/test/tiles.png:4x4:{map_x}:{map_y} | /scenarios/images/test/tiles.png:4x4:2:1
  /scenarios/images/test/tiles.png:4x4:0:2 | /scenarios/images/test/tiles.png:4x4:1:2 | /scenarios/images/test/tiles.png:4x4:2:2
  [[/grid]]
</code>

Grids placed in ''frame:'' refresh with the room, like other persistent information.

===== Useful Behaviours =====

  * If the grid has fewer cells than expected, missing cells are filled with white placeholders.
  * If tiles with different sizes are mixed, display is normalized to one common size.
  * The linter reports incomplete grids.
  * On adapters that cannot display an interactive tilemap, a fallback rendering is used.

**Join us on [[https://discord.gg/Z63DtVV|discord Make&Play]]**