skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tilemaps

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

2|10|Updated Jul 28, 2026
Search Tags:#game development#webgl#phaser#tilemap#arcade physics#tiled#tile collision
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill tilemaps-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tilemaps
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/tilemaps
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill tilemaps-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building tile-based levels in Phaser 4 requires correctly wiring Tiled JSON data, tileset images, layers, and collision flags, 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 rendered layers with exact name matching. - Collision & Physics: Enable 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-accelerated layers via TilemapGPULayer. - Use Case: Build a platformer level in Tiled, load it in a Phaser scene, set collision on ground tiles, spawn enemies from an object layer, and let the player collide with the terrain. ## Quick Start Ask the AI to load a Tiled JSON map in Phaser 4, create its layers, and set up collision for the player sprite.

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 the sprite and the layer. Without marking tiles as collidable, physics bodies pass through all tiles.

What is the difference between TilemapLayer and TilemapGPULayer?▼

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 does my Phaser tilemap layer not render or return null?▼

createLayer returns null when the layer name does not match Tiled exactly or the layer was already created. Similarly, addTilesetImage returns null if the tileset name differs from the name defined in Tiled.

Does Phaser 4 support isometric tilemaps?▼

Yes, TilemapLayer supports isometric, hexagonal, and staggered maps, with coordinate conversion selected automatically from the map orientation. TilemapGPULayer does not support these orientations.

Why do tile edits not appear on a GPU tilemap layer?▼

TilemapGPULayer does not refresh automatically after edits. Call generateLayerDataTexture after modifying tiles with putTileAt or similar methods to regenerate the GPU data texture.

Related Skills

Explore More Software Engineering Skills→
Joshua-AllenJoshua-Allen

tilemaps

Load, create, and manipulate tilemap layers, collision, and camera culling in Phaser 4.

Community
Intermediate
onemankingonemanking

tilemaps

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

Community
Intermediate
GiantCroissant-LunarGiantCroissant-Lunar

loading-assets

Queue and cache Phaser 4 assets during preload with progress events.

Official
Advanced
XyrcesXyrces
2

Tilemap Design

Design Godot 4 tilemap systems with autotiling, chunk streaming, and ECS integration.

Community
Advanced