Problem setting background color before create

[lpbr]

I have this game with a salmon background color. I can set the background to the proper color into the create function with:

game.stage.backgroundColor = '#f3cca3';

The problem is that it takes a little while preloading the images and sounds and so it stays black in the meantime. I tried:

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'meems_house', { preload: preload, create: create });

game.stage.backgroundColor = '#f3cca3';

But then it says 'Cannot set property 'backgroundColor' of null' indicating that it didn't find 'game' — however it doesn't make any sense because 'game' is NOT null as it was created one line above...

PS: The only thing I can imagine is that although object 'game' was declared it was not properly instantiated yet because it's gonna happen into the create function — but this is still weird to me.

Anyway I would like to know if there is a way to set the canvas background color before the create function...

Thanks!

[oplayer]

var config = {
    width: window.innerWidth,
    height: window.innerHeight,
    type: Phaser.CANVAS,
    parent: 'meems_house',
    backgroundColor: '#f3cca3',
    scene: { 
        preload: preload, 
        create: create 
    }
};

var game = new Phaser.Game(config);

 

[lpbr]

4 minutes ago, oplayer said:

var config = {
    width: window.innerWidth,
    height: window.innerHeight,
    type: Phaser.CANVAS,
    parent: 'meems_house',
    backgroundColor: '#f3cca3',
    scene: { 
        preload: preload, 
        create: create 
    }
};

var game = new Phaser.Game(config);

This is really a very nice approach but unfortunately if didn't work. I just tried it and:

On PC = Works perfectly with no errors. However when I tried it on two of my Android mobiles...

On Android Marshmallow = Pops a generic error alert and on Debugger I get "WebGL: INVALID_VALUE: vertexAttribPointer: index out of range"
On Lollipop = Just freezes and on Debugger I get a "Uncaught SyntaxError: Unexpected identifier" in the line 2 (width etc).

Man, working with mobile device is really a nightmare!

 

[rich]

This isn't a Phaser 3 question, so I'll move it to the correct forum.

However, the reason game.stage isn't defined even when set the line after game is created, is because the game hasn't booted yet, so the Stage hasn't been made, so you can't set the color on it. It needs to happen either in the game config or the State.

The game config shown above is for Phaser 3 though and won't work with Phaser 2.

[lpbr]

23 minutes ago, rich said:

This isn't a Phaser 3 question, so I'll move it to the correct forum.

However, the reason game.stage isn't defined even when set the line after game is created, is because the game hasn't booted yet, so the Stage hasn't been made, so you can't set the color on it. It needs to happen either in the game config or the State.

The game config shown above is for Phaser 3 though and won't work with Phaser 2.

But I am using the latest Phaser build. Can I be using Phaser 3.x build and yet coding in 2.x? This is really confusing and weird!

[rich]

There is no Stage in Phaser 3, and the code you posted in your very first post is all Phaser 2 code. So if you're actually using any of the 3.x versions there's no way it would do anything (that you'd expect)

[rich]

You can tell for sure by opening up the dev tools and looking at the console. There it will output the version being used.

[lpbr]

Oh, I see... so even the oplayer example is all wrong then. Thank you!

PS: I am still learning Phaser and there is not a bunch of specific Ph3 examples online. Since I have used the existing examples, certainly it's all Ph2 stuff!

[rich]

Yeah the oplayer example was for Phaser 3 (because this was posted in that forum I guess).

In Phaser 2 you can use a game configuration object and one of the properties it has is backgroundColor:

var config = {
    width: 800,
    height: 600,
    renderer: Phaser.AUTO,
    backgroundColor: '#ff0000',
    state: {
        preload: preload,
        create: create,
        update: update
    }
}

var game = new Phaser.Game(config);

 

[lpbr]

Thank you, rich, I will check and see if it does work on my mobiles without to crash them. 

[rich]

There’s no way a background color can crash a mobile. Plenty of things can, but that isn't one of them.

[lpbr]

16 hours ago, rich said:

There’s no way a background color can crash a mobile. Plenty of things can, but that isn't one of them.

Sure... Perhaps I didn't express myself correctly – I didn't mean that the MOBILE crashes at all. What I meant is that this method of setting a var with the config parameters and then apply it to the Phaser.Game(config); was crashing the Phaser core on my two mobiles. I don't know why it happened but it definitively did...

Anyway, it was with the oplayer example. With your example it seems to be working fine though.

HOWEVER, to have it fully functional I had to change renderer: Phaser.AUTO to renderer: Phaser.CANVAS otherwise debugger will throw the following error:

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range
phaser.min.js:3 WebGL: too many errors, no more errors will be reported to the console for this context.

Nonetheless the application still works and mobile doesn't complain. I have no idea what it is.

Thanks for the help!

 

[cristlee]

Hi, rich. I am relative new to phaser 3. So my question is, in phaser 3. How can I change background color in the scene. For example, in phaser 2, I can do this, 

game.stage.backgroundColor = '#71c5cf';

how can this be done in phaser 3?

[samme]

http://labs.phaser.io/edit.html?src=src\camera\background color.js