前言
先來說說Phaser.js的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1. 開發(fā)效率高啃洋，優(yōu)秀的封裝和豐富的工具對(duì)象可以幫你極快的完成游戲開發(fā)。
2. 渲染能力優(yōu)秀练对，底層使用同樣是成功開源項(xiàng)目的pixi.js作為渲染支持。
3. 大量的示例代碼， 沒錯(cuò)官網(wǎng)上擺著大量的示例代碼也有部分是完整游戲痹籍，這足以讓要嘗試游戲開發(fā)的新人們垂涎欲滴。
缺點(diǎn)
1. 缺乏輔助工具，沒有這些輔助工具的支持游戲制作很難變?yōu)榱魉€工作羡儿，團(tuán)隊(duì)開發(fā)效率會(huì)大打折扣。
2. js游戲APP目前都有的瓶頸是钥，內(nèi)存占用較高掠归。小游戲內(nèi)存占用很容易就達(dá)到100mb以上是目前js游戲引擎都面臨的一個(gè)性能問題。其中除了js運(yùn)行時(shí)占用悄泥，底層webview的內(nèi)存占用超過半數(shù)虏冻，至于webview性能是還有大幅優(yōu)化提升空間還是受移動(dòng)設(shè)備硬件局限這里不再深究。
局限
Phaser引擎只能開發(fā)2D游戲弹囚。嚴(yán)格來說這不算是一個(gè)缺點(diǎn)厨相，因?yàn)橐骈_發(fā)者聲明只專注2D游戲引擎實(shí)現(xiàn)。
應(yīng)用場(chǎng)景
我認(rèn)為Phaser游戲引擎雖然在商業(yè)游戲開發(fā)上無法與cocos2d或者Unity3D相抗衡鸥鹉，但是它成熟的功能支持以及良好的性能表現(xiàn)也可以在游戲開發(fā)選擇中占有一席之地蛮穿。如果你是小游戲（單人）開發(fā)者，或者游戲開發(fā)學(xué)習(xí)教學(xué)毁渗，Phaser引擎都會(huì)是個(gè)不錯(cuò)的選擇践磅。
經(jīng)驗(yàn)分享
? 學(xué)習(xí)Phaser首先閱覽官網(wǎng)的API文檔（LEARN->左側(cè)API Documentation ）與Examples展示灸异，了解Phaser的能力范圍府适。另外也會(huì)有很多開發(fā)者在官網(wǎng)的News欄目中分享自己的項(xiàng)目、工具插件和經(jīng)驗(yàn)肺樟。除此之外html5gamedevs論壇是除官網(wǎng)之外Phaser資源最集中的網(wǎng)站檐春。
? 理解Phaser的設(shè)計(jì)，Group么伯、Cache疟暖、Loader、State田柔。
Group
除了Phaser.Group類型誓篱，部分顯示對(duì)象也可以為其增加孩子元素，不過使用的方法與Group略有不同凯楔，比如：增加子元素 Group.add() 窜骄、Sprite.addChild()。
通常我們會(huì)用Group把顯示對(duì)象分組方便操控摆屯，例如：把敵方單位與右方單位放入不同的Group邻遏，更具體點(diǎn)把卡牌游戲中不同玩家的牌放入不同的Group中顯示和操作糠亩。
Cache
Phaser總是緩存資源增加復(fù)用性。資源加載后准验，通過一個(gè)字符串類型的key訪問獲取赎线，雖然Phaser在載入資源函數(shù)總讓你設(shè)置訪問key，但是只有你需要額外寫代碼控制的資源才需要一個(gè)唯一的名字糊饱，既然是字符串你當(dāng)然也可以用本地化語言垂寥，比如說設(shè)置Button對(duì)象設(shè)置key為“充值按鈕”。API文檔中Cache類的公開屬性里羅列了引擎支持載入的資源類型另锋。
通常你不需要手動(dòng)去釋放緩存滞项，也許你會(huì)覺得自己開發(fā)的游戲內(nèi)存占用較高是不是該手動(dòng)釋放掉緩存來降低占用率。我的建議是使用chrome任務(wù)管理夭坪，打開“JavaScript使用的內(nèi)存”文判，這個(gè)選項(xiàng)內(nèi)存占用是可以考慮優(yōu)化的，而其他的內(nèi)存占用可以通過特別的手段優(yōu)化室梅，文章稍后會(huì)細(xì)說戏仓。
Loader
Phaser引擎的支持加載的資源格式相當(dāng)豐富，除了能加載紋理圖片亡鼠、視頻音頻赏殃、json、xml间涵、動(dòng)態(tài)加載JavaScript的能力讓游戲熱更新實(shí)現(xiàn)變得十分輕松仁热。另外，關(guān)于其他文本格式的支持可以通過text格式加載后再解析浑厚。
值得一提的是加載進(jìn)度條的實(shí)現(xiàn)，有一種方式是通過Loader.start()開始加載根盒，并用onFileComplete钳幅、onLoadComplete等函數(shù)監(jiān)視刷新載入進(jìn)度。這里會(huì)有兩個(gè)陷阱
1. Loader.start() 雖然可以控制開始加載的時(shí)機(jī)炎滞，但是并不意味著資源加載可以放到State的其他步驟敢艰。資源加載函數(shù)總是放在State類的preload函數(shù)中。
2. onFileComplete 收到信號(hào)不代表資源文件已經(jīng)被加載進(jìn)內(nèi)存册赛，而是說該資源被放入加載任務(wù)隊(duì)列钠导，整個(gè)載資源過程是個(gè)異步并發(fā)的過程。同樣onLoadComplete 信號(hào)也不能說明資源已經(jīng)被加載到內(nèi)存中森瘪，而是引擎調(diào)用在State類的create函數(shù)時(shí)資源一定可以被使用（已經(jīng)加載至內(nèi)存中）牡属。
State
狀態(tài)類讓游戲開發(fā)變得簡(jiǎn)便。Phaser引擎為每個(gè)狀態(tài)提供了緩存扼睬、資源訪問的快捷支持逮栅。開發(fā)者只需要實(shí)現(xiàn)包含特定方法的類就可以作為State狀態(tài)使用。以下羅列的方法中*表示必須實(shí)現(xiàn)，-表示可選措伐。
- init ? ? ? ? ?初始化狀態(tài)
* preload ? 加載狀態(tài)中用到的資源
* create ? ? 創(chuàng)建顯示對(duì)象
- shutdown 釋放當(dāng)前狀態(tài)的占用（如狀態(tài)切換）
- paused? ? 處理游戲暫停
很好特纤，不過狀態(tài)拆分粒度多大比較合適呢？從引擎的支持看來為狀態(tài)提供了很多支持侥加，這說明一個(gè)狀態(tài)對(duì)象占用的內(nèi)存空間不少捧存，關(guān)于這點(diǎn)可以通過console打印整個(gè)對(duì)象核實(shí)。所以我認(rèn)為Phaser的狀態(tài)用于游戲的大粒度拆分比較合理担败，比如按游戲場(chǎng)景切分為：游戲大廳昔穴，游戲房間，游戲場(chǎng)景123氢架。除此之外部分特殊的部分也可拆分開傻咖，比如將引導(dǎo)狀態(tài)，啟動(dòng)時(shí)的歡迎屏等于其他狀態(tài)分更有利于項(xiàng)目維護(hù)岖研。至于簡(jiǎn)單的狀態(tài)變化卿操，游戲內(nèi)部可以用更輕量的方式處理，畢竟減少內(nèi)存花費(fèi)就js游戲App目前內(nèi)存占用率高的環(huán)境下還是必要的孙援。
內(nèi)存
之前反復(fù)提到了內(nèi)存問題害淤，Phaser游戲App到底內(nèi)存占用有多高呢，用Cordova打包的App拓售，在Android系統(tǒng)的手機(jī)上窥摄，圖片資源不合并處理，一些手機(jī)很容就占用200MB以上（如：Mx4 Pro）础淤。這比起cocos與Unity3D的js游戲App 100MB的占用高出一倍著實(shí)讓人難以接受崭放。大家先別著急，其實(shí)優(yōu)化辦法還是有的鸽凶，而且優(yōu)化后內(nèi)存占用會(huì)與那兩個(gè)引擎相差不過币砂。
優(yōu)化一： 使用crosswalk代替Cordova的webview，強(qiáng)制開啟WebGL性能更佳玻侥。相應(yīng)的Phaser.Game也要顯示設(shè)置為WebGL渲染决摧。
* 注意使用crosswalk之后可能導(dǎo)致mp3格式的音頻資源無法加載（會(huì)報(bào)錯(cuò)），目前官方暫時(shí)沒有給出解決方案凑兰，不過有網(wǎng)友說可以通過將mp3格式轉(zhuǎn)ogg來繞過該問題掌桩。
優(yōu)化二： 合并小圖，過多的圖片載入會(huì)讓底層渲染好煩更多的內(nèi)存姑食，適當(dāng)?shù)暮喜⑿D減少渲染時(shí)的內(nèi)存消耗波岛。推薦使用ShoeBox工具合圖（也就是制作SpriteSheet），使用default項(xiàng)目生產(chǎn)即可音半。
另外盆色，如果要從cocos的plist中提取切分圖灰蛙，可以使用
位圖字體
使用官方推薦的網(wǎng)站?littera?制作起來也是棒棒噠~
還有呢
還有的話就是我做了一個(gè)移動(dòng)設(shè)備快速顯示布局的框架，使用yaml格式的配置文件隔躲，基本實(shí)現(xiàn)了根據(jù)美術(shù)設(shè)計(jì)的界面原型圖為各個(gè)圖片資源配置好坐標(biāo)就能完成顯示的框架摩梧。這在不規(guī)則布局的界面是很實(shí)用的，當(dāng)然美術(shù)設(shè)計(jì)人員也可以直接在配置中調(diào)整坐標(biāo)查看效果宣旱。
最后仅父，祝大家能夠和Phaser一起快樂的玩耍~
