skills.rest
WanderTheWeeb
WanderTheWeebCOMMUNITY
Explore all skills by this author →
GitHub

tilemaps

Load and render Phaser 4 tilemaps from Tiled JSON with collision and tile properties.

1|Updated May 3, 2026
Search Tags:#collision#phaser#tilemaps#arcade physics#tiled#gpu tile layer#tile properties
One-click install
npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill tilemaps-wandertheweeb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tilemaps
Source: https://github.com/WanderTheWeeb/papas_trauma/tree/main/skills/tilemaps
Command: npx skills add https://github.com/WanderTheWeeb/papas_trauma --skill tilemaps-wandertheweeb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tilemaps in Phaser can be complex to wire up correctly—loading Tiled JSON, matching tileset/layer names, creating render layers, and getting reliable collision and tile properties working.

Core Features & Use Cases

  • Load and render Tiled maps: Parse Tiled JSON and create tilemap layers from cached data.
  • Configure tilesets and layers: Link tileset names from Tiled to loaded textures, then create CPU or GPU layers as needed.
  • Set collision and leverage tile metadata: Enable Arcade Physics collision via indexes, ranges, properties, exclusions, collision groups, and per-tile callbacks; read custom tile properties for gameplay rules.
  • Use cases: Platformers and RPG maps created in Tiled, dynamic/destructible tile gameplay using runtime tile edits, and performance-focused large levels using GPU layers (orthographic, WebGL only).

Quick Start

Load your map JSON with this.load.tilemapTiledJSON and your tileset image with this.load.image, then create the tilemap, add the tileset image using the exact tileset name from Tiled, create a layer using the exact Tiled layer name, and finally enable collision with ground.setCollision([1, 2, 3]).

Frequently Asked Questions about tilemaps

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

FAQPage Schema
How do I load Tiled JSON and set up tilemap collision in Phaser?▼

To set up Phaser tilemap collision, load your Tiled JSON and tileset image into cache, create a tilemap, add the tileset using its exact Tiled name, create a layer with its exact name, and call setCollision with tile indexes to enable Arcade Physics.

Why do my Tiled tilesets and layers fail to render in Phaser?▼

Tiled tilemaps fail in Phaser when the tileset and layer names in your code do not exactly match the names defined in the Tiled JSON. Strict name matching is required to successfully bind tilesets to loaded textures and create render layers.

Can I use GPU tile layers for large Tiled levels in Phaser?▼

GPU tile layers in Phaser support large orthographic Tiled levels for WebGL rendering. Edits to GPU layers require manual regeneration by calling generateLayerDataTexture to update the data texture and reflect gameplay changes visually.

How do I configure Arcade Physics collision groups and exclusions for tilemaps?▼

Arcade Physics collision on tilemaps is configured using setCollision by specifying tile indexes, ranges, or custom properties. You can define exclusions and collision groups to control exactly which tiles interact with game objects.

How do I read custom tile properties from Tiled for gameplay logic?▼

Custom tile properties from Tiled are read directly from the tilemap data to drive gameplay rules and per-tile callbacks. You can query and manipulate these properties at runtime to implement dynamic interactions like destructible terrain.

Related Skills

Explore More Software Engineering Skills→
phaserjsphaserjs
40.1k

tilemaps

Automate Phaser tilemap creation and management from Tiled JSON maps.

Official
Advanced
ArtRivArtRiv

tilemaps

Loads Tiled maps in Phaser Tigame and configures collision and tile callbacks for gameplay systems.

Community
Advanced
mahirocokomahirocoko

physics-arcade

Configure Arcade Physics for Phaser 4 sprites, groups, and collisions.

Community
Advanced
tja688tja688

tilemaps

Integrate Tiled JSON maps into Phaser 4 scenes with layers and collision.

Community
Intermediate