Skip to content
three-flatland three-flatland

Tilemap

Tilemap Setup

Create a tilemap with a tileset texture:

const tilemap = new Tilemap({
  tileset: tilesetTexture,
  tileWidth: 16,
  tileHeight: 16,
  mapWidth: 20,
  mapHeight: 15,
});


renderer2D.add(tilemap);

Tile Data

Set the map data as a flat array of tile indices:

const mapData = [
  0, 1, 1, 1, 2,  // Row 0
  3, 4, 4, 4, 5,  // Row 1
  3, 4, 4, 4, 5,  // Row 2
  6, 7, 7, 7, 8,  // Row 3
];


tilemap.setData(mapData);

Tile Indices

Tiles are numbered left-to-right, top-to-bottom in the tileset image:

+---+---+---+---+
| 0 | 1 | 2 | 3 |
+---+---+---+---+
| 4 | 5 | 6 | 7 |
+---+---+---+---+

Dynamic Updates

Update individual tiles at runtime:

tilemap.setTileAt(x, y, newTileIndex);
tilemap.update();

Next Steps