Chaining multiple tweens

Phaser 3
1

It is possible to chain multiple tween in phaser?

I use a async function in my code, but I would like to know if there is a phaser way of doing it?

Something like the code below would be useful. Each one of these 3 tweens would run after the onComplete callback was called.

this.scene.tweens
 .add({ ...config1})
 .add({ ...config2})
 .add({ ...config3})
2

https://labs.phaser.io/edit.html?src=src/tweens\timelines\create%20timeline.js

1 Like
3

Thanks @samme

Helps to know that there is a createTimeline() method on the tweens.

But unfortunately if I want to chain tweens, then some custom functions, then a tween again and another custom function, I run into callback hell.

I think the cleanest way in my case, was to stick with async/await:

  private async startTween() {
    await this.tweensAsync({
      targets: this,
      scaleX: 1.5,
      scaleY: 1.5,
      yoyo: true,
      delay: 500,
      duration: 200,
      onComplete: () => console.log('tween 1 completed')
    })

    await this.tweensAsync({
      targets: this,
      y: 10,
      scaleX: 0.5,
      scaleY: 0.5,
      ease: 'Sine.easeInOut',
      delay: 500,
      duration: 400,
      onComplete: () => console.log('tween 2 completed')
    })

    this.setFontSize(28)
    this.setScale(1)

    await this.tweensAsync({
      targets: this,
      alpha: 0,
      delay: 2000,
      duration: 400,
      onComplete: () => console.log('tween 3 completed')
    })

    this.destroy()
  }

Here is my code.

3 Likes
4

Here, is a better way, to do this.
Phaser 3 Example

5

In Phaser v3.60, tween chains have replaced tween timelines.

2 Likes