TweenManager2.createTimeline to tweens.chain()

Phaser 3
1

Hello guys,

I have upgraded Phaser into v3.60 and now I run into an issue. I had a script working fine with TweenManager.createTimeline() but now it is depreciated to be replaced with chain(). I struggle into updating this code :

        let timeline = this.tweens.createTimeline({
            callbackScope: this,
            onComplete: function() {
                // When all the animations are done, we delete all the gems
                for(let m = 0; m < this.matchedGems.length; m++) {
                    for(let g = 0; g < this.matchedGems[m].length; g++) {
                        let gem = this.matchedGems[m][g];

                        this.gameArray[gem.x][gem.y].gem.sprite.destroy();
                        this.gameArray[gem.x][gem.y].isEmpty = true;
                        this.gameArray[gem.x][gem.y].gem = null;
                    }
                }

                this.matchedGems = []; 

                // After all the matched gems are gone, we make all the gems already in the field fall then replenish the field where there is hole.
                this.makeGemsFall().replenishField();
            },
        })

        for(let m = 0; m < this.matchedGems.length; m++) {
            // We create a new array populated with only the sprites of the gems to animate it.
            sprites = this.matchedGems[m].map((gem) => gem.sprite);

            timeline.add({
                targets: sprites,
                alpha: 0.1,
                duration: this.destroySpeed,
                callbackScope: this,
            })
        }    

        this.timeline.play();

Can someone help me with this ?

The core idea of this script is :

  • create a timeline with an onComplete function (code that has to be run only when the timeline has finished playing)
  • there is a variable amount of tweens to generate, each with a variable number of sprites.
  • add these variable number of tweens to the timeline.

Thank you for your help :slight_smile:

2

:wave:

v3.60 tween chains are different from v3.55 tween timelines: they play only one tween at a time. So I don’t think you want to use a tween chain here.

Since all the tweens are the same duration, I think you can use just one tween.

const sprites =  this.matchedGems.flat().map((gem) => gem.sprite);

this.tweens.add({
    targets: sprites, // etc.
});