Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Game development, HTML5, Javascript and Phaser.

Imagine you are building a game with an animated backgound, and you have to restart the scene hosting the game.

How to restart the game without stopping – and restarting – the animated background too?

By placing the background in another scene, then calling both the background scene and the main game scene from a container scene.

Look at this example:

The game scene is the one with the text, while scrolling background has been placed in another scene.

When you click on the canvas, game scene restarts but the scrolling background does not.

This is possible thanks to Phaser which allows to have multiple scenes running simultaneously.

This prototype has four scenes: PreloadAssets, PlayGame, GameScene and ParticleScene.

PreloadAssets preloads all assets, then calls PlayGame.

PlayGame is the main scene, with launches two scenes: GameScene and ParticleScene. These scenes aren’t called with scene.start("PlayGame") as usual, but with scene.launch("ParticleScene").

The key to this approach using launch rather than start.

Look at the source code:

let game;
window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 640,
            height: 320
        },
        scene: [PreloadAssets, PlayGame, GameScene, ParticleScene]
    }
    game = new Phaser.Game(gameConfig);
    window.focus()
}

class PreloadAssets extends Phaser.Scene {
    constructor() {
        super("PreloadAssets");
    }
    preload() {
        this.load.image("square", "square.png");
    }
    create() {
        this.scene.start("PlayGame");
    }
}

class PlayGame extends Phaser.Scene {
    constructor(){
        super("PlayGame");
    }
    create(){
        this.scene.launch("ParticleScene");
        this.scene.launch("GameScene");
    }
}

class ParticleScene extends Phaser.Scene {
    constructor() {
        super("ParticleScene");
    }
    create() {
        let line = new Phaser.Geom.Line(-100, -100, game.config.width + 100, -100);
        let particles = this.add.particles("square");
        let emitter = particles.createEmitter({
            x: 0,
            y: 0,
            scale: {
                min: 0.05,
                max: 0.1
            },
            alpha: {
                min: 0.2,
                max: 0.4
            },
            angle: 90,
            speed: 50,
            frequency : 100,
            lifespan: 10000,
            emitZone: {
                source: line
            }
        });
    }
}

class GameScene extends Phaser.Scene {
    constructor() {
        super("GameScene");
    }
    create() {
        let d = new Date();
        var dateString = d.getUTCFullYear() + "/" + ("0" + (d.getUTCMonth()+1)).slice(-2) + "/" + ("0" + d.getUTCDate()).slice(-2) + " " + ("0" + d.getUTCHours()).slice(-2) + ":" + ("0" + d.getUTCMinutes()).slice(-2) + ":" + ("0" + d.getUTCSeconds()).slice(-2);
        let text = this.add.text(game.config.width / 2, game.config.height / 2, "Scene created on " + dateString + "\nClick to reload this scene\nwhile keeping background particles", { fontFamily: 'Arial', fontSize: 24  });
        text.setOrigin(0.5)
        let tintColor = Phaser.Utils.Array.GetRandom([0x62bd18, 0xff5300, 0xd21034, 0xff475c, 0x8f16b2, 0x588c7e, 0x8c4646, 0x1abc9c, 0x34495e, 0xe67e22, 0x7f8c8d]);
        this.cameras.main.setBackgroundColor(tintColor);
        this.input.on("pointerdown", function() {
            this.scene.start("GameScene");
        }, this);
    }
}

Using this Phaser feature allows us to restart scenes while keeping other scene, to create complex backgrounds or GUIs. Download the source code.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.