Phaser: onStart event in a tween within a looped timeline is called just once

[monteiz]

Version

• Phaser Version: 3.22.0
  
• Operating system: macOS Mojave 10.14.6
  
• Browser: Chrome Version 84.0.4147.89 (Official Build) (64-bit)

Description

The onStart event of a tween added to a looped timeline fires only once. On the other hand, the onComplete event of the same tween is fired every time the timeline loops.

Example Test Code

https://codepen.io/monteiz/pen/ExaqVmx

Additional Information

[halilcakar]

Hello @monteiz,
I was looking into your problem on timeline and tweens.

So here is what i came up with:

Tweens when created, they have state of hasStarted and isSeeking false by default.
And when it's started it's looking for these flags to call onStart callback. Here you can see it's checking these values and if it fits, calls the onStart function.

I'm really not sure if this is the actual behaviour altho it seems like it is 😄.

Anyways, you may use this solution for your problem.

const timeline = this.tweens.timeline();
timeline.add({
    targets: image1,
    alpha: 0,
    duration: 1000,
    onComplete: (tween) => {
        tween.hasStarted = false;
        console.log('onComplete');
    },
    onStart: () => { console.log('onStart'); },
});
timeline.loop = -1;
timeline.play();

Edit:

I've just wondered and would like to ask @photonstorm if it's possible to add a resetOnComplete boolean to tweens that when it's set to true, call every event specified?

[monteiz]

Hello @halilcakar,
thanks for looking into this problem and nice shot from you!

I was tempted to use the very same workaround for my code, but since the hasStarted property is marked as readonly in the documentation, I fear that it could give troubles with next Phaser releases, something I want to avoid (even if looking at the code, it looks quite safe, but more on this later).

So for my problem I have eventually used a different approach (using time.delayedCall and calling a function at the end of every execution).

Regarding the code itself, my opinion is that it would be great to have a RESTART event (and a onRestart callback) fired in the restart function and when the tween is reset from a timeline iteration (here). Something like:

if (resetFromTimeline) {
    this.dispatchTweenEvent(Events.TWEEN_RESTART, this.callbacks.onRestart);
}

This way the developer can discriminate between an onStart, when the tween is started for the first time, and a onRestart, when the tween is restarted by a timeline iteration (or directly, through the Tween.restart function).
This approach would also preserve the backward compatibility, since it would not touch the preexisting hasStarted variable.
I also feel that changing the hasStarted to false at some point in the code would be semantically incorrect, since the tween has effectively _started_: the contrary would be false.

If @photonstorm agrees with that, I can create a pull request implementing this little new feature.

In any case, thanks @halilcakar and happy coding with this awesome framework! 🚀