scenes

Scenes

Scenes are the organizational backbone of a Phaser game. Each Scene has its own lifecycle (init, preload, create, update), its own set of injected systems (this.add, this.input, this.cameras, etc.), and can be started, stopped, paused, slept, or run in parallel with other Scenes. The ScenePlugin (this.scene) controls all multi-scene orchestration.

Key source paths: src/scene/Scene.js, src/scene/Systems.js, src/scene/SceneManager.js, src/scene/ScenePlugin.js, src/scene/Settings.js, src/scene/const.js, src/scene/events/, src/scene/InjectionMap.js Related skills: ../game-setup-and-config/SKILL.md, ../loading-assets/SKILL.md, ../events-system/SKILL.md

Quick Start

// Minimal scene with all lifecycle methods
class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
    }

    init(data) {
        // Called first. Receives data passed from other scenes.
        // 'data' is whatever was passed via scene.start('GameScene', { level: 1 })
        this.level = data.level || 1;
    }

    preload() {
        // Called after init. Load assets here.
        this.load.image('logo', 'assets/logo.png');
    }

    create(data) {
        // Called after preload completes. Set up game objects.
        // 'data' is the same object passed to init.
        this.add.image(400, 300, 'logo');
    }

    update(time, delta) {
        // Called every frame while scene is RUNNING.
        // time: current time (ms), delta: ms since last frame (smoothed)
    }
}

const config = {
    width: 800,
    height: 600,
    scene: [GameScene]
};

const game = new Phaser.Game(config);

Core Concepts

Scene Lifecycle

The lifecycle is driven by SceneManager.bootScene() and SceneManager.create():

1. PENDING (0) - Scene is registered but not yet started.
2. INIT (1) - scene.init(data) is called if defined. Data comes from settings.data.
3. START (2) - Systems.start() fires. Events start and ready are emitted.
4. LOADING (3) - scene.preload() is called if defined. Loader runs. On completion, proceeds to create.
5. CREATING (4) - scene.create(data) is called if defined. Same data as init.
6. RUNNING (5) - scene.update(time, delta) called every frame. Scene renders.
7. PAUSED (6) - No update, but still renders.
8. SLEEPING (7) - No update, no render. State preserved in memory.
9. SHUTDOWN (8) - Scene is shut down, systems emit shutdown. Can be restarted.
10. DESTROYED (9) - Scene is fully destroyed. Cannot be restarted.