use same background and effects for different states?

[BdR]

EDIT: I've posted a working example here:

https://github.com/BdR76/phaserbackground

 

The scrolling stars from my previous post are now working. But I'm looking for a way to use this as the background effect in several different states of the game. So the main menu state, the level select screen and in the game itself should all have the scrolling background effect.

 

Is there a clever way to use the same background effect in different states, without adding the same code to all these states? Maybe it's possible to extend the Phaser.state class and add functions to initialise and update the background, and then call those same functions from different states, but how? Or is it better to put it in my "global" game class. I mean my game code starts something like this:

var mygame = {};

mygame.Bootup = function(game){};

mygame.Bootup.prototype = {

    preload: function(){

    // etc.

[valueerror]

i have  ALL my functions that every state needs in global..   one for physics setup, one for layer setup, one for player,objects, and so on..  and of course for the update loop there are also two functions... once written - used in over 30 states..  i don't see a problem with that.

[spencerTL]

Is this article any use?

 

http://www.emanueleferonato.com/2014/09/08/phaser-tutorial-creating-your-own-phaser-plugins/

[BdR]

i have  ALL my functions that every state needs in global..   one for physics setup, one for layer setup, one for player,objects, and so on..  and of course for the update loop there are also two functions... once written - used in over 30 states..  i don't see a problem with that.

 

Thanks, I tried this approach and it works

 

Quick followup question though.. I've made a global dots-background function and a fade in/out function. Everything is working except the fade out..  The fade in works, but the fade out does nothing. The tween does get created and the onComplete is called and it swtiches from one state to the other state. Here is my minimal example code:

// -------------------------------------// define the game state screen1// -------------------------------------var mygame = {};mygame.Screen1 = function(game){    this.game = game;};mygame.Screen1.prototype = {    create: function() {        // random background and random text position        addRandomPolkaDots(this.game);        var x = this.game.rnd.integerInRange(0, 500);        var y = this.game.rnd.integerInRange(0, 400);        // add text        var style = { font: "65px Arial", fill: "#ff0044", align: "center" };        var text = this.game.add.text(x, y, "Screen 1\nTap to switch.", style);        // tap input handler        this.game.input.onDown.add(this.doTap, this);        // -- FADE IN --        console.log('create -- fade in..');        doFadeIn(this.game, true);    },    doTap: function(){        // -- FADE OUT --        console.log('doTap -- fade out..');        var t = doFadeIn(this.game, false);        t.onComplete.add(this.switchToScreen2, this);    },    switchToScreen2: function(){        this.game.state.start('Screen1');    }};// -------------------------------------// global functions can be called from all states// -------------------------------------function addRandomPolkaDots(gm) {    var graphics = gm.add.graphics(0, 0);        // add random dots    for (var i=0; i < 10; i++) {        // random position and radius        var x = this.game.rnd.integerInRange(0, 500);        var y = this.game.rnd.integerInRange(0, 400);        var r = this.game.rnd.integerInRange(10, 100);        // draw a circle        graphics.lineStyle(0);        graphics.beginFill(0x4400ff, 0.5);        graphics.drawCircle(x, y, r);    };}function doFadeIn(gm, bFadeIn) {    // fade in or out    var alphaFrom = 0.0;    var alphaGoal = 1.0;    if (bFadeIn==true) {        alphaFrom = 1.0;        alphaGoal = 0.0;    }    // set blaack box    var blackbox = gm.add.graphics(0, 0);    blackbox.beginFill(000000, alphaFrom);    blackbox.drawRect(0, 0, 800, 600);    // tween alpha to fade in or out    var tw = gm.add.tween(blackbox);    tw.to( { alpha: alphaGoal}, 1000, Phaser.Easing.Linear.None, true);    return tw;}// -------------------------------------// define Phaser game and add states// -------------------------------------var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'game');game.state.add('Screen1', mygame.Screen1);game.state.add('Screen2', mygame.Screen1); // just testing, re-use the same state..game.state.start('Screen1');

[XekeDeath]

Just a guess from looking at the code quickly, but it looks like you are creating a second black square to fade out and tweening the alpha on that...

I imagine this would have no visual effect, as the black fading out square is over a black square at 100% alpha...

Perhaps what you want to do is store the blackbox reference somewhere outside the doFadeIn function, and check for it's existence when you want to fade it in or out.

[BdR]

Keeping the blackbox reference outside of the doFadeIn function is a good point, because I don't know how many graphics objects are being created (and kept in memory?) when this fade in/out is repeated many times..

 

Also, I just figured out what went wrong, filling a rectangle with a color and alpha 0.0 is like painting something with completely translucent paint, that obviously has no effect. 

    // set black box    var blackbox = gm.add.graphics(0, 0);    blackbox.beginFill(000000, 1.0); // <- alpha must be 1.0    blackbox.drawRect(0, 0, 800, 600);    blackbox.alpha = alphaFrom; // <- set starting alpha value here    // tween alpha to fade in or out    var tw = gm.add.tween(blackbox);

Now fade in and fade out work.

[BdR]

I've created a working example with two separate states Screen1 and Screen2. There is a separate .js file with global functions for the background and fade effects. Check it out here, I'd like to hear any comments or improvements

https://github.com/BdR76/phaserbackground