tilemaps

Create and manage Phaser 4 tilemaps from Tiled JSON with layers, collision, and tile queries.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/onemanking/the-operator --skill tilemaps-onemanking
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tilemaps
Source: https://github.com/onemanking/the-operator/tree/main/.github/skills/tilemaps
Command: npx skills add https://github.com/onemanking/the-operator --skill tilemaps-onemanking

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building tile-based levels in Phaser requires correctly wiring Tiled JSON data, tileset textures, layers, and collision flags, and small mismatches in names or setup order cause silent failures that are hard to debug. ## Core Features & Use Cases - Tilemap Creation: Load Tiled JSON maps, link tileset images, and create CPU or GPU-rendered layers including isometric, hexagonal, and staggered orientations. - Collision & Physics: Configure tile collision by index, range, property, or exclusion and integrate with 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: When building a platformer level designed in Tiled, use this Skill to load the map, set collision on ground tiles, spawn enemies from an object layer, and update tiles at runtime when the player destroys terrain. ## Quick Start Load my Tiled JSON map in Phaser, create its layers with collision enabled, and connect a player sprite using Arcade Physics.

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?

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 the names defined in Tiled exactly.

How do I add collision to a tilemap layer in Phaser?

Call setCollision with tile indexes, setCollisionBetween for ranges, setCollisionByProperty for Tiled custom properties, or setCollisionByExclusion on the layer. Then add this.physics.add.collider between your sprite and the layer for Arcade Physics to detect collisions.

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

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

Why is my Phaser tilemap layer not rendering?

The most common cause is a name mismatch: the first argument to addTilesetImage must be the tileset name from Tiled, and createLayer must use the exact layer name from Tiled. Mismatches return null with a console warning.

Why do tile changes not appear on a TilemapGPULayer?

TilemapGPULayer does not automatically refresh after edits. After calling putTileAt or other modification methods, you must call generateLayerDataTexture to regenerate the GPU data texture so the changes become visible.

Does Phaser support Tiled collection of images tilesets?

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