Cancel TweenChain with .stop() doesn't remove it?

Phaser 3
1

I’m working on a game which shows a short tutorial animation when the player doesn’t do anything. The animation is a TweenChain which moves a cursor around to draw the player’s attention to various things on screen. The animation also has loop:2 so it plays 3 times in total.

        this._tutor_point = this.tweens.chain({
            targets: this._tutor_spr,
            tweens: list_of_tweens,
            loop: 2,
            delay: 5000,
            repeatDelay: 8000
            //..etc.
        });

The TweenChain is started with a delay:5000 so it only starts after 5 seconds of player inaction. When the player does do something, the tutorial animation is stopped and it is not needed anymore so it can be completely removed from the scene.

    onAnyPlayerAction()
    {
        // cancel tutorial animation
        if (this._tutor_point) {
            this._tutor_point).stop(); // ok this stops the animation
            //this._twhand.destroy(); // doesn't help
            //this._twhand.remove(); // error
        }
    }

After the .stop() the animation stops so that works fine, visually it all works and the tutorial is stopped. However, I noticed in the debugger that the this._tutor_point remains valid in the scene. So the if () evaluates to true and it keeps stopping the animation on every player action, instead of just stopping at only the first player action as intended.

How can I completely destroy the animation, or check that it has already been stopped?

2

It’s fine to do

this._tutor_point.stop();
this._tutor_point = null;

You could also do

this._tutor_point = this.tweens.chain({
  // …
  onComplete: () => { this._tutor_point = null; },
  onStop: () => { this._tutor_point = null; }
});

You can also check this._tutor_point.isPlaying() and similar methods, but those can get a little complicated because tweens and chains go through a lot of states (finished, pending remove, removed), sometimes only briefly.