lucbloom 3 Posted May 28, 2014 Report 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 Quote Link to post Share on other sites
Solution lewster32 616 Posted May 28, 2014 Solution Report 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. Quote Link to post Share on other sites
lucbloom 3 Posted May 28, 2014 Author Report 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. Quote Link to post Share on other sites
lucbloom 3 Posted May 28, 2014 Author Report Share Posted May 28, 2014 Thanks lewster32, I'm going to look into that one. Quote Link to post Share on other sites
lucbloom 3 Posted May 28, 2014 Author Report 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);} lewster32 and MichaelD 2 Quote Link to post Share on other sites
mariogarranz 13 Posted May 28, 2014 Report 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. Quote Link to post Share on other sites
lewster32 616 Posted May 28, 2014 Report 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 Quote Link to post Share on other sites
mariogarranz 13 Posted May 29, 2014 Report 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 Quote Link to post Share on other sites
lewster32 616 Posted May 29, 2014 Report 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 Quote Link to post Share on other sites
jvinhit 1 Posted September 16, 2015 Report 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!!! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.