Jump to content

use same background and effects for different states?


Recommended Posts

EDIT: I've posted a working example here:


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.

Link to comment
Share on other sites

  • 2 weeks later...

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');
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.  :lol:
    // 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.

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

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.


  • Recently Browsing   0 members

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