How to update the "to" property of tween dynamically?

Phaser 3
1

Hi guys,
I am trying to update the to property of tween.I tried updateTo(), but its not working.
Any Idea guys.I saw an example in phaser 2, hope there will be something for phaser 3 also.

Basically i have to the change the end value , in the midst of the tween
Thanks.

2

So i found a solution for my problem, I stopped the running tween and start a new tween where from value will be the t_tween.getValue() of stopped tween and to value will be the new updated value i need and duration will be t_tween.totalDuration - t_tween.totalElapsed, where t_tween is stopped tween. This solves my problem. But wish to see a native solution.
Thanks.

1 Like
3

I’ve been struggling with this too for the last 3 days, and I’ve come to an answer, I think. But I’d love confirmation on a couple of things if any of you know better than me:

  • updateTo() doesn’t work for finished tweens (Is it a bug or the intended behavior? Please tell if you know).
  • To make it work in our scenario (reusing already finished tweens) we have to restart the tween and then use updateTo() on the next frame
  • Is there a better option for reusing tweens?

Now, here is what I did:
I wanted a way to reuse tweens, because in my game I make heavy use of them, but repeating on the same targets and properties with different values. So when I saw updateTo() on the docs I was very happy. But it doesn’t work the way I expected, It seems to work only if the tween is playing.

Here is the relevant part of my code:

var nextAngleChangeTime = 3000;
var curAngle = 0;

//...

function create(){
    //...
    direction = { angle: curAngle };
    directionTween = scn.tweens.add({
        targets: dirObj,
        angle: curAngle,
        duration: 2000,
        repeat: 0,
    });

}

function update(time, delta) {
    if (time > nextAngleChangeTime) {
        nextAngleChangeTime = time + 3000;
        curAngle += Math.PI/2 - Math.random()*Math.PI;

        directionTween.updateTo('angle', curAngle, true);
        directionTween.restart();
        console.log('New target Angle:', curAngle);
    }
    console.log('tweened angle:', direction.angle);
    //...
}

But this didn’t work at all. The curAngle changed every 3 seconds, but the direction.angle remained as at the end of the first 2 seconds tween.

The I realized the example on the labs was acting on a tween only while it was playing. And decided to give it a try. So instead of calling updateTo and then restarting the tween I did the oposite. I restarted the tween and then updated the end value just once (in my case it is going to be the same during the whole tween duration)

function update(time, delta) {
    if (time > nextAngleChangeTime) {
        nextAngleChangeTime = time + 3000;
        curAngle += Math.PI/2 - Math.random()*Math.PI;

        //directionTween.updateTo('angle', curAngle, true);
        directionTween.restart();
        console.log('New target Angle:', curAngle);
    }
    if(curAngle !== direction.angle) {
        directionTween.updateTo('angle', curAngle, true);
    }
    console.log('tweened angle:', direction.angle);
    //...
}

This worked nicely.
Notice that I update the value on the next frame after restarting the tween. If I do it on the same one it doesn’t work, who knows why? (Not a rhetoric question :wink: )

I don’t like the contrived solution much, but I need to randomly and smoothly change the angle of the movement every few seconds and I think this is much better than destroying the old tween and creating a new one, specially when I have a lot of sprites with this behavior on the screen.