Jump to content

Choppy chained tweens - seamless tween trasitioning


Recommended Posts

So I have a bit of a problem and its a relatively simply one. 

Suppose I have a series of chained tweens. After each tween completes, the next one in the chain is fired, like this:


This works great, except you can see there is some choppiness. If you look closely at the example, you can see the sprite stops for a split second after each tween. I think this caused by there being some small increment of time between each chain. Tween 1 fires, completes, 10 milliseconds pass, then tween 2 fires, completes, 10 milliseconds pass. You get the point. I want to get rid of that 10 milliseconds, so there transitions are seamless. 

It doesn't necessarily have to be with chained tweens. I just used chained tweens to make the case simpler. The actual code i'm trying to acheive is movement with a quick succession of teens. The sprite moves from point A to point B with a tween, and then another tween moves it somewhere else. Well, that works great except the movement isn't seemless because of that slight delay in between tweens (wether they are chained or fired one after another manually using the tween on complete event). 



Link to comment
Share on other sites

I wouldn't use chain in this case. Just append .to method to the tween with a helper function. 


function create() {
    game.renderer.renderSession.roundPixels = true;

    var sprite = game.add.sprite(0, 0, 'phaser');

    tweenA = game.add.tween(sprite);
    move(tweenA, 50);
    move(tweenA, 100);
    move(tweenA, 150);
    move(tweenA, 200);
    move(tweenA, 250);
    move(tweenA, 300);

function move(tween, newX){
    tween.to({ x: newX}, 500);


Link to comment
Share on other sites

The tween manager doesn't do an update when between chains.  Try this


Phaser.TweenManager.prototype.update = function () {

    var addTweens = this._add.length;
    var numTweens = this._tweens.length;

    if (numTweens === 0 && addTweens === 0)
        return false;

    var i = 0;

    while (i < numTweens)
        if (this._tweens[i].update(this.game.time.time))
            this._tweens.splice(i, 1);


    addTweens = this._add.length; // stumod, process all new tweens now

    //  If there are any new tweens to be added, do so now - otherwise they can be spliced out of the array before ever running
    if (addTweens > 0)
        this._tweens = this._tweens.concat(this._add);
        this._add.length = 0;

    return true;



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

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.


  • Recently Browsing   0 members

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