phaser3學習筆記：tween

示例代碼素材 後續提供

import Phaser from 'phaser'

class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' })
  }

  preload() {
    this.load.image('block', 'assets/example/tween/block.png')
  }

  create() {
    this.add.image(100, 100, 'block').setAlpha(0.3)
    const image = this.add.image(100, 100, 'block')
    const tweenMove = this.tweens.timeline({
      targets: image,
      ease: 'Power1',
      loop: -1, // 循環執行，-1 無限，5 5次
      // duration: 1000, // 每一次都是1000毫秒
      totalDuration: 4000, // 總時間2000毫秒
      tweens: [
        { x: 600 },
        {
          y: 500,
          offset: 200 // 時間偏移 上一個結束後，200毫秒再執行
        },
        { x: 100 },
        { y: 100 }
      ]
    })

    this.input.on('pointerdown', function() {
      if (tweenMove.isPlaying()) {
        tweenMove.pause()
      } else {
        tweenMove.resume()
      }
    })

    // tint 顏色值，只支持16進制
    const image1 = this.add.image(130, 50, 'block').setTint(0x00FFFF, 0xff00ff)
    const image2 = this.add.image(190, 80, 'block').setTint(0x00FFFF, 0xff00ff)
    const image3 = this.add.image(50, 150, 'block').setTint(0x00FFFF, 0xff00ff)

    this.tweens.add({
      targets: [image1, image2, image3],
      props: {
        x: { value: '+=600', duration: 3000, ease: 'Power2' },
        y: { value: '500', duration: 1500, ease: 'Bounce.easeOut' }
      },
      delay: 1000
    })
  }
}

export function TweenTimeLineInit(ele) {
  return new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000',
    parent: ele,
    scene: [GameScene]
  })
}