created tween is sometimes hidden - only the result is shown

[valueerror]

i use the following code to create a transition between two states:

i use the function 

 

fadeOut('level1');  for example to switch to level 1

# first i create a texture out of the current game.world (what you see in the camera right now)

# then i create a sprite out of this texture

 

then the state is loaded and the first thing i do is 

game.add.existing(cover);

to make sure it's there (and it is .. always!)

and at the end of the create function i call 

 

fadeIn();  to bring the covor to top and tween it to fade away..    (after that i destroy it)

 

the tween1 and tween2 are always shown on desktop computers .. the code works very well 

 

but on mobile devices it is almost never shown on the first time..

(if i switch states a lot it works smooth for states i already loaded )

function fadeOut(target){    texture = new PIXI.RenderTexture(game.width, game.height, game.renderer);    texture.render(game.world);    cover = new Phaser.Sprite(game, 0, 0, texture);    game.state.start(''+target+''); }function fadeIn() {    cover.bringToTop();    game.paused = false;    tween1 = this.game.add.tween(cover).to({alpha: 0},  1000,Phaser.Easing.Exponential.InOut, true);    tween2 = this.game.add.tween(cover.scale).to({ x: 1.5,  y: 1.5 },  1000,Phaser.Easing.Exponential.InOut, true);    tween2.onComplete.addOnce(destroyCover, this);}function destroyCover() {    cover&&cover.destroy();    cover = null;    texture&&texture.destroy();    texture = null;    if (level != 'menu'&&level != 'finish' ){        // entry tween to get the attention of the zoom button on level start        tweenx1 = game.add.tween(switchfocusbutton.scale).to({ x : 1.4,y:1.4 }, 200, Phaser.Easing.Linear.None, true,0,5,true);        tweenx2 = game.add.tween(icon_zoom.scale        ).to({ x : 1.4,y:1.4 }, 200, Phaser.Easing.Linear.None, true,0,5,true);    }}

[rich]

I assume this is 2.2 RC1, yes?

[valueerror]

Yes it is.. But i believe i wittnesed this behaviour on the latest 2.1 build to..

I could also use a much simpler setup like setting world alpha to 0 in the first line and then try to fade in for 1000 ms in the last line of the create function .. At least when its the first state after the boot state I can definitely say that it will not fade but switch to alpha 1 on my mobile device (nexus7) (and not in a nice way.. It flickers somehow)

Is there a way to make absolutely sure the state has finished loading before triggering the tween or do you have another idea on how to get this to work like it does on desktops?

[rich]

There are only a few things that would cause a State slow down like this on swap:

 

• Audio is still decoding from a previous State that didn't wait until the decoding was over before switching
• Textures are still being uploaded to the GPU
• General garbage collection / JIT compilation issues

 

One of those you can capture, the other two you cannot.

[valueerror]

so i removed all audio from my game to test and still..  the first tween i start does not show..  OR is played way to fast..   

 

the final tween state is always reached and the onComplete event is triggerd properly but the tween itself (the animation) is not there..   on the second time i enter the same state it works as expected.

 

if textures were still loading to the gpu - there must be a way to wait with the tween until everything has been loaded..  

 

 

 

 

 

i'm going to play around with this a little bit longer ..  any idea on how to make it work an mobile would be very much appreciated.

 

edit:  is it possible to work with game.paused in a way to make it work? or just start the tween as first thing in the update loop once?

edit2:  i just started the tween in the update loop and it also doesn't show on the first time

[valueerror]

i now created a timeout of 1000ms   and started the tween after this timeout..  (a no-go for me but i just wanted to see if it would work)

the tween shows up everytime..  

 

there has to be a way to exactly define the point where is can start my game..  please?

[valueerror]

actually...   it seems that a timeout of 10ms is sufficient to make the tweens work..   i could live with that    any opinions on this approach?

 

 

edit:

?? a timeout of 0 also works ?? 

game.time.events.add(0, fadeIn);

 seems like game.time.events are not triggered before everything is in place ?  

[rich]

You've lost me in how this is actually flowing now.

[valueerror]

haha.. i can understand that.. thx for trying to follow me  

 

in short ^^  (as short as possible):

 

i have a button that starts a specific state by calling the fadeOut() function:

function fadeOut(target){    texture = new PIXI.RenderTexture(game.width, game.height, game.renderer);    matrix = new PIXI.Matrix();    matrix.translate(-game.camera.x, -game.camera.y);    texture.render(game.world, matrix);    cover = new Phaser.Sprite(game, 0, 0, texture);    game.state.start(''+target+''); }

this creates the cover sprite.. the next state looks like this

create: function () {            game.add.existing(cover);     // add the cover for the transition effect as early as possible            //  other stuff here            cover.bringToTop();    // make sure it 'covers' everything            fadeIn(); }

it calls fadeIn() at the end of it's create method:

function fadeIn() {    tween1 = this.game.add.tween(cover).to({alpha: 0},  1000,Phaser.Easing.Exponential.InOut, true);    tween2 = this.game.add.tween(cover.scale).to({ x: 1.5,  y: 1.5 },  1000,Phaser.Easing.Exponential.InOut, true);    tween2.onComplete.addOnce(destroyCover, this);  // destroy cover just destroys the sprite}

 

it looks like fadeIn() is called at a time where (at least on mobile) the state creation has not finished yet and the ongoing creation of the state somehow blocks tweening the cover away (to alpha:0)

the result:  cover has alpha 0 and is beeing destroyed properly but the fading away is not seen..

 

if i trigger fadeIn() with a timeout function 

game.time.events.add(0, fadeIn);

the problem seems to be gone - it looks like it is waiting for the state creation to be finished now (but i have to test further with a compiled version of my app and i have only one device to test right now)

 

 

 

 

 

[rich]

Thanks for this. Leave it with us, we're looking into it. However could I ask if you get time to check the latest dev branch (updated as of 2mins go) - you'd need to build Phaser though, or just wait until later tonight when I'll build RC5.

[rich]

Ok RC5 is up, please test against that if you can - thank you.

[valueerror]

thx rich

 

just found some time to try the latest build ..

 

the tween is still not there..  it jumps form alpha=1 to alpha=0, runs the onComplete function and thats it..  if i go back to the menu immediately and start the same level again the tween can be seen..  not very smooth though..  the third time it's smooth

 

if i start fadeIn() with this line:

game.time.events.add(0, fadeIn); 

it works perfectly!  the tween waits for the level to load (sometimes longer sometimes shorter depending on the size of the level) and then starts and fades out the cover smoothly

 

 

even if it doesn't make sense to me i'm happy for now that it works with this workaround.

if i can help somehow - do specific tests or something similar..  just tell me

[InsaneHero]

Hi valueerror, sorry to take so long to jump in here... Rich mentioned the thread but I've been having a "lazy weekend"

 

Can you try your code (without the event) using a longer tween time (try 5 seconds, and if that's the same 30 seconds) and let me know what you see?  I'm curious if the tween is skipping, playing early, or being delayed but realising that the time has passed so when it starts it jumps all the way to the end.

 

The changes to Phaser time and updates included my decision to put tweening update into the updateRender function instead of the updateLogic branch.  My reasoning is that the updateRender can tick along moving tweens smoothly even when the updateLogic is lagging or skipping frames.  However it's possible that this move has messed up some hidden dependency between tweening and the timer.  Of course that's very hard to track without a specific example, and yours is the best one I've heard of.

 

Thanks for being patient while we sort this out!  It's great that you found a work-around in the mean-time.

[valueerror]

well.. i gave it a try..

 

1000ms : tween not shown - only final state of the tween

2000ms : tween shows up after ~1000ms but starts somewhere in the middle.. so the first 1000ms are actually taken into account as if the tween was already going on but just not visible - tween finishes smoothly 

5000ms : slooooow but tween is shown from the beginning.. looks good to me

 

sticking to the workaround for now ;-)

[InsaneHero]

Thanks for doing that.

The first two results are what I was expecting, third one (5 seconds) is not.  I'd expect it to skip the first 1 second of the tween there too (if it is related to what I originally thought).

I'll keep digging!