skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

tilemaps

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

Updated May 7, 2021
Search Tags:#game development#phaser#tilemap#arcade physics#tiled#tile collision#tilemap layer
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill tilemaps-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tilemaps
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/tilemaps
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill tilemaps-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building tile-based levels in Phaser 4 requires correctly wiring Tiled JSON data, tileset textures, layers, and collision together, and small mismatches (like tileset or layer names) silently break rendering or physics. ## Core Features & Use Cases - Tilemap and Layer Creation: Load Tiled JSON maps, link tileset images, and create CPU or GPU-rendered layers including isometric, hexagonal, and staggered orientations. - Collision and Physics Integration: Enable tile collision by index, range, property, or exclusion, and connect layers to Arcade Physics colliders 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: You are building a platformer level designed in Tiled. Use this Skill to load the map, create ground and foreground layers, set collision on solid tiles, and spawn enemies from an object layer. ## Quick Start Use the tilemaps skill to load my Tiled JSON map, create its layers with the correct tileset, and set up collision for my 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 JSON map in Phaser 4?▼

Load the map with this.load.tilemapTiledJSON in preload, then call this.add.tilemap with the cache key in create. Link the tileset image with map.addTilesetImage using the exact tileset name from Tiled, then call map.createLayer with the layer name.

How do I set up tile collision with Arcade Physics in Phaser?▼

Enable collision on the layer using setCollision with tile indexes, setCollisionByProperty, or setCollisionByExclusion, then add this.physics.add.collider between your sprite and the layer. Without marking tiles as collidable first, physics colliders pass through all tiles.

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 via shader, offering high performance but supporting only orthographic maps and a single tileset. TilemapLayer supports multiple tilesets and all orientations including isometric and hexagonal.

Why does addTilesetImage return null in Phaser?▼

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

Does Phaser tilemap support isometric maps?▼

Yes, Phaser supports isometric, hexagonal, and staggered maps parsed from Tiled, with coordinate conversion functions selected automatically based on orientation. However, TilemapGPULayer only supports orthographic maps, so use TilemapLayer for isometric rendering.

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

TilemapGPULayer does not automatically refresh after tile edits. After calling putTileAt or other modification methods, you must call generateLayerDataTexture to regenerate the GPU data texture before changes appear on screen.

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
WanderTheWeebWanderTheWeeb
1

cameras

Configure Phaser 4 cameras for viewport rendering, scrolling, zoom, and target following.

Community
Intermediate
TimeKastTimeKast

2d-games

Guide 2D game system design for sprites, tilemaps, physics, and cameras.

Official
Intermediate
SaschaBrunnerCHSaschaBrunnerCH
19

arcgis-custom-rendering

Build WebGL-based custom layers for ArcGIS rendering pipelines.

Community
Advanced