摘要：由于公司項(xiàng)目轉(zhuǎn)型，需要?jiǎng)?chuàng)造一個(gè)小游戲平臺(tái)，需要使用一個(gè)比較成熟的前端游戲框架來(lái)快速開(kāi)發(fā)小游戲。僅支持開(kāi)發(fā)游戲，因?yàn)閷?zhuān)注，所以高效。早在年的光棍節(jié)前一天晚上，這個(gè)游戲就誕生了。原型是一個(gè)之前很火的非常魔性的小游戲，叫尋找程序員。

實(shí)際上我從未想過(guò)我會(huì)接觸到H5小游戲開(kāi)發(fā)，那是在2015年末，當(dāng)時(shí)我還剛開(kāi)始學(xué)習(xí)iOS不久，用Swift在寫(xiě)一個(gè)類(lèi)似于Snapchat的應(yīng)用。由于公司項(xiàng)目轉(zhuǎn)型，需要?jiǎng)?chuàng)造一個(gè)小游戲平臺(tái)，需要使用一個(gè)比較成熟的前端游戲框架來(lái)快速開(kāi)發(fā)小游戲。都說(shuō)創(chuàng)業(yè)公司有無(wú)限的實(shí)踐機(jī)會(huì)，于是，我就接觸到了Phaser.js，并在此后的兩個(gè)月的時(shí)間里開(kāi)發(fā)了十多個(gè)H5小游戲模板。

可能大家都沒(méi)聽(tīng)說(shuō)過(guò)，先貼個(gè)官網(wǎng)地址吧：http://phaser.io/。

沒(méi)錯(cuò)，在國(guó)內(nèi)可能比較少聽(tīng)說(shuō)這個(gè)框架，畢竟是老外在維護(hù)的一個(gè)開(kāi)源項(xiàng)目，看風(fēng)格就知道。說(shuō)真的，這個(gè)洋蔥頭愛(ài)心臉的外星人不可能會(huì)是我國(guó)的設(shè)計(jì)師想出來(lái)的形象，國(guó)內(nèi)比較有名的游戲開(kāi)發(fā)引擎，例如白鷺，就很有中國(guó)特色。

由于近幾年H5的火熱，H5游戲框架如雨后春筍般一個(gè)個(gè)地冒出來(lái)，甚至有很多定位不是游戲開(kāi)發(fā)的框架都被歸到這個(gè)范疇中，如Pixi.js等。那么大家肯定會(huì)問(wèn)一個(gè)問(wèn)題：為什么選擇Phaser？以下是我選擇它的一些原因：

出現(xiàn)在國(guó)外幾乎所有的H5游戲框架的榜單中，而且名列前茅。

支持原生JS及TypeScript。

可以方便地在Canvas和WebGL之間切換。

僅支持開(kāi)發(fā)2D游戲，因?yàn)閷?zhuān)注，所以高效。

定位如上圖所示，是桌面和移動(dòng)端H5游戲框架，Pixi.js、Three.js這些框架則不同，它們不是專(zhuān)門(mén)針對(duì)游戲開(kāi)發(fā)設(shè)計(jì)的，拿來(lái)開(kāi)發(fā)游戲并沒(méi)有很輕松。

非常完善的文檔及示例（當(dāng)然是英文文檔）。

持續(xù)更新，目前Phaser 3正在開(kāi)發(fā)，沒(méi)什么比一個(gè)熱度高的開(kāi)源框架更值得推薦了。

當(dāng)然了，每個(gè)框架都有優(yōu)缺點(diǎn)，這里只作介紹，并不是要比個(gè)高低。網(wǎng)上也有很多H5游戲框架的介紹和評(píng)測(cè)，不過(guò)大多數(shù)都是2016年的，可以分享一下：

HTML5游戲引擎深度測(cè)評(píng) - 冬夏之旅/簡(jiǎn)書(shū)
2016年最火的15款HTML5游戲引擎 - linshulin/diycode
Top 15: Best open source javascript game engines

