valueerror Posted November 10, 2014 Share Posted November 10, 2014 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); }} Link to comment Share on other sites More sharing options...
rich Posted November 10, 2014 Share Posted November 10, 2014 I assume this is 2.2 RC1, yes? Link to comment Share on other sites More sharing options...
valueerror Posted November 11, 2014 Author Share Posted November 11, 2014 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 More sharing options...
rich Posted November 11, 2014 Share Posted November 11, 2014 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 switchingTextures are still being uploaded to the GPUGeneral garbage collection / JIT compilation issues One of those you can capture, the other two you cannot. Link to comment Share on other sites More sharing options...
valueerror Posted November 11, 2014 Author Share Posted November 11, 2014 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 More sharing options...
valueerror Posted November 11, 2014 Author Share Posted November 11, 2014 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? Link to comment Share on other sites More sharing options...
valueerror Posted November 11, 2014 Author Share Posted November 11, 2014 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 ? Link to comment Share on other sites More sharing options...
rich Posted November 11, 2014 Share Posted November 11, 2014 You've lost me in how this is actually flowing now. Link to comment Share on other sites More sharing options...
valueerror Posted November 11, 2014 Author Share Posted November 11, 2014 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 thiscreate: 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 More sharing options...
rich Posted November 12, 2014 Share Posted November 12, 2014 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. Link to comment Share on other sites More sharing options...
rich Posted November 12, 2014 Share Posted November 12, 2014 Ok RC5 is up, please test against that if you can - thank you. Link to comment Share on other sites More sharing options...
valueerror Posted November 13, 2014 Author Share Posted November 13, 2014 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 More sharing options...
InsaneHero Posted November 15, 2014 Share Posted November 15, 2014 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 More sharing options...
valueerror Posted November 16, 2014 Author Share Posted November 16, 2014 well.. i gave it a try.. 1000ms : tween not shown - only final state of the tween2000ms : 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 More sharing options...
InsaneHero Posted November 16, 2014 Share Posted November 16, 2014 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! Link to comment Share on other sites More sharing options...
Recommended Posts