phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.16k stars 7.1k forks source link

Timeline.destroy() fix #6812

Closed monteiz closed 5 months ago

monteiz commented 6 months ago

This PR

When destroying a Timeline that has Tweens in it, the tweens were not destroyed, but they kept going. This PR fixes the issue.

I suspect that also Timeline's reset, pause and clear methods need an adjustment on this matter.

Test code (to be pasted into a Phaser example):


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.atlas('timeline', 'assets/atlas/timeline.png', 'assets/atlas/timeline.json');
        this.load.image('bg', 'assets/skies/spookysky.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        this.thread = this.add.graphics();

        this.spider = this.add.sprite(400, -100, 'timeline', 'spider');

        const timeline = this.add.timeline([
            {
                at: 2000,
                tween: {
                    targets: this.spider,
                    y: 400,
                    ease: 'bounce.out',
                    duration: 1500,
                    onComplete: () => {
                        console.log("Tween completed");
                    }
                }
            },
            {
                at: 4000,
                tween: {
                    targets: this.spider,
                    x: 200,
                    angle: 30,
                    ease: 'sine.out',
                    duration: 1000,
                    yoyo: true,
                    repeat: -1,
                    repeatDelay: 2000
                }
            },
            {
                at: 6000,
                tween: {
                    targets: this.spider,
                    x: 600,
                    angle: -30,
                    ease: 'sine.out',
                    duration: 1000,
                    yoyo: true,
                    repeat: -1,
                    repeatDelay: 2000
                }
            }
        ]);

        timeline.play();

        this.time.delayedCall(2500, () => {
            timeline.destroy();
            console.log("Timeline destroyed");
        })
    }

    update ()
    {
        this.thread.clear();
        this.thread.lineStyle(1, 0xffffff, 0.7);
        this.thread.lineBetween(400, 0, this.spider.x, this.spider.y);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);
photonstorm commented 5 months ago

Thanks for this. I can't merge your PR directly, but I have fixed this issue in a different way and credited you in the Change Log.