/

Phaser: 多個場景

Phaser: 多個場景

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

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

1
2
3
4
5
6
7
8
9
10
11
12
function preload() {}

function create() {}

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

這是一個簡單的情境。

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 中創建了一個遊戲場景:

1
2
3
4
5
6
7
8
9
export default class Scene2 extends Phaser.Scene {
constructor() {
super('game')
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
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') 前往遊戲場景。

tags: [“Phaser”, “JavaScript”, “遊戲開發”, “場景”, “多場景”]