Swap Scene Render Order

Demonstrates how to use the scene.swapPosition method to change the display depth of two active scenes, effectively moving one in front of the other.

Swap Scene Render Order, running
800 × 600
GitHub
class Background extends Phaser.Scene
{
    constructor ()
    {
        super({ key: 'background', active: true });
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        this.face = this.add.image(-10, 300, 'face');
    }
}

class Demo extends Phaser.Scene
{
    constructor ()
    {
        super({ key: 'demo', active: true });
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('arrow', 'assets/sprites/longarrow.png');
    }

    create ()
    {
        this.arrow = this.add.image(400, 300, 'arrow').setOrigin(0, 0.5);

        this.input.once('pointerdown', function ()
        {

            this.scene.swapPosition('background');

        }, this);
    }

    update (time, delta)
    {
        this.arrow.rotation += 0.01;
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'game-container',
    scene: [ Background, Demo ]
};

const game = new Phaser.Game(config);

More in Scenes52 examples