從零到一：用Phaser.js寫意地開發小遊戲（Chapter 2 - 搭建遊戲的骨架）

寫在前面

上一節咱們認識了Phaser.js，也說到了Phaser比較適合開發2D的小遊戲，那麼接下來的幾篇文章會以開發一個移動端的小遊戲爲例，來介紹如何上手Phaser.js。這一節的主要內容是用Phaser.js搭建遊戲的骨架。

遊戲相關的一些概念

畫布

通常來講，作遊戲的話基於Canvas會比基於DOM性能要好不少，尤爲是涉及大量動畫的狀況下。Phaser會將一切渲染在canvas元素上，因而，絕不誇張地說，你的body標籤裏可能只包含一個canvas元素。

因爲本節開發的目標是一個移動端的小遊戲，所以畫布通常來講都是充滿全屏的。

場景

一個完整的遊戲都是有分場景的，不是指「迷宮」、「沙漠」這些遊戲場景，而是「加載」、「開始」、「遊戲」、「結束」等場景。通常來講咱們實際作項目的時候也大概是以下四種場景：

• 加載——展現進度條和loading動畫，主要操做爲加載遊戲資源，如圖片、音頻等。

• 開始——展現開始按鈕、活動規則等，主要是讓玩家能有主動開始的操做（很關鍵，後面會說到）。

• 遊戲——整個遊戲的主要邏輯都在這個場景中，最核心的部分。

• 結束——展現遊戲最終得分、排名等。

這樣的場景的劃分也算是描述出了整個遊戲的生命週期，我認爲上述四個場景是最基本的，缺了哪一個場景遊戲都不算完整，或者是體驗不夠完善。

另外，關於再玩一次，有兩種方式，一種是回到開始場景，也就是說要再點一次開始遊戲，這時候你能夠再看看遊戲規則等；另外一種是直接開始遊戲。選用哪種方式視具體項目而定，比較常見的是直接開始遊戲。

對象池

遊戲中生成很是多的元素，咱們會須要一個對象池來維護他們，對象池能夠理解成是一個Group。那麼關於對象池有如下相關的操做：

• 儘量的複用對象，能夠減小內存的開銷。例如已經移出可視範圍的對象（例如跑酷遊戲的障礙），從新設置它們的位置，而不是從新建立。

• 若有肯定要銷燬的對象，記得顯式調用distroy方法（通常遊戲框架並不會被銷燬killed的對象，它們還能被「復活」）。

正式開始

每一步我都會給出示例代碼，你們點擊示例代碼連接旁的「點擊預覽」便可看到效果。

第一步：建立實例

• 引入Phaser.js

• 建立遊戲實例

說明：這裏寬高設置成320*568是爲了方便你們查看示例，實際應用場景應該是

var width = window.innerWidth;
var height = window.innerHeight;

示例代碼：https://jsfiddle.net/Vincent_...

---

第二步：定義場景

• 定義每一個場景的內容

• 將場景添加到遊戲實例中

說明：

• 每一個場景都是一個function。

• 經過game.state.add能夠將場景添加到遊戲

示例代碼：https://jsfiddle.net/Vincent_...

---

第三步：將場景串通

• 具體定義每一個場景的生命週期

• 從一個場景切換到另外一個場景

• 啓動遊戲

說明：

每一個場景都有本身的生命週期，經常使用的生命週期是preload（加載）、create（準備就緒）、update（更新週期）、render（渲染完成）。順帶介紹一下這四個生命週期吧（詳細介紹能夠查看官方離線文檔）：

• preload - 儘管咱們有預加載的場景，但若是你但願能縮短進入頁面時加載的時間，能夠分攤一些到其餘場景，只須要在其餘場景加入preload方法便可。

• create - 若是存在preload方法，則會在加載完畢後執行此方法；不然將在進入該場景時直接執行此方法。

• update - 更新週期自動執行的方法，例如在play場景的update方法中能夠去檢測兩個物體是否有接觸。

• render - 渲染完畢後執行的方法，例如能夠在此方法中勾勒出物體的邊緣，來方便觀察物體的碰撞區域。

示例代碼：https://jsfiddle.net/Vincent_...

邁出了第一步

至此咱們已經將遊戲的場景設置好，併成功啓動了遊戲，經過遊戲背景顏色的變化能夠體驗到場景的切換，咱們也能瞭解到整個遊戲分爲了四部分，每部分有本身的生命週期。

不少教程會從建立主角作起，但我認爲先把遊戲骨架搭建好了，再豐富每一個場景裏面的細節，會更容易理解整個遊戲的運行過程。

代碼沒有不少行，我也都用ES5來寫，閱讀起來應該不費勁。這一節包括後面的章節的內容都不會太多，方便你們消化。同時也儘量的介紹每一步是怎麼作的。

搭建好遊戲的骨架後，咱們總算是邁出了第一步。

未完待續

回顧：Chapter 1 - 認識Phaser.js

下一節：Chapter 3 - 加載遊戲資源