Jump to content

Fading between states


grumpygamer
 Share

Recommended Posts

Hello again,

I've looked around in the forum for a similar topic and found a couple of different answers.

 

The question is:

 

I end/exit a state and need to switch to another one.

 

For example I choose an item in the main menu and select it (i.e. "New Game")

now that screen should disappear maybe fading out.

 

I have tried one approach that is loading a black image for last so it ends up on the top and setting it's alpha to zero, but during preload you can see the black background load and then disappear which kind of sucks;

 

Another way people seem to do it is set alpha of the state to zero and then switch; this doesn't seem right to me because if I want to use a different kind of transition I would be unable to apply it this way.

 

What is the correct way to do this?

 

On a side note I think there should be a way to handle "z-indexes" so to speak.

 

Thanks of any answers that might come.

Link to comment
Share on other sites

That post evolves to this github plugin:

https://github.com/aaccurso/phaser-state-transition-plugin

is that the one you're pointing to?

 

I had a look at that demo (Demo), but all the transitions scale outwards and fade, so I am left wondering if that's the only transition available.

Not too sure at the moment.

 

How about Z ordering objects: is that at all possible?

Link to comment
Share on other sites

Of course it's not the only transition possible in this plugin !

look at the beggining, we have

 this.settings = {      duration: Phaser.Timer.SECOND * 0.3,      ease: Phaser.Easing.Exponential.InOut,      properties: {        alpha: 0      }    };

And there you can chose what you want as a transition.

(Amazing plugin btw)

Link to comment
Share on other sites

  • 4 weeks later...

It is an excellent and simple plugin that I use in all of my phaser-based projects.

 

Understandably it does have a few limitations:

  1. It allows you to customize how you animate the current state away. It does not animate the new state in. 
  2. It allows you to define 1 transition.
Link to comment
Share on other sites

 

It is an excellent and simple plugin that I use in all of my phaser-based projects.

 

Understandably it does have a few limitations:

  1. It allows you to customize how you animate the current state away. It does not animate the new state in. 
  2. It allows you to define 1 transition.

 

 

Regarding point #2, that is true but there is no reason you can't override the settings before each transition. In some cases, a game may need only one global setting for the transition. In other cases, you might want to call game.stateTransition.configure() before each call to game.stateTransition.to().

 

For example:

//expand outwardthis.game.stateTransition.configure({	duration: Phaser.Timer.SECOND * 1.0,	ease: Phaser.Easing.Exponential.InOut,	properties: {		alpha: 0,		scale: {			x: 1.4,			y: 1.4		}	}});this.game.stateTransition.to('state1');....and then in a different state...//shrink inwardthis.game.stateTransition.configure({	duration: Phaser.Timer.SECOND * 1.0,	ease: Phaser.Easing.Exponential.OutIn,	properties: {		alpha: 0,		scale: {			x: 0.4,			y: 0.4		}	}});this.game.stateTransition.to('state2');
Link to comment
Share on other sites

  • 1 year later...
 Share

  • Recently Browsing   0 members

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