Phaser 2.1.3 and State Transition Plugin

[yougotashovel]

@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

[efusien]

@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 = this.game.state.states[state].init;// Extend state init method to add coverthis.game.state.states[state].init = function() {	if (_init) {		_init.call(_this.game.state.states[state]);	}	// Add the cover to avoid flickering effect	this.game.state.states[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 Phaser.Plugin.StateTransition.prototype.to function.

See the code below:

_create = this.game.state.states[state].create;// Extend state create method to animate coverthis.game.state.states[state].create = function() {	if (_create) {		_create.call(_this.game.state.states[state]);	}	// Bring the cover on top of state children	this.game.state.states[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: this.game.state.states[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 :-)

[efusien]

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, game.world.centerX, game.world.centerY, 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	}}

[xnamex]

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?

 

Thanks!

[MichaelD]

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.

[aaccurso]

Thanks @efusien, I'll fix and improve those things you mentioned.

[Olle]

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.

[beuleal]

I cant use more than 1 trasition effects!

[efusien]

@beuleal Check if you are using the property fixedToCamera. It's blocking some usual transitions.

See my post 17 February 2015 - 07:07 PM

 

 

[aaccurso]

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

 

@xnamex I have a proposal. I'm actively maintaining a fork of your plugin: https://github.com/aaccurso/phaser-state-transition-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?

 

Cheers!

[beuleal]

@aacurso

 

Did u fixed the multiple transitions effects?

[aaccurso]

Hi, I guess so, you are welcome to try it and post an issue in the github repo if you find anything unusual.