Tilemaps

• Modular Game Worlds in Phaser 3 — Static Maps
• Modular Game Worlds in Phaser 3 — Dynamic Platformer
• Modular Game Worlds in Phaser 3 — Procedural Dungeon

Summary

• Tilemap file: a Tiled JSON or CSV file
• Tilemap:
  • Layer data: a 2-dimensional array (grid) of tiles
    • Tile: a tile placed on a map layer
  • Tileset: a mapping of tile IDs onto a tileset image
  • Object layer: a nonrenderable layer with object data, created in Tiled
• Tilemap layer: a game object on the scene display list, rendering one map layer data

The basic procedure is:

1. Load a tileset image
2. Load a tilemap file, if using one
3. Create a tilemap object
4. Assign tileset images to the tilemap
5. Create a tilemap layer, specifying one or more tilesets for it

Tileset images

Every tilemap layer needs at least one tileset image to render. You assign this to the map with addTilesetImage().

load.image() is fine for this, but you can also use load.spritesheet() (with the appropriate frame dimensions) if you want to use the tileset image as a multiframe texture for other game objects like sprites.

Tilemap from array

• Create from array example

Tilemap from CSV

• CSV map example

Tilemap from Tiled

• Tiled JSON map example
• Tiled multiple tilesets example
• Static Maps: Building a Map in Tiled etc.

In Tiled,

• Create a map. Choose uncompressed data format.
• Export as JSON
  • Embed tilesets
  • Detach templates
  • Resolve object types and properties

Object layers

Check your object properties

const map = this.add.tilemap(/*…*/);

const [firstObjectLayer] = map.objects;

console.info('Object properties in %s:', firstObjectLayer.name);
console.table(firstObjectLayer.objects);

console.info('Object custom properties in %s:', firstObjectLayer.name);
console.table(firstObjectLayer.objects.map(o => o.properties));

Collision shapes

• tilemap/collision/matter detect collision with tile