tilemaps

Implements Phaser 4 tilemap loading, layers, collision, and tile manipulation from Tiled JSON maps.

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill tilemaps-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tilemaps
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/tilemaps
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill tilemaps-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building tile-based levels in Phaser 4 requires coordinating Tiled JSON parsing, tileset linking, layer creation, collision setup, and runtime tile queries, and small mismatches (like tileset or layer names) silently break rendering or physics. ## Core Features & Use Cases - Tiled Map Loading: Load Tiled JSON maps, link tileset images, and create CPU or GPU-rendered layers with correct naming conventions. - Collision & Physics: Configure tile collision by index, range, property, or exclusion, and wire Arcade Physics colliders, overlaps, and tile callbacks. - Runtime Tile Manipulation: Query, place, fill, randomize, and replace tiles dynamically, convert between world and tile coordinates, and spawn sprites from Tiled object layers. - Use Case: You are building a platformer level designed in Tiled. Use this Skill to load the map, set collision on ground tiles via custom properties, spawn enemies from an object layer, and swap tiles at runtime when the player triggers switches. ## Quick Start Ask the AI to load a Tiled JSON map in Phaser 4, create its layers with collision enabled, and connect a player sprite collider to the ground layer.

Frequently Asked Questions about tilemaps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load a Tiled map in Phaser 4?▼

Load the map with this.load.tilemapTiledJSON and the tileset image with this.load.image in preload, then call this.add.tilemap, map.addTilesetImage, and map.createLayer in create. The tileset and layer names must match Tiled exactly.

How to set up tile collision with Arcade Physics in Phaser?▼

Enable collision on tiles using layer.setCollision, setCollisionBetween, setCollisionByProperty, or setCollisionByExclusion, then add this.physics.add.collider between your sprite and the layer. Without marking tiles collidable, physics bodies pass through all tiles.

What is the difference between TilemapLayer and TilemapGPULayer in Phaser 4?▼

TilemapGPULayer is a WebGL-only layer that renders as a single quad for high performance but supports only orthographic maps and one tileset per layer. TilemapLayer supports multiple tilesets and all orientations including isometric and hexagonal.

Why does my Phaser tilemap layer not render or return null?▼

The most common cause is a name mismatch: the first argument to addTilesetImage must be the tileset name in Tiled, and createLayer requires the exact layer name. Also, each layer can only be created once; a second call returns null.

Why are tile changes not showing on a TilemapGPULayer?▼

TilemapGPULayer does not automatically display edits. After calling putTileAt or other modification methods, you must call generateLayerDataTexture to regenerate the GPU data texture before changes appear.

Does Phaser 4 support Collection of Images tilesets from Tiled?▼

No, the Phaser Tiled parser does not support Collection of Images tilesets. All tiles in a tileset must be contained in a single image, and tilesets must be embedded in the exported JSON.