Phaser: 多個場景

本文章為 Phaser 系列文章的一部分。點此查看該系列文章的第一篇。

在先前的例子中，我們看到了如何通過將包含函數引用的物件傳遞給 Phaser.Game() 選項物件的 scene 屬性來創建場景：

function preload() {}

function create() {}

new Phaser.Game({
  width: 450,
  height: 600,
  scene: {
    preload,
    create
  }
})

這是一個簡單的情境。

一個遊戲通常有多個場景。您可以在不同的檔案中創建每個場景，並將它們作為陣列傳遞給 scene 屬性。

在這種情況下，場景是通過擴展 Phaser.Scene 物件來創建的。

我們在一個獨立的 Welcome.js 檔案中創建了一個歡迎場景：

export default class Scene1 extends Phaser.Scene {
  constructor() {
    super('welcome')
  }

  create() {
    this.add.text(20, 20, 'Loading..')

    setTimeout(() => {
      this.scene.start('game')
    }, 2000)
  }
}

並在 Game.js 中創建了一個遊戲場景：

export default class Scene2 extends Phaser.Scene {
  constructor() {
    super('game')
  }

  create() {
    this.add.text(20, 20, 'Playing game!')
  }
}

請注意，我們在這裡有 create() 方法。我們也可以像之前一樣擁有 preload() 和 update() 方法。

然後，我們將它們引入並將它們傳遞給我們的主遊戲檔案的 scene 屬性：

import Phaser from 'phaser'
import Welcome from './Welcome'
import Game from './Game'

const config = {
  width: 800,
  height: 600,
  backgroundColor: 0x000000,
  scene: [Welcome, Game]
}

const game = new Phaser.Game(config)

現在的情況是，我們首先進入列在第一位的場景（歡迎場景），然後在 2 秒後調用 this.scene.start('game') 前往遊戲場景。