Bug with looping timeline and value increment

Phaser 3
1

Hello,

I tried to create a timeline that increments the x and y properties of an object and loops infinitely.
It works fine the first time but a problem comes after: the tweens keep using the initial position of the object as starting values.

So it makes something strange like:
Loop 1
x: 0 -> 100 / y: 0 -> 100
Loop 2
x: 0 -> 200 / y: 0 -> 200
Loop 3
x: 0 -> 300 / y: 0 -> 300
…

Here is an example that shows the problem: https://Phaserjs-Game-Starter.gyariab.repl.co
The source code is available here: https://repl.it/@GyariAb/Phaserjs-Game-Starter

The code of the timeline is:

var timeline = this.tweens.createTimeline();

timeline.add({
    targets: image,
    x: "+="+100,
    ease: 'Power1',
    duration: 1000
});

timeline.add({
    targets: image,
    y: "+="+100,
    ease: 'Power1',
    duration: 1000
});

timeline.loop = -1;
timeline.play();

Thanks

2

I think that’s probably the expected behavior. Try tweens/dynamic properties instead.

2 Likes
3

Actually maybe that’s a bug. :thinking:

4

I think so because it is not logical that the end values change but not the starting ones.

5

Idk the source seems pretty clear that loop, repeat, and yoyo don’t do that. :woman_shrugging:

Perhaps @rich knows.

6

I found a workaround that is to save all the tweens in an array (this.tweens here) and use a recursive function to recreate the timeline when it is finished:

public start(loop = false) {
    this.scene.tweens.timeline({
        tweens: this.tweens,
        yoyo: false,
        onComplete: () => {
            if (loop) {
                this.start(true);
            }
        }
    });
}

But I think it’s a bit ugly.