1
\$\begingroup\$

what is wrong with my code? i'm using game.stage.backgroundColor but the screen remains black.

main.js:

var demo = demo || {};

demo.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '');

demo.game.state.add('state1', demo.state1);
demo.game.state.add('state2', demo.state2);    

demo.game.state.start('state1');

state1.js:

var demo = demo || {};

demo.state1 = function() {};

demo.state1.prototype = {
    preload: function() {

    },
    create: function() {
        game.stage.backgroundColor = "#4488AA";
    },
    update: function() {

    }
};
\$\endgroup\$
  • 2
    \$\begingroup\$ Have you confirmed that all the functions actually run? \$\endgroup\$ – Tyyppi_77 Sep 28 '16 at 11:51
3
\$\begingroup\$

So, I did some tinkering with Phaser, and found the following code to work. Basically it seems like your issue was that the state doesn't know what the variable game is. That created an issue. The issue wasn't in setting the color, the issue was that code never got called. Anyways, here's the code that worked for me.

var demo = demo || {};

var stateOne = function(game) {
}
stateOne.prototype = {
    create: function() {
        this.game.stage.backgroundColor = "#FF00FF";
    },
}

demo.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, "");
demo.game.state.add("stateOne", stateOne);
demo.game.state.start("stateOne");

As a disclaimer I should probably mention that I am not very experienced in JavaScript, so if you feel like some part is not necessary, feel free the point that out (or just remove it, you know it better).

\$\endgroup\$
2
\$\begingroup\$

If you want to change the background color for the whole game, it´s easier to just set it in the game config. You can even use transparency:

const config = {
  ...
  transparent: true
  ...
};
const game = new Phaser.Game(config);

...and with a color:

const config = {
  ...
  transparent: true,
  backgroundColor: 'rgba(255,110,110,0.5)',
  ...
};
const game = new Phaser.Game(config);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.