Jump to content

phaser.js State transition plugin


xnamex
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...

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!

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

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..)

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 :D

 

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. 

Link to comment
Share on other sites

  • 1 year later...
  • 2 months later...
 Share

  • Recently Browsing   0 members

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