列舉其中一個(gè)榜單，非常好奇的是國(guó)內(nèi)常見(jiàn)的Create.js，LAYABOX之類(lèi)的框架并沒(méi)有出現(xiàn)：

第一點(diǎn)：體積并不小

也許就游戲框架而言并不算很大，但對(duì)于還沒(méi)有接觸過(guò)游戲開(kāi)發(fā)的我來(lái)說(shuō)，當(dāng)時(shí)真是嚇到我了。（一般來(lái)說(shuō)框架不都在100KB以?xún)?nèi)嗎~）因此拿Phaser來(lái)開(kāi)發(fā)的話(huà)就基本要拋棄2G用戶(hù)了，盡管這部分用戶(hù)為數(shù)不多。

可優(yōu)化的方案是gzip、CDN等等，另外可能的方案是拆解phaser用不上的部分（我本人沒(méi)有試過(guò)）。

第二點(diǎn)：靠文檔和示例能解決90%以上的問(wèn)題

官網(wǎng)有大量的Examples，示例詳情還帶在線(xiàn)編輯、運(yùn)行環(huán)境，照顧到家了。另外官方提供example的zip下載，大概300M左右，里面的素材都?jí)蛲婧芫昧恕?/p>

上文也有提到Phaser的文檔非常完善，而且從github或官網(wǎng)download下來(lái)后離線(xiàn)版文檔體驗(yàn)也非常好。每個(gè)類(lèi)和API都有詳細(xì)的說(shuō)明，順便推薦大家寫(xiě)文檔可以用jsdoc來(lái)自動(dòng)生成，非常方便。

第三點(diǎn)：上手非常簡(jiǎn)單

首先由于Phaser支持原生JS，因此并無(wú)閱讀障礙。另外預(yù)設(shè)配置已非常完善，很多情況下使用默認(rèn)配置已經(jīng)能滿(mǎn)足需求。一個(gè)小游戲的主體邏輯在100行內(nèi)基本可以搞定，其余的就是豐富游戲的表現(xiàn)了。

我們公司曾在廣州大學(xué)城設(shè)立一個(gè)小游戲工作室，招納了6個(gè)前端開(kāi)發(fā)實(shí)習(xí)生，在沒(méi)有H5游戲開(kāi)發(fā)的經(jīng)驗(yàn)的前提下，基本在1-2周內(nèi)（每周只有3天工作時(shí)間）就完全上手Phaser，可以獨(dú)立開(kāi)發(fā)小游戲了。在往后的幾個(gè)月內(nèi)，也為我們平臺(tái)24好玩貢獻(xiàn)了不少模板。

借此說(shuō)明Phaser上手非常簡(jiǎn)單~

如果你玩過(guò)《尋找單身狗》這個(gè)游戲，希望你能給我點(diǎn)個(gè)贊。早在2015年的光棍節(jié)前一天晚上，這個(gè)游戲就誕生了。原型是一個(gè)之前很火的非常魔性的小游戲，叫尋找程序員。后來(lái)變成24好玩的模板后，還是很受追捧，以致于使用該模板創(chuàng)建的活動(dòng)已有過(guò)百萬(wàn)玩家參與，甚至我們公司設(shè)計(jì)的單身狗形象都被盜用了，就是下面這個(gè)doge：

目標(biāo)就是在一堆人中找到doge，隨著游戲難度增加，人會(huì)越來(lái)越多，也會(huì)越來(lái)越小。

游戲截圖：

這里是游戲鏈接，也可以?huà)呙柘旅娴亩S碼進(jìn)入游戲，也算是供大家?jiàn)蕵?lè)娛樂(lè)吧。

Phaser.js的介紹就到這里，想了解更多可以到Phaser的官網(wǎng)去。接下來(lái)還會(huì)更新幾篇文章，直接以實(shí)際項(xiàng)目為示例來(lái)介紹如何使用Phaser.js來(lái)開(kāi)發(fā)小游戲，最后會(huì)附上一些開(kāi)發(fā)的常用方法和實(shí)戰(zhàn)技巧。希望大家會(huì)喜歡。

下一節(jié)：Chapter 2 - 搭建游戲的骨架