Change Scene Order

Demonstrates how the sequence of scenes provided in the game configuration determines their initial rendering depth when multiple scenes are active simultaneously.

800 × 600

GitHub

class SceneA extends Phaser.Scene {

    constructor ()
    {
        super({ key: 'SceneA', active: true });
    }

    create ()
    {
        let graphics = this.add.graphics();

        graphics.fillStyle(0xff3300, 1);

        graphics.fillRect(100, 200, 600, 300);
        graphics.fillRect(100, 100, 100, 100);

        this.add.text(120, 110, 'A', { font: '96px Courier', fill: '#000000' });
    }
}

class SceneB extends Phaser.Scene {

    constructor ()
    {
        super({ key: 'SceneB', active: true });
    }

    create ()
    {
        let graphics = this.add.graphics();

        graphics.fillStyle(0xff9933, 1);

        graphics.fillRect(100, 200, 600, 300);
        graphics.fillRect(200, 100, 100, 100);

        this.add.text(220, 110, 'B', { font: '96px Courier', fill: '#000000' });
    }
}

class SceneC extends Phaser.Scene {

    constructor ()
    {
        super({ key: 'SceneC', active: true });
    }

    create ()
    {
        let graphics = this.add.graphics();

        graphics.fillStyle(0xffcc33, 1);

        graphics.fillRect(100, 200, 600, 300);
        graphics.fillRect(300, 100, 100, 100);

        this.add.text(320, 110, 'C', { font: '96px Courier', fill: '#000000' });
    }
}

let config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#392542',
    parent: 'game-container',
    scene: [ SceneA, SceneB, SceneC ]
};

let game = new Phaser.Game(config);

More in Tutorial3 examples

Scene ControllerThis example demonstrates comprehensive management of multiple concurrent scenes. It shows how to use a master UI scene to toggle visibility and active status (pausing/resuming) for child scenes, and how to reorder the scene stack using bringToTop, moveUp, moveDown, and moveAbove.

Scene Rendering OrderDemonstrates how to change the display order of multiple active scenes using the Scene Manager's bringToTop method.