Phaser 2.1.3 and State Transition Plugin

Recommended Posts

@aaccurso  Glad to see this plugin added to bower.


Whenever i call a transition, it works. But it does the following:

  1. The screen goes blank for 500ms-2s
  2. Then what i assume is the sprite of the current state re-appears
  3. Then the transition takes effect.

I have different states preloading different assets, and i think the delay in point 1. might be the time it takes to load these assets.

Any idea why this is happening, or how to fix it? Thanks

Share this post

Link to post
Share on other sites

@yougotashovel You can add the cover sprite to the game inside the init() function to avoid flickering effect.


Something like the code below can do the job:

_init =[state].init;// Extend state init method to add[state].init = function() {	if (_init) {[state]);	}	// Add the cover to avoid flickering effect[state].world.add(_this._cover);};

By the way, @aaccurso I found a bug in the plugin script.


The current state create function is redefined inside the function.

See the code below:

_create =[state].create;// Extend state create method to animate[state].create = function() {	if (_create) {[state]);	}	// Bring the cover on top of state children[state].world.bringToTop(_this._cover);	_this._animateCover();};

So, each time we start the state with the plugin (calling the transition plugin to function), the current state create function is redefined in a recursive way :-(


A quick workaround is to save the create function the first time we use the plugin, and use this save to call it.



Set a private var at the top of the plugin:

var _originalFunctions = {};

And save each state "create" function, only if not already defined:

_originalFunctions[state] = _originalFunctions[state] || {	create:[state].create};

Then use it like:

var _create = _originalFunctions[state].create;

This workaround works, but it's quite uggly.

Maybe someone has a better way to do the job :-)

Share this post

Link to post
Share on other sites

As a plus, I don't recommand to use the property fixedToCamera.


Instead, center the cover on the world, and use anchor to 0.5

this._cover = new Phaser.Sprite(game,,, texture);this._cover.anchor.setTo(0.5);

This allow us to move the cover sprite for beautiful transition effects.

IE: screen falling down:

duration: 550,ease: Phaser.Easing.Bounce.Out,properties: {	anchor: {		y: -0.5	}}

Share this post

Link to post
Share on other sites

Hey guys, I'm the author of the plugin.


First of all, sorry for all the issues and that I couldn't take care of them. It's not my day-to-day job, not even working with PIXI and Phaser, and this was built to help out the community at the beginning of Phaser. Seeing all the attention, made me come back to it, and fix everything that was not working.


Can one of you give me a brief summary of what's going on? Is this still a problem?



Share this post

Link to post
Share on other sites

Thanks for looking into this again. Have you implemented anything of what the users above suggested, or do you want a recap of what is breaking?


In terms of speeding things up, some user who has a working or close-to-working solution should file a pull request so you could start from an advanced state and not from scratch.

Share this post

Link to post
Share on other sites

I still have the problem of some (not all) graphic elements flipping vertically (upside down) during transition. It seem to be limited to phaser graphic objects.

Im using aaccurso's updated version.

Share this post

Link to post
Share on other sites

Hi everyone, I just fixed the issues @efusien mentioned!


@xnamex I have a proposal. I'm actively maintaining a fork of your plugin:


I've fixed most issues people have found. Me and a coworker have added some refactors and features for our own apps.


This updated version is published in bower and npm for better dependency management of our projects.

We have a Gruntfile.js for usual tasks such as build, minify and bump.

Also I've created a gh-pages branch based on your demo project so people can get the idea of what the plugin does in realtime.


So what I propose is to deprecate the old repo and continue maintainance of the new repo. I'm happy to add you as the author or something else you think appropiate. What do you say?



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.