Jump to content

created tween is sometimes hidden - only the result is shown


Recommended Posts

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 


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);    }}
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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?




?? 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 ?  

Link to comment
Share on other sites

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)



Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ;-)

Link to comment
Share on other sites


  • Recently Browsing   0 members

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