lpbr

Problem setting background color before create

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!

Share this post


Link to post
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);

 

Share this post


Link to post
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:

 

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
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!

Share this post


Link to post
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);

 

Share this post


Link to post
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!

 

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.