tilemaps

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

Updated Sep 20, 2026
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill tilemaps-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tilemaps
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/tilemaps
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill tilemaps-amirossanloo

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 manipulation, and mistakes like mismatched tileset names or missing collision flags cause silent failures. ## Core Features & Use Cases - Tiled Map Loading: Load Tiled JSON maps, link tileset images, and create rendered layers with correct name matching. - Collision and Physics: Configure tile collision by index, range, property, or exclusion and integrate with Arcade Physics colliders and callbacks. - Runtime Tile Editing: Query, place, fill, randomize, and replace tiles dynamically, including GPU layer texture regeneration. - Use Case: Build a platformer level by loading a Tiled map, creating ground and foreground layers, enabling collision on terrain tiles, and spawning enemies from a Tiled object layer. ## Quick Start Use the tilemaps skill to load my Tiled JSON map and set up a collidable ground layer in my Phaser scene.

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?▼

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

TilemapLayer vs TilemapGPULayer in Phaser 4, which should I use?▼

TilemapGPULayer is a WebGL-only layer rendering the whole layer as one quad, but it supports only orthographic maps and a single tileset per layer. Use TilemapLayer for isometric, hexagonal, staggered, or multi-tileset maps.

Why does addTilesetImage return null in Phaser?▼

addTilesetImage returns null when the tileset name argument does not match the tileset name defined in Tiled. The first argument is the Tiled tileset name, not the Phaser texture key, and a mismatch logs a console warning.

Why are my tile edits not showing on a TilemapGPULayer?▼

TilemapGPULayer does not display edits automatically after methods like putTileAt. You must call generateLayerDataTexture() after modifying tiles to regenerate the GPU data texture.

Does Phaser 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 in a single image, and tilesets must be embedded in the exported JSON.