Phaser 4 Game Development

This skill covers Phaser 4 only. If a project lists phaser@^3, treat it as a migration target — read references/migration-hotspots.md first, then bump to phaser@^4. Do not start new work on v3.

Build 2D browser games using Phaser 4's WebGL-first renderer, scene model, and updated rendering APIs.

Core principles

Phaser 4 is not Phaser 3 with renamed methods — the renderer, filter model, shader assumptions, texture orientation, and batching all changed.

1. WebGL-first, not Canvas-first: treat Canvas as legacy compatibility.
2. Measure assets before loader config: most sprite/tile bugs are incorrect frame metadata, not rendering bugs.
3. Prefer the simplest rendering path: standard game objects until scale or effects justify filters, GPU layers, or shaders.
4. Migration is selective redesign: basic scene code ports cleanly; masks, FX, custom pipelines, shaders, and texture workflows usually need real updates.

STOP: Before Loading Any Spritesheet or Atlas

Read references/spritesheets-and-textures.md first. A few pixels off in frame size, spacing, or margin creates silent corruption that surfaces later as animation/rendering bugs. Never guess frame dimensions; don't assume texture orientation is irrelevant when compressed textures or custom shaders are involved.