How to remove delay when changing the game state ?

[delta9]

 Here is a blank template for my game. 

As you can see - the transition between the states of the game begins with the shutters 

 

Theoretically, after the divergence of shutters next screen should appear IMMEDIATELY!

But change screens is delayed.

How to remove this delay?

 

source code -  http://pastebin.com/vHN6jcY4

[lewster32]

You're firing the state change at the end of tweenB, which is when the shutters finish opening again. What you need to do is fire it inside the topOut onComplete event, then start the next scene with the shutters already in the closed position, and tween them open.

[delta9]

You're firing the state change at the end of tweenB, which is when the shutters finish opening again. What you need to do is fire it inside the topOut onComplete event, then start the next scene with the shutters already in the closed position, and tween them open.

 

I have tried to do so. but when I place the shutter closed, they instantly overlap by  background of the current state 

 

where should I place the code that pushes out the shutters? in "preload" function? or "init"

[lewster32]

You should be doing any setup in either preload or create - init will be too early. I'd recommend setting the shutters to closed in the 'preload' function of the next state, then tween them open in the 'create' function. This will keep the shutters closed until the state has loaded, then it will open them.

[delta9]

You should be doing any setup in either preload or create - init will be too early. I'd recommend setting the shutters to closed in the 'preload' function of the next state, then tween them open in the 'create' function. This will keep the shutters closed until the state has loaded, then it will open them.

 

I followed your advice. Here is the result, and the source code here (l.44)

 

the result is negative -  these shutters  not visible.

 

 

Workaround: not quite what I need, but ... :

create: function () {topOpen = this.add.tween(this.splashTop).to({x:-200, y:-200}, 1400, Phaser.Easing.Linear.None, true);bottomOpen = this.add.tween(this.splashBottom).to({x:this.world.x+280, y:this.world.y+280}, 1400, Phaser.Easing.Linear.None, true);bottomOpen.onComplete.add(function(){  this.add.sprite(0, 0, 'mainMenuBack');  this.mainPlayButton = this.add.button(this.game.world.centerX-100, this.game.world.centerY, 'mainPlayButton', this.startPlay, this, 0, 1, 0);  this.mainPlayButton.inputEnabled = true;  this.mainPlayButton.input.useHandCursor = true;}, this);}

[lewster32]

It seems to be working fine after the first state, but the subsequent states seem to have the onComplete callbacks in the wrong place? The source code you've provided is incomplete but what's there seems to be correct?