Jump to content

Problem setting background color before create


lpbr
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

4 minutes ago, oplayer said:

var config = {
    widthwindow.innerWidth,
    heightwindow.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!

:unsure:

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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);

 

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...