Sign in to follow this  
lucbloom

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

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

 

 

Share this post


Link to post
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.

Share this post


Link to post
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);}

Share this post


Link to post
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 :)

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.