Help us improve
Share bugs, ideas, or general feedback.
From phaser-assets
Visually design game levels, rooms, and structures using sprite sheet tiles for Phaser JS games. Triggers when the user wants to design a level, create a scene, build a room, lay out a map, place tiles, or compose a game area from sprite sheets. Also triggers for Tiled tilemap creation.
npx claudepluginhub ehartye/phaser-assets --plugin phaser-assetsHow this skill is triggered — by the user, by Claude, or both
Slash command
/phaser-assets:scene-designerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Open a visual tile-based scene editor so the user can design game levels, rooms, and structures. Claude pre-populates the grid with tiles and zones, the user refines visually, and the result is a Tiled-compatible JSON tilemap that Phaser loads natively.
Builds and refactors Phaser 3 browser games for new projects, scenes, entities, physics, UI, tilemaps, animations, input, audio, cameras, and Phaser-specific bugs or performance issues.
Standardizes tileset creation, auto-tile rules, collision shapes, and tilemap configuration for 2D tile-based level construction.
Constructs Godot scenes from patterns like platformer characters, top-down chars, UI screens, projectiles, pickups, tilemaps with required companion nodes (e.g., CollisionShape2D).
Share bugs, ideas, or general feedback.
Open a visual tile-based scene editor so the user can design game levels, rooms, and structures. Claude pre-populates the grid with tiles and zones, the user refines visually, and the result is a Tiled-compatible JSON tilemap that Phaser loads natively.
Use this when the user wants to create or edit a game level, room, building, or any tile-based structure. Works for both top-down and side-scrolling layouts. Requires sprite sheets already in the project (via asset-finder or manually added).
Before opening the designer, determine:
If the user is vague, suggest sensible defaults based on game type:
curl -s http://localhost:8483/health || python "$CLAUDE_PLUGIN_ROOT/scripts/server.py" --port 8483 --no-open &
Discover available tilesets in the project. Look in assets/images/tiles/, assets/images/characters/, and similar directories for PNG sprite sheets. Check for spritesheetInfo.txt files or inspect the images to determine tile size, margin, and spacing. Common Kenney roguelike sheets use 16x16 tiles with margin=1, spacing=1.
POST the scene config with ALL relevant tilesets loaded. Include terrain, characters, objects — anything the user might want to paint with. Each tileset gets its own tab in the palette:
curl -s -X POST http://localhost:8483/api/designer/load \
-H "Content-Type: application/json" \
-d '{
"project_path": "<absolute_project_path>",
"grid": {"width": 20, "height": 15},
"tile_size": {"width": 16, "height": 16},
"tilesets": [
{
"name": "terrain",
"image_path": "assets/images/tiles/terrain.png",
"tile_width": 16, "tile_height": 16,
"margin": 0, "spacing": 0
},
{
"name": "characters",
"image_path": "assets/images/characters/spritesheet.png",
"tile_width": 16, "tile_height": 16,
"margin": 1, "spacing": 1
}
],
"layers": [
{"name": "Ground", "type": "tilelayer", "data": [...]},
{"name": "Objects", "type": "tilelayer", "data": [0, 0, ...]},
{"name": "Collision", "type": "objectgroup", "objects": []}
],
"zones": [
{"name": "spawn", "x": 32, "y": 192, "width": 16, "height": 16}
]
}'
Use tile indices from sprite-inspector results to pre-fill layers. For example, if grass is tile index 5 in the terrain tileset, fill the Ground layer data array with 6 (index 5 + firstgid 1). Load as many tilesets as the project has — the user can switch between them in the palette tabs.
curl -s http://localhost:8483/api/designer/results
Wait until status is "submitted".
curl -s http://localhost:8483/api/designer/export > "<project_path>/assets/tilemaps/level1.json"
// preload()
this.load.tilemapTiledJSON('level1', 'assets/tilemaps/level1.json');
this.load.image('terrain-tiles', 'assets/images/tiles/terrain.png');
// create()
const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('terrain', 'terrain-tiles');
const groundLayer = map.createLayer('Ground', tileset, 0, 0);
const buildingLayer = map.createLayer('Buildings', tileset, 0, 0);
// Collision from object layer
const collisionLayer = map.getObjectLayer('Collision');
// ... or from tile properties
Read references/phaser-integration.md (in the asset-finder skill directory) for complete tilemap code patterns.
Shut down the server when done:
curl -s -X POST http://localhost:8483/shutdown