2D development in Phaser through a web programmer's eyes

An orientation to Phaser 4 — what it is, what it isn't, and how it differs from Phaser 3.

Install Phaser 4 via npm or a CDN, and verify the install with a one-line scene.

Build and run your first Phaser 4 scene — a bouncing logo — in a sandboxed playground.

Recommended project layout, build tooling, and TypeScript settings for non-trivial Phaser 4 projects.

The mental model behind Phaser 4 — what each subsystem is for, and how they fit together.

How Phaser 4 schedules update and render, what delta means, and how to write frame-rate-independent code.

Phaser's unit of "screen" or "mode" — lifecycle, parallel scenes, and data passing.

The retained-mode display list — what game objects are, how the transform hierarchy works, and when to use which built-in type.

Viewports, scroll, zoom, follow, and effects — how Phaser decides what to draw and where.

Keyboard, pointer (mouse + touch), and gamepad — and how Phaser routes events to game objects.

How the asset pipeline works — queueing in preload, the typed cache, and patterns for large games.

Task-oriented recipes for the systems you'll actually use — physics, tilemaps, animation, audio, particles, shaders, and plugins.

Fast AABB physics for platformers, shmups, and most arcade-style games — bodies, collisions, groups, and the pitfalls that trip new users.

Full rigid-body simulation for stacking, joints, compound bodies, and anything Arcade can't model.

Loading Tiled JSON maps, rendering layers, building collision, and mutating tiles at runtime.

Frame animations from spritesheets and atlases — defining, playing, chaining, and reacting to animation events.

Phaser 4's tween system — interpolating any numeric property over time. Targets, easing, chaining, value tweens, and the pitfalls.

Phaser 4's Web Audio integration — music vs. SFX, the user-gesture unlock, mixing, and spatial sound.

The particle emitter — common effects, configuration anatomy, and the performance tradeoffs that actually matter.

Custom WebGL effects in Phaser 4 — the built-in Filter library, custom GLSL via the Shader game object, and where RenderNodes fit in.

Authoring and consuming Phaser 4 plugins — the three plugin shapes (global, scene, game-object), and a worked save-system example.

The `scene.transition()` API — animated handoff between scenes with both scenes running during the overlap.

Runnable Phaser 4 examples — each one is a sandboxed playground you can read, fork, and modify.

The smallest possible Phaser 4 example — load a texture and draw it once.

Move a sprite with WASD or arrow keys, polling input each frame with delta-time velocity.

Fade between two scenes using the camera fade-out / fade-in API.

Chain a sequence of tween effects on a single target — move, spin, fade, reset, loop.

Click anywhere to drop a physics ball — they collide with each other and the world bounds.

Click anywhere to fire a one-shot explosion via the particle emitter's explode mode.

Walk into stars to collect them — the canonical "overlap as trigger" pattern with score tracking.

Apply the built-in Glow filter to a sprite and animate its strength with a tween.

Short definitions of the key Phaser 4 concepts, with analogies from the web and other engines.