從零到一：用Phaser.js寫意地開發小遊戲（Chapter 1 - 認識Phaser.js）

寫在前面

實際上我從未想過我會接觸到H5小遊戲開發，那是在2015年底，當時我還剛開始學習iOS不久，用Swift在寫一個相似於Snapchat的應用。因爲公司項目轉型，須要創造一個小遊戲平臺，須要使用一個比較成熟的前端遊戲框架來快速開發小遊戲。都說創業公司有無限的實踐機會，因而，我就接觸到了Phaser.js，並在此後的兩個月的時間裏開發了十多個H5小遊戲模板。

Phaser.js？

可能你們都沒據說過，先貼個官網地址吧：http://phaser.io/。

沒錯，在國內可能比較少據說這個框架，畢竟是老外在維護的一個開源項目，看風格就知道。說真的，這個洋蔥頭愛心臉的外星人不可能會是我國的設計師想出來的形象，國內比較有名的遊戲開發引擎，例如白鷺，就頗有中國特點。

H5遊戲框架衆多，爲什麼選擇它？

因爲近幾年H5的火熱，H5遊戲框架如雨後春筍般一個個地冒出來，甚至有不少定位不是遊戲開發的框架都被歸到這個範疇中，如Pixi.js等。那麼你們確定會問一個問題：爲何選擇Phaser？如下是我選擇它的一些緣由：

• 出如今國外幾乎全部的H5遊戲框架的榜單中，並且名列前茅。

• 支持原生JS及TypeScript。

• 能夠方便地在Canvas和WebGL之間切換。

• 僅支持開發2D遊戲，由於專一，因此高效。

• 定位如上圖所示，是桌面和移動端H5遊戲框架，Pixi.js、Three.js這些框架則不一樣，它們不是專門針對遊戲開發設計的，拿來開發遊戲並無很輕鬆。

• 很是完善的文檔及示例（固然是英文文檔）。

• 持續更新，目前Phaser 3正在開發，沒什麼比一個熱度高的開源框架更值得推薦了。

固然了，每一個框架都有優缺點，這裏只做介紹，並非要比個高低。網上也有不少H5遊戲框架的介紹和評測，不過大多數都是2016年的，能夠分享一下：

HTML5遊戲引擎深度測評 - 冬夏之旅/簡書
2016年最火的15款HTML5遊戲引擎 - linshulin/diycode
Top 15: Best open source javascript game engines

列舉其中一個榜單，很是好奇的是國內常見的Create.js，LAYABOX之類的框架並無出現：

使用Phaser.js開發的一些感想

第一點：體積並不小

也許就遊戲框架而言並不算很大，但對於尚未接觸過遊戲開發的我來講，當時真是嚇到我了。（通常來講框架不都在100KB之內嗎~）所以拿Phaser來開發的話就基本要拋棄2G用戶了，儘管這部分用戶爲數很少。

可優化的方案是gzip、CDN等等，另外可能的方案是拆解phaser用不上的部分（我本人沒有試過）。

第二點：靠文檔和示例能解決90%以上的問題

官網有大量的Examples，示例詳情還帶在線編輯、運行環境，照顧到家了。另外官方提供example的zip下載，大概300M左右，裏面的素材都夠玩好久了。

上文也有提到Phaser的文檔很是完善，並且從github或官網download下來後離線版文檔體驗也很是好。每一個類和API都有詳細的說明，順便推薦你們寫文檔能夠用jsdoc來自動生成，很是方便。

第三點：上手很是簡單

首先因爲Phaser支持原生JS，所以並沒有閱讀障礙。另外預設配置已很是完善，不少狀況下使用默認配置已經能知足需求。一個小遊戲的主體邏輯在100行內基本能夠搞定，其他的就是豐富遊戲的表現了。

咱們公司曾在廣州大學城設立一個小遊戲工做室，招納了6個前端開發實習生，在沒有H5遊戲開發的經驗的前提下，基本在1-2周內（每週只有3天工做時間）就徹底上手Phaser，能夠獨立開發小遊戲了。在日後的幾個月內，也爲咱們平臺24好玩貢獻了很多模板。

藉此說明Phaser上手很是簡單~

個人第一個做品

若是你玩過《尋找單身狗》這個遊戲，但願你能給我點個贊。早在2015年的光棍節前一天晚上，這個遊戲就誕生了。原型是一個以前很火的很是魔性的小遊戲，叫尋找程序員。後來變成24好玩的模板後，仍是很受追捧，以至於使用該模板建立的活動已有過百萬玩家參與，甚至咱們公司設計的單身狗形象都被盜用了，就是下面這個doge：

目標就是在一堆人中找到doge，隨着遊戲難度增長，人會愈來愈多，也會愈來愈小。

遊戲截圖：

這裏是遊戲連接，也能夠掃描下面的二維碼進入遊戲，也算是供你們娛樂娛樂吧。

你的下一步？

Phaser.js的介紹就到這裏，想了解更多能夠到Phaser的官網去。接下來還會更新幾篇文章，直接以實際項目爲示例來介紹如何使用Phaser.js來開發小遊戲，最後會附上一些開發的經常使用方法和實戰技巧。但願你們會喜歡。

未完待續

下一節：Chapter 2 - 搭建遊戲的骨架