Jump to content

Choppy chained tweens - seamless tween trasitioning


ForgeableSum
 Share

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:

https://phaser.io/sandbox/edit/AXvVUVzn

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);
    
    tweenA.start();
}

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))
        {
            i++;
        }
        else
        {
            this._tweens.splice(i, 1);

            numTweens--;
        }
    }

    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

 Share

  • Recently Browsing   0 members

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