rectangle fade

[sergil]

I made a fadein+fadeout effect between states (using a function that uses a black sprite that changes the alpha), but I was thinking if this approach can be done using a rectangle object fill of black color??? how could be done?

 

my actual code is:

fade: function (nextState)     {        var spr_bg = this.game.add.sprite(0, 0, "black-bg");        spr_bg.alpha = 0;        this.nextState = nextState;        s = this.game.add.tween(spr_bg)        s.to({ alpha: 1 }, 500, null)        s.onComplete.add(this.changeState, this)        s.start();    },    changeState: function ()     {        this.game.state.start(this.nextState);        this.fadeOut();    },    fadeOut: function ()     {        var spr_bg = this.game.add.sprite(0, 0, "black-bg");        spr_bg.alpha = 1;        s = this.game.add.tween(spr_bg)        s.to({ alpha: 0 }, 700, null)        s.start();    },

Rich, if you are tweaking the state management for the new version of phaser, could be interesting to include some basic transition effects between states?

[rich]

Yes agreed, I've been looking at how States will need to be split out. It's quite a large internal change, but I think there's room for them to still be able to handle transitions nicely. This is several weeks away yet though.

[sergil]

Anyone knows how to create a rectangle object and fill of black color?

 

In the examples I can see how to create the rectangle but I can't see how to fill 

 

I will be expecting the new state manager version!!!! thanks for all your great job!!!

[Alvin]

Hi,

 

In order to "fill" a rectangle, you just need to add graphics.beginFill(0x + colourCode) before calling the drawRect method.

 

See the graphics example for more information :

http://gametest.mobi/phaser/examples/_site/view_full.html?d=display&f=graphics.js&t=graphics

[sergil]

ok I finally used:

fade: function (nextState)     {        var spr_bg = this.game.add.graphics(0, 0);        spr_bg.beginFill(this.fadeColor, 1);        spr_bg.drawRect(0, 0, this.game.width, this.game.height);        spr_bg.alpha = 0;        spr_bg.endFill();        this.nextState = nextState;        s = this.game.add.tween(spr_bg)        s.to({ alpha: 1 }, 500, null)        s.onComplete.add(this.changeState, this)        s.start();    },    changeState: function ()     {        this.game.state.start(this.nextState);        this.fadeOut();    },    fadeOut: function ()     {        var spr_bg = this.game.add.graphics(0, 0);        spr_bg.beginFill(this.fadeColor, 1);        spr_bg.drawRect(0, 0, this.game.width, this.game.height);        spr_bg.alpha = 1;        spr_bg.endFill();        s = this.game.add.tween(spr_bg)        s.to({ alpha: 0 }, 600, null)        s.start();    },

I have a variable this.fadeColor to pass the color of the fade

 

Thanks a lot!!!