Jump to content

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


lucbloom
 Share

Recommended Posts

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
logo.png

 

 

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

 

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

 Share

  • Recently Browsing   0 members

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