phaser.js State transition plugin

[xnamex]

Hi everybody,

 

Pretty new to Phaser.js but kind of old to AS3

 

I just started to port a as3 game into html5 with phaser, but my client wanted transitions between states - just like my game had in flash. Therefore I created a plugin just for this.

 

You can find it here: https://github.com/cristianbote/phaser-state-transition

 

Let me know, what you guys think, or what can be improved.

 

Cheers!

[jzcoder]

This is great.  Coming from cocos2d myself, I miss all the great built-in transitions. I hope to see more transitions, including some of the 3D ones cocos has. 

[rich]

Very cool indeed!

[anissen]

Great plug-in! I will most definitely be making use of this -- starred!

[xnamex]

Thanks guys!

@jzcoder that could actually be easy to implement, basically you're gonna manipulate bitmapData, also 1.1.4 will definitely add cool stuff like blend modes.

@rich thanks, but all this is because of you!

[jpdev]

Hi xnamex,

 

For me (chrome 32) your example does not work while in WebGL Mode (I only see the buttons), if I switch to canvas it works fine.

Just wanted to let you know. (Sadly, no errors displayed - just the red / blue tiled sprites are missing completly).

 

Maybe you could just switch the example to .CANVAS by default.

[jpdev]

Hi again,

 

Thanks for your plugin

 

I have integrated it into my game. But I had to make a few adjustments. I send you a pull request on github, so you can look them over and decide if you would like to use (some of) them.

 

Greetings,

JP

[xnamex]

Hey,

I'm gonna take a look for sure, but have you found the problem? It's weird because i always use chrome for developing, and it worked for me.

Cheers!

[Mefteg]

Thank you for the plugin! Really great !!

[xnamex]

Hi everyone,

 

Just letting you know, I've updated the plugin to work with Phaser 2.0.0!

There's really a great performance boost in 2.0.0, you can easily see it in action between transition.

 

Let me know if something doesn't work for your game or isn't quite right.

 

Cheers!

[Antflow]

Hi,

 

I have a problem with the plugin, I cannot make it work as it should. I want to make a smooth transition between my preloader state and the menu state, but when the preloader is finished, the menu is already shown while the preloader is fading out. Any idea what's going on?

BasicGame.Preloader = function(game){this.transition = null;};BacisGame.Preloader.prototype = {preload = function(){// preload stuff},create = function(){this.transition = game.plugins.add(Phaser.Plugin.StateTransition);this.transition.settings(duration:2000,properties:{alpha:0});this.transition.to("MainMenu");};};

Kind regards,

Antflow

[jpdev]

The state you are fading to is already drawn (behind the one that is fading). This is by design.

It looks nice, as long as your old-state has no "holes" .. because then the old state fades away and by fading it reveals the new state. (there is never a blank screen.)

 

BUT if you rely on a backgroundcolor for the first state, and you therefor have instantly transparent areas, then this doesn't look nice.

 

You could setup your old-state in a way, that it has a background sprite that is covering all areas.

 

If you want to keep the transparent areas but still want to use the plugin, you you could modify the plugin to paint the bitmap (on which the first state is rendered)in your backgroundcolor and then render the state to it. This way you also have no see-through-holes through which the new state is shown instantly.

 

I have modified the plugin here:

https://github.com/jpcloud/phaser-state-transition/blob/colortransitions/src/phaser-state-transition.js

 

BUT this is from phaser 1.x and it has not been modified to work with 2.0 (as xnamex version has) so it's just to give you an idea how to maybe approach it, if you want to modify the plugin.

(Now that I know more about phaser I think instead of using a graphics object I would try to do it with BitMapData..)

[Antflow]

The state you are fading to is already drawn (behind the one that is fading). This is by design.

It looks nice, as long as your old-state has no "holes" .. because then the old state fades away and by fading it reveals the new state. (there is never a blank screen.)

 

BUT if you rely on a backgroundcolor for the first state, and you therefor have instantly transparent areas, then this doesn't look nice.

 

You could setup your old-state in a way, that it has a background sprite that is covering all areas.

 

If you want to keep the transparent areas but still want to use the plugin, you you could modify the plugin to paint the bitmap (on which the first state is rendered)in your backgroundcolor and then render the state to it. This way you also have no see-through-holes through which the new state is shown instantly.

 

I have modified the plugin here:

https://github.com/jpcloud/phaser-state-transition/blob/colortransitions/src/phaser-state-transition.js

 

BUT this is from phaser 1.x and it has not been modified to work with 2.0 (as xnamex version has) so it's just to give you an idea how to maybe approach it, if you want to modify the plugin.

(Now that I know more about phaser I think instead of using a graphics object I would try to do it with BitMapData..)

 

Thanks for the info jpdev, that explains everything!

[Mike]

Not clearly on topic but i saw the post dew days ago ... and i found this web page transitions demo:

 

http://tympanus.net/Development/PageTransitions/

 

And my thought was: it will be so cool if Phaser got those for scene transitions too

 

So I hope someone have the time and skill to implement them and extend the plugin... i'll be glad to try do it my self on first occasion. 

[Conqarous]

Sorry for my ignorance but how do you transition the position x, y (i.e. sliding down)?

Alpha, scale, angle work perfectly.

 

Awesome job on the plugin!

[ekeimaja]

How is this supposed to use with multiple states? I cannot get this working, all the time gives error "Uncaught TypeError: Cannot set property 'game' of undefined".