Set Background color for main camera

Phaser 3
1

Hi, I am new to Phaser3 and have had a hard time understanding the API docs.

I was looking to do something quite simple, which is to set the background color to grey when I initialize my scene. I found an example in the phaser3 examples that does this but I am a little bit confused and was wondering if someone could help me out.

The example is as follows:

    var config = {
    type: Phaser.WEBGL,
    scene: {
        preload: preload,
        create: create,
    },
    width: 900,
    height: 600
};

var objects = {};
var cam = null;


var game = new Phaser.Game(config);

function preload ()
{
    //this.load.image('image', 'assets/sprites/mushroom2.png');
}

function create ()
{
    
    cam  = this.cameras.add(0, 0, 900, 600);
    // we need to have a random image here for some reason...

    objects.image0 = this.add.image(-100,-100, 'image');


    cam.setBackgroundColor(0xbababa);
}

(taken from: http://labs.phaser.io/edit.html?src=src/camera\background%20color.js)

I was trying to modify it and it appears that the second I remove the line which I have added a comment to above, the entire thing seems to break and it goes to a black background on my canvas.

If i keep the line in and load a non-existent image, positioning it far offscreen everything works well but it seems sort of confusing. Why do you need to load a non-existent image in order to have the background color of the canvas work?

Thanks!

2

Simply set the color of the main camera to gray

function create() {
  this.cameras.main.setBackgroundColor(0xbababa)
}
3

Hi @vomc,
It’s true, I had not realized it.
I have verified that the problem mentioned only appears in phaser 3.15. In current and previous versions of Phaser, that problem doesn’t exist.

Regards.

1 Like
4

Thanks for this, I was getting crazy and it’s simply not working in 3.15.