lucbloom Posted May 28, 2014 Share Posted May 28, 2014 I have a question about the tweening system in Phaser. If I perform a complex animation with multiple sprites (or a simple animation involving only 1 sprite but with scale and alpha) I have to write something like this: this.halo.scale = {x:0, y:0}; this.halo.alpha = 1; if (this.halo.scaleTween) { this.halo.scaleTween.stop(); } if (this.halo.alphaTween) { this.halo.alphaTween.stop(); this.halo.alphaTween = null; } this.halo.scaleTween = game.add.tween(this.halo.scale) this.halo.scaleTween .to({x:1, y:1}, 1000, Phaser.Easing.Bounce.Out) .start() .onComplete.addOnce(function() { this.halo.alphaTween = game.add.tween(this.halo).to({alpha:0}, 1000).start(); }, this);When I'd rather write something like this:game.stop.tween("halo bounce"); // No error if not foundgame.add.tween("halo bounce") .then(this.halo.scale, {x:1, y:1}, 1000, Phaser.Easing.Bounce.Out) .then(this.halo, {alpha:0}, 1000) .start();Is this sort of system possible at all? Am I using the existing Phaser API wrong?Additionally, in our C++ engine, we had an 'also' function as well. This would allow you to add new tweens in the dot chain, but they got added at the same point as the previous one:game.add.tween("game over") // The name is optional. Anonymous tweens are the default .then(1000) // Delay before starting .then(this.star, {alpha:1}, 100) .also(this.star.scale, {x:1, y:1}, 100) // This one runs ALONGSIDE the 'alpha' tween .then(function() { this.openScoreScreen(this.stats); }, this); // This one runs at the END of the 'scale' tweenIf this system looks exciting (I think it is, we've shipped a lot of triple-A casual games on all platforms (except HTML5) with it...) I would be happy to work together to add it to Phaser. Luc Bloom Link to comment Share on other sites More sharing options...
lewster32 Posted May 28, 2014 Share Posted May 28, 2014 You don't have to use Phaser's built-in tweening engine if you don't want to. Phaser has no complex update requirements, you simply change properties over time in most cases and things happen as expected. GSAP is an alternative that has a lot of very cool features including advanced tween timeline management. Link to comment Share on other sites More sharing options...
lucbloom Posted May 28, 2014 Author Share Posted May 28, 2014 Besides the necessarygame.tweens.stop("halo bounce");we can also have:game.tweens.finish("halo bounce");which would unroll all the tweens in the whole tween tree so that all objects are brought into the end phase instantly. Link to comment Share on other sites More sharing options...
lucbloom Posted May 28, 2014 Author Share Posted May 28, 2014 Thanks lewster32, I'm going to look into that one. Link to comment Share on other sites More sharing options...
lucbloom Posted May 28, 2014 Author Share Posted May 28, 2014 You don't have to use Phaser's built-in tweening engine if you don't want to. Phaser has no complex update requirements, you simply change properties over time in most cases and things happen as expected. GSAP is an alternative that has a lot of very cool features including advanced tween timeline management. That framework is really cool. I guess I had to get used to how loose JavaScript actually is, combining frameworks like that.Now my code is: if (!halo.timeline) { halo.timeline = new TimelineLite(); halo.timeline .to(halo.scale, 0, {x:0, y:0}) .to(halo, 0, {alpha:1}) .to(halo.scale, duration/1000, {x:scale, y:scale, ease:Bounce.easeOut}) .to(halo, duration*2/1000, {alpha:0}); } halo.timeline.restart();Finishing, reverting and cancelling is also in there, so yeah, exactly what I wanted.TimelineLite.prototype.finish = function(){ this.progress(1, false);} MichaelD and lewster32 2 Link to comment Share on other sites More sharing options...
mariogarranz Posted May 28, 2014 Share Posted May 28, 2014 How do you guys connect GSAP update loop with Phaser update loop?I see GSAP has a ticker object, but it looks like it would run in totally independent cycles from Phaser game loop. Link to comment Share on other sites More sharing options...
lewster32 Posted May 28, 2014 Share Posted May 28, 2014 GSAP uses requestAnimationFrame, just like Phaser. From my testing it appears to synchronise perfectly well and the animations are smooth and contain no hitches like you'd expect to see if they were out of phase. mariogarranz 1 Link to comment Share on other sites More sharing options...
mariogarranz Posted May 29, 2014 Share Posted May 29, 2014 GSAP uses requestAnimationFrame, just like Phaser. From my testing it appears to synchronise perfectly well and the animations are smooth and contain no hitches like you'd expect to see if they were out of phase. I would prefer having only one RAF for performance reasons.I will look into it then, thanks oliversb 1 Link to comment Share on other sites More sharing options...
lewster32 Posted May 29, 2014 Share Posted May 29, 2014 It's true that having two separate RAF callbacks isn't as optimal. I may attempt at some point to create a GSAP plugin which overrides GSAP's ticker to use Phaser's own. At the core of GSAP the ticker is pretty simple; it just dispatches a 'tick' event every frame, so in theory it shouldn't be difficult. oliversb and lucbloom 2 Link to comment Share on other sites More sharing options...
jvinhit Posted September 16, 2015 Share Posted September 16, 2015 That framework is really cool. I guess I had to get used to how loose JavaScript actually is, combining frameworks like that.Now my code is: if (!halo.timeline) { halo.timeline = new TimelineLite(); halo.timeline .to(halo.scale, 0, {x:0, y:0}) .to(halo, 0, {alpha:1}) .to(halo.scale, duration/1000, {x:scale, y:scale, ease:Bounce.easeOut}) .to(halo, duration*2/1000, {alpha:0}); } halo.timeline.restart();Finishing, reverting and cancelling is also in there, so yeah, exactly what I wanted.TimelineLite.prototype.finish = function(){ this.progress(1, false);}it's not working! pls!!! Link to comment Share on other sites More sharing options...
Recommended Posts