~1 min read

Scenes

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

A Scene is a self-contained world: it owns a display list, a camera, an input handler, and (optionally) a physics world. A Game runs one or more scenes; each has its own update loop.

Lifecycle

HookWhen it runsTypical use
init(data)Once, before preload. Receives data from scene.start.Read parameters, reset class fields.
preload()Once, before create. Loader runs to completion.Queue asset loads.
create(data)Once. Loader has finished.Build the scene graph.
update(t, d)Every frame after create.Per-frame logic.
shutdown()When the scene stops (e.g. scene.stop, scene.start of another scene).Tear down listeners, timers, sounds, tweens started in create.
destroy()When the scene is permanently removed from the game.Final cleanup; rare in apps that just transition between scenes.

A scene that’s stopped and later started again sees init / preload / create fire afresh — pair every shutdown with the create it cleans up after.

Multiple scenes at once

Scenes are not mutually exclusive. Common patterns:

  • A persistent HUD scene runs in parallel with the gameplay scene.
  • A pause menu scene sits on top; the gameplay scene is paused but not stopped.
  • A long-lived audio or save scene exists purely for cross-cutting state.
// Start gameplay, then layer the HUD on top.
this.scene.start('Game');
this.scene.launch('HUD');

scene.start(key) replaces the current scene; scene.launch(key) runs the new scene alongside it.

Passing data between scenes

this.scene.start('Game', { level: 3, seed: 0xdead });
// Inside Game:
init(data: { level: number; seed: number }) {
	this.level = data.level;
}

For cross-cutting state that outlives any single scene (player profile, settings, save data), use the scene registry or a plain module-level store. The encyclopedia recommends a plain store unless you specifically need scene-event integration.