Phaser's Tweening syste does not meet my needs... I think.

[lucbloom]

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' tween

If 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

 

 

[lewster32]

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.

[lucbloom]

Besides the necessary

game.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.

[lucbloom]

Thanks lewster32, I'm going to look into that one.

[lucbloom]

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

[mariogarranz]

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.

[lewster32]

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]

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

[lewster32]

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.

[jvinhit]

 

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