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

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.

If you get any errors loading images, fix those first before creating the tilemap.

Empty tilemap

• Creating blank layers example

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.

The Tiled JSON map already has the tile and map dimensions, so you usually don't override those. Just give the map key that you loaded:

const tilemap = this.add.tilemap('map');

If you've forgotten the tile layer or tileset names, they're all in there:

console.log('tile layers', tilemap.layers);
console.log('tilesets', tilemap.tilesets);

• Load tileset images from Tiled JSON

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