Tilemaps

Handles all the tilemap plumbing in Phaser 4, from loading Tiled JSON to setting up collision and rendering layers. You get two layer types: the standard TilemapLayer for flexibility and TilemapGPULayer for performance when you can live with a single tileset and orthographic maps only. The collision setup is straightforward with methods like setCollision, setCollisionByProperty, and setCollisionByExclusion. One thing to watch: GPU layers don't auto-update when you edit tiles, so you need to call generateLayerDataTexture() manually. The documentation covers the usual pain points like matching layer names from Tiled and linking tileset images correctly. Solid reference if you're building tile-based games and don't want to dig through source code.

skills.sh installs: 1.1K
GitHub stars: 40.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add phaserjs/phaser --skill tilemaps --agent claude-code

Installs into .claude/skills of the current project.

Files

Tilemaps

Phaser Tilemaps render tile-based levels from Tiled JSON, CSV, or raw 2D arrays. A Tilemap holds parsed map data and provides methods to add tilesets, create layers, set collision, and query tiles. Layers (TilemapLayer or TilemapGPULayer) are the Game Objects that actually render tiles. Phaser supports orthogonal, isometric, hexagonal, and staggered maps.

Key source paths: src/tilemaps/Tilemap.js, src/tilemaps/TilemapLayer.js, src/tilemaps/TilemapGPULayer.js, src/tilemaps/TilemapLayerBase.js, src/tilemaps/Tile.js, src/tilemaps/Tileset.js, src/tilemaps/TilemapFactory.js, src/tilemaps/components/, src/tilemaps/parsers/tiled/ Related skills: ../loading-assets/SKILL.md, ../sprites-and-images/SKILL.md

Quick Start

class GameScene extends Phaser.Scene {
    preload() {
        // Load the Tiled JSON and the tileset image
        this.load.tilemapTiledJSON('map', 'assets/level1.json');
        this.load.image('tiles', 'assets/tilesheet.png');
    }

    create() {
        // Create the tilemap from cached JSON
        const map = this.add.tilemap('map');

SKILL.md on GitHub