phaser3學習筆記：scene數據交換

代碼素材後續提供下載鏈接

import Phaser from 'phaser'

class GameScene extends Phaser.Scene {
  constructor() {
    super('GameScene')
    this.score = 0
    this.lives = 6
  }

  preload() {
    this.load.image('bg', 'assets/example/scene/sky4.png')
    this.load.image('crate', 'assets/example/scene/crate.png')
  }

  create() {
    // Store the score and lives in the Game Registry
    // 把數據存到Game Registry裏
    this.registry.set('score', this.score)
    this.registry.set('lives', this.lives)

    // 添加背景圖片
    this.add.image(400, 300, 'bg')
    // 添加箱子
    for (let i = 0; i < 64; i++) {
      let x = Phaser.Math.Between(0, 800)
      let y = Phaser.Math.Between(0, 600)
      // 添加，並設置可互動
      let box = this.add.image(x, y, 'crate').setInteractive()
      // 一半的箱子顏色爲紅色
      if (i % 2) {
        box.setTint(0xff0000)
      }
    }
    // 點擊箱子事件
    this.input.on('gameobjectup', this.clickHandler, this)
  }

  clickHandler(pointer, box) {
    console.log(box)
    // 沒有生命
    if (this.lives === 0) {
      return
    }
    // 箱子消失
    box.input.enable = false
    box.setVisible(false)
    // 銷燬box
    // box.destory()

    // if the box was tinted red, you lose a life
    // 點中紅色箱子，生命減1
    if (box.tintTopLeft === 255) {
      this.lives--
      this.registry.set('lives', this.lives)
    } else {
      // 點擊普通箱子，增加分數
      this.score++
      this.registry.set('score', this.score)
    }
  }
}

class UIScene extends Phaser.Scene {
  constructor() {
    // 不是第一個scene,要顯示，需要active:true, 後面的scene層級在前的scene前面
    super({ key: 'UIScene', active: true })
    this.scoreText
    this.livesText
  }

  create() {
    // text object to display the score
    this.scoreText = this.add.text(10, 10, 'Score: 0', { font: '32px Arial', fill: '#000000' })
    this.livesText = this.add.text(10, 48, 'Lives: 6', { font: '32px Arial', fill: '#000000' })
    // check the registry and hit our callback every time the 'score' value is updated
    // 監聽registry值變化
    this.registry.events.on('changedata', this.updateData, this)

    // 從一個scene 啓動另一個scene,
    // this.scene.start('PassDataScene') // start 方式，其他的scene會直接消失
    // 啓動 其他的scene還在，launch之後，可以設置visible來顯示和隱藏
    this.scene.launch('PassDataScene')
    console.log(this.scene.isVisible('PassDataScene'))
    console.log(this.scene.isActive('PassDataScene'))
    setTimeout(() => {
      this.scene.setVisible(false, 'PassDataScene')
      setTimeout(()=>{
        this.scene.setVisible(true, 'PassDataScene')
      },5000)
    }, 5000)
  }

  updateData(parent, key, data) {
    if (key === 'score') {
      this.scoreText.setText('Score: ' + data)
    } else if (key === 'lives') {
      this.livesText.setText('Lives: ' + data)
    }
  }
}

class PassDataScene extends Phaser.Scene {
  constructor() {
    super({ key: 'PassDataScene', active: false })
  }

  create() {
    this.add.text(20, 100, 'launch from other scene', { font: '32px Arial', fill: '#000000' })
  }
}

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