How to set background color of Phaser 3 Game during runtime?

Question

I am new to Phaser 3 Framework , but have expertise in Angular/Ngrx.

Currently , I am creating a Custom Phaser 3 Game Editor using Angular/Ngrx. Need to modify background color of the Phaser 3 Game at run time.

In Phaser 2+ version , Below code set background color of the game ,

game.stage.backgroundColor = "#4488AA";

But how to set game background color in Phaser 3 irrespective of scene ?

Do we need to set via Camera like below?

this.cameras.main.setBackgroundColor(0xbababa)

Please guide me.

Urinary

Yes, changing it via the camera is the only way in Phaser 3. – Yves

Answer 1

If you want the same background color regardless of the active scene, Phaser 3 has a backgroundColor property in the GameConfig object. You can see the documentation here and a working version here.

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 700,
    backgroundColor: '#4488aa',
    scene: {...}
};

You also have the option of creating a transparent canvas for the game and using a div underneath it to change the background color. To do this, you'll use the transparent property of the GameConfig object. You'll also want to make sure you use the parent property as well with a corresponding <div id="gameContainer"></div> in the HTML to make it easier to grab and modify the color beneath the canvas.

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 700,
    parent: 'gameContainer',
    transparent: true,
    scene: {...}
};

Then, in the create method, you'll grab that parent item and modify the color:

    create() {
        var div = document.getElementById('gameContainer');
        div.style.backgroundColor = "#4488AA";
    }

You can see a working version here.

Chillon