dev-phaser-tilemaps

Implements Phaser 3 tilemap loading, layers, and collision detection from Tiled JSON exports.

1|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/fiando/bake-tycoon --skill dev-phaser-tilemaps-fiando
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-phaser-tilemaps
Source: https://github.com/fiando/bake-tycoon/tree/main/.github/skills/dev-phaser-tilemaps
Command: npx skills add https://github.com/fiando/bake-tycoon --skill dev-phaser-tilemaps-fiando

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building tile-based game levels by hand means hardcoding tile data, writing manual culling logic, and implementing per-tile collision from scratch. This Skill replaces that with Phaser 3's tilemap system integrated with Tiled Map Editor JSON exports, so levels are designed visually and loaded with a few API calls. ## Core Features & Use Cases - Tiled JSON Integration: Load tilemaps with load.tilemapTiledJSON(), attach tilesets with addTilesetImage(), and create layers matching the Tiled project structure. - Collision & Callbacks: Set collision via setCollisionByProperty() or setCollisionByExclusion(), and trigger gameplay logic with tile index and location callbacks (e.g., lava damage, coin pickup). - Object Layers & Parallax: Spawn players, enemies, and coins from Tiled object layers, and build parallax depth with per-layer setScrollFactor() values. - Use Case: A platformer developer designs a dungeon in Tiled, exports JSON, and uses this Skill to load the map, wire wall collision to the player, spawn enemies from the object layer, and set camera bounds to the map size. ## Quick Start Load a Tiled JSON tilemap in preload, create the map and layers in create, then set collision on the walls layer and add a physics collider with the player.

Frequently Asked Questions about dev-phaser-tilemaps

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

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

Load the exported JSON with this.load.tilemapTiledJSON() in preload, then call this.make.tilemap() in create. Add the tileset image with addTilesetImage() using the exact tileset name from your Tiled project, then create layers with createLayer().

How to set up tilemap collision in Phaser?▼

Call setCollisionByProperty({ collides: true }) on the layer to use Tiled tile properties, or setCollisionByExclusion([-1]) to collide with all placed tiles. Then add this.physics.add.collider() between the player sprite and the layer.

Why is my Phaser tilemap layer not rendering?▼

The most common cause is a tileset name mismatch: the first argument to addTilesetImage() must exactly match the tileset name in the Tiled project, not the image key. Also verify the tileset image was loaded before creating the layer.

How do I spawn objects from a Tiled object layer in Phaser?▼

Use map.getObjectLayer() to iterate objects and spawn entities by their type property, or use map.createFromObjects() to generate sprites directly. Object x/y values from Tiled give the spawn positions.

Does Phaser tilemap support parallax scrolling layers?▼

Yes, call setScrollFactor() on each tilemap layer with values below 1 for backgrounds and above 1 for foregrounds. Layers with scroll factor 1 move normally with the camera.

What are the limitations of large Phaser tilemaps?▼

Large maps need camera culling and JSON compression to stay performant. Set camera bounds with map.widthInPixels and heightInPixels, and avoid per-frame tile lookups by caching results where possible.