北京軟件開(kāi)發(fā)公司如何選擇HTML5游戲開(kāi)發(fā)引擎，原生手游市場(chǎng)已是紅海、騰訊、網(wǎng)易等寡頭獨(dú)霸天下，H5游戲市場(chǎng)或?qū)⒊蔀橄乱粋€(gè)風(fēng)口。據(jù)筆者所知，很多H5游戲開(kāi)發(fā)團(tuán)隊(duì)由于選擇引擎不慎導(dǎo)致項(xiàng)目甚至團(tuán)隊(duì)夭折。如何選擇適合團(tuán)隊(duì)和項(xiàng)目的引擎，筆者通過(guò)學(xué)習(xí)和項(xiàng)目實(shí)踐，總結(jié)微薄經(jīng)驗(yàn)，供大家參考，非技術(shù)人員也可以將本篇內(nèi)容作為引擎選擇的重要關(guān)注點(diǎn)。

　　選擇H5游戲引擎的思考維度

　　1、開(kāi)發(fā)語(yǔ)言的支持

　　2、2D、3D、VR的支持

　　3、性能

　　4、引擎的應(yīng)用廣度

　　5、設(shè)計(jì)理念

　　6、工作流支持力度

　　7、商業(yè)化成熟案例

　　8、學(xué)習(xí)資源與技術(shù)支持能力

　　首先，我們要知道，當(dāng)前主流的游戲引擎有哪些。由于H5引擎有很多，筆者在這里進(jìn)行了精心的篩選，過(guò)濾掉不支持webGL的引擎，以及封裝了第三方渲染內(nèi)核的JS框架，和不能直接在瀏覽器中運(yùn)行的JS引擎。

　　為什么要過(guò)濾掉這幾種呢，首先，沒(méi)有自己的渲染內(nèi)核，僅僅是基于第三方的內(nèi)核作的API封裝，筆者很擔(dān)心可持續(xù)的性能優(yōu)化和維護(hù)能力。另外，不能在瀏覽器中直接運(yùn)行的JS引擎，將限制H5游戲跨平臺(tái)的交互能力。還有， 筆者非?？春脀ebGL模式，認(rèn)為webGL模式才是H5引擎的未來(lái)。原因有幾點(diǎn)：

　　第一、性能，webGL模式遠(yuǎn)超Canvas數(shù)倍。DOM模式就不適合用于真正的游戲開(kāi)發(fā)，更不用提。

　　第二、3D方向，webGL模式理論上可以制作2D和3D游戲，Canvas和DOM模式下只能制作2D游戲。

　　第三、普及率，webGL的普及率已經(jīng)非常高了，尤其是支持webGL的騰訊TBS-Blink內(nèi)核已在4月19日發(fā)布，并逐步在微信、QQ空間、QQ瀏覽器、手機(jī)QQ等APP中采用靜默安裝方式全面升級(jí)。這個(gè)普及率在國(guó)內(nèi)帶來(lái)的影響，;你懂的……

　　1、選擇H5游戲開(kāi)發(fā)語(yǔ)言

　　擁有廣泛開(kāi)發(fā)者的H5游戲開(kāi)發(fā)語(yǔ)言共有三種，分別為Flash AS3、TypeScript、JavaScript。其中Flash AS3、TypeScript均屬于面向?qū)ο蟮母呒?jí)腳本語(yǔ)言，通過(guò)編譯器將原項(xiàng)目代碼編譯成JavaScript代碼文件運(yùn)行于瀏覽器之中，面向?qū)ο蟮母呒?jí)語(yǔ)言無(wú)論是項(xiàng)目開(kāi)發(fā)管理，還是項(xiàng)目開(kāi)發(fā)的工具環(huán)境的成熟度都明顯優(yōu)于JavaScript腳本語(yǔ)言，尤其是中大型項(xiàng)目方面，AS3等高級(jí)語(yǔ)言的效率會(huì)更高。

　　從上圖看出，支持JavaScript語(yǔ)言的引擎更多，由于AS3語(yǔ)言的編譯器為L(zhǎng)ayabox引擎推出的，因此采用AS3作為開(kāi)發(fā)語(yǔ)言的僅有Layabox引擎。筆者建議在開(kāi)發(fā)中大型游戲項(xiàng)目的時(shí)候，采用TypeScript或者是Flash AS3語(yǔ)言進(jìn)行開(kāi)發(fā)。如果是小型游戲，任選其一即可。

　　2、引擎的未來(lái)延續(xù)能力

　　選擇一個(gè)引擎，并不是簡(jiǎn)單的認(rèn)為，滿足眼前夠用就可以了，引擎的未來(lái)延續(xù)能力也是很重要的，這個(gè)項(xiàng)目是2D，下個(gè)項(xiàng)目想開(kāi)發(fā)3D，如果引擎不支持怎么辦?去換個(gè)引擎?如果VR的機(jī)會(huì)來(lái)了，再想發(fā)布VR版本，這個(gè)引擎不支持，需要重新開(kāi)發(fā)嗎?等等問(wèn)題，作為開(kāi)發(fā)者盡可能要提前想好。

　　通過(guò)上圖，可以看出，即便是在支持webGL的H5引擎里，有只面向2D游戲的，也有只面向3D游戲的，同時(shí)支持2D、3D、VR的H5引擎，從目前看只有Layabox與Egret引擎。

　　3、性能是核心需求

　　性能是H5游戲面臨的核心門(mén)檻，也是很多H5游戲不被專(zhuān)業(yè)玩家認(rèn)可的重要原因之一。游戲卡頓，不流暢，這樣的產(chǎn)品體驗(yàn)很難在激烈競(jìng)爭(zhēng)中生存下來(lái)。

　　H5產(chǎn)業(yè)早期的普及階段即將過(guò)去，游戲品質(zhì)在迅速提高，品質(zhì)中包括精細(xì)的美術(shù)和炫酷的動(dòng)畫(huà)等。在復(fù)雜的游戲項(xiàng)目面前，上述種種元素，其流暢體驗(yàn)度對(duì)游戲引擎是極大的考驗(yàn)。所以選擇性能優(yōu)秀的引擎是保證品質(zhì)的較重要基礎(chǔ)，一定要謹(jǐn)慎。

　　在游戲項(xiàng)目研發(fā)開(kāi)始時(shí)，一定要先對(duì)復(fù)雜的模塊做DEMO測(cè)試，特別是帶背景滾動(dòng)的游戲。比如橫屏卷軸游戲，對(duì)幀數(shù)穩(wěn)定性要求極高，如果滿足不了性能上的需求，可能會(huì)帶來(lái)眩暈、眼花、疲倦等不良體驗(yàn)。

　　在webGL的2D渲染性能方面，pixi.js的性能處于當(dāng)前的頂級(jí)。在webGL的3D渲染性能方面，Three.js非常優(yōu)秀。在runtime方面Cocos2d-js也有著原生級(jí)的表現(xiàn)，經(jīng)過(guò)對(duì)比，筆者認(rèn)為L(zhǎng)ayabox性能的綜合實(shí)力較強(qiáng)，在各個(gè)渲染領(lǐng)域都保持在HTML5引擎的頂級(jí)水平。當(dāng)然，上圖僅作為參考，對(duì)于任何號(hào)稱(chēng)某個(gè)引擎性能較牛的論調(diào)，一定要親自進(jìn)行性能DEMO的測(cè)試對(duì)比，而不要輕易采信。

　　由于性能是游戲較核心的需求，筆者這里再多說(shuō)一句，大型項(xiàng)目在系統(tǒng)復(fù)雜度、UI復(fù)雜度、動(dòng)畫(huà)顯示數(shù)量和種類(lèi)等方面與小型游戲項(xiàng)目完全不在一個(gè)量級(jí)。會(huì)涉及到比小游戲更復(fù)雜的性能優(yōu)化、內(nèi)存管理、資源管理等需求，如果選擇了小馬拉大車(chē)的低性能引擎，項(xiàng)目夭折可能性非常大，除非較后項(xiàng)目開(kāi)發(fā)者花大量時(shí)間自己優(yōu)化引擎。所以性能差一點(diǎn)，就會(huì)導(dǎo)致結(jié)果差很多，不可主觀想象。

　　4、與引擎的應(yīng)用廣度

　　隨著H5游戲品質(zhì)提升，在其他領(lǐng)域也具備一定的競(jìng)爭(zhēng)力和價(jià)值，一次開(kāi)發(fā)可發(fā)行各個(gè)領(lǐng)域版本，已成為日漸明確的需求，這里面包括發(fā)行原生APP手游和PC的flash頁(yè)游需求，大統(tǒng)一的引擎時(shí)代即將來(lái)領(lǐng)。目前較火爆的H5游戲《傳奇世界H5》據(jù)說(shuō)有40%的收入來(lái)自PC網(wǎng)頁(yè)。

　　發(fā)布PC頁(yè)游時(shí)，由于PC瀏覽器目前對(duì)HTML5兼容性不足70%，用戶損耗很大，頁(yè)游聯(lián)運(yùn)平臺(tái)可能會(huì)拒絕或放量很少，只有采用能同時(shí)發(fā)布Flash版本的引擎，才能解決這個(gè)問(wèn)題。

　　5、設(shè)計(jì)理念與定位

　　設(shè)計(jì)理念是個(gè)比較大的話題，也是個(gè)很重要的引擎選擇因素，比如引擎是要專(zhuān)注移動(dòng)端，還是要面向全平臺(tái)多端游戲市場(chǎng)。是注重性能，還是注重工具鏈等等。深入了解不同引擎的理念與定位，才能更好的與游戲產(chǎn)品進(jìn)行結(jié)合。

　　上圖內(nèi)容僅作參考，詳情建議去各引擎官網(wǎng)深入了解。

　　6、工作流支持力度

　　作為商業(yè)級(jí)開(kāi)源引擎，工具鏈的提供與支持也是一種選擇考量要素，比如UI編輯器、粒子編輯器、骨骼編輯器、場(chǎng)景編輯器等等，如果引擎方直接提供或支持，那么將會(huì)較大的提升研發(fā)效率。

　　本文中提到的7個(gè)引擎，只有Egret、Layabox、Cocos2d-JS這三個(gè)引擎，在工具鏈方面提供足夠全面的支撐。

　　7、是否有成熟的商業(yè)案例

　　怎么證明引擎是成熟的?一定要有成熟的商業(yè)案例，一般引擎的官網(wǎng)上都會(huì)有游戲案例介紹，我們?cè)谶x擇引擎之前要進(jìn)行深入體驗(yàn)，包括：商業(yè)案例的數(shù)量、商業(yè)案例的種類(lèi)、穩(wěn)定性、流暢度(要在低端機(jī)里體驗(yàn))、項(xiàng)目復(fù)雜度、項(xiàng)目相似度等。如果有一些大型成功案例背書(shū)會(huì)相對(duì)安全可靠些。

　　從目前的行業(yè)案例來(lái)看，Layabox引擎的MMORPG《醉西游》、重度動(dòng)作游戲《獵刃2》、大型模擬經(jīng)營(yíng)游戲《夢(mèng)幻家園》等無(wú)疑是H5引擎技術(shù)的較高水準(zhǔn)代表作。但是從卡牌、掛機(jī)等類(lèi)型的付費(fèi)游戲總體數(shù)量來(lái)看，Egret引擎明顯占優(yōu)，充分說(shuō)明該引擎的市場(chǎng)宣傳力度更勝一籌。

　　8、學(xué)習(xí)資源與技術(shù)支持能力

　　能提供什么樣的學(xué)習(xí)資源，以及技術(shù)支持，對(duì)于開(kāi)發(fā)者也是重要因素，如果你是技術(shù)大牛，只想使用輕量的第三方渲染內(nèi)核。那么2D游戲，pixi.js無(wú)疑是首選。3D游戲，筆者推薦Three.js。但是這兩種引擎的學(xué)習(xí)資料都比較稀少。筆者認(rèn)為學(xué)習(xí)資料的完善，以及在學(xué)習(xí)過(guò)程中的技術(shù)支持力度，將會(huì)很大的幫助你解決引擎使用中的問(wèn)題。所以，API完善，DEMO完善，文檔完善，社區(qū)的響應(yīng)速度，交流氛圍，以及QQ技術(shù)支持等，都可以作為你選擇引擎的因素考量之一。

　　9、頁(yè)游移植產(chǎn)品的引擎選擇

　　目前像《醉西游》等優(yōu)秀H5產(chǎn)品是Flash頁(yè)游或手游移植而成，移植類(lèi)的產(chǎn)品在選用引擎時(shí)要注意，代碼是否可以直接移植?如果可以，那將節(jié)省大量的開(kāi)發(fā)成本。比如Flash AS3開(kāi)發(fā)的2D或3D頁(yè)游或手游，可以把邏輯與算法代碼直接拷貝移植到Layabox引擎項(xiàng)目中，開(kāi)發(fā)速度提高數(shù)倍。

　　寫(xiě)在較后：較后提醒一下，千萬(wàn)不要相信某些引擎的單方宣傳，一定要花一點(diǎn)時(shí)間去研究實(shí)踐，親自制作DEMO去作一作對(duì)比，動(dòng)手體驗(yàn)到的才是真理。

　　針對(duì)DEMO測(cè)試筆者有幾點(diǎn)建議：

　　1、采用一個(gè)復(fù)雜的UI，特別是復(fù)雜列表，比如說(shuō)沒(méi)有分頁(yè)的背包列表，背包里放上不同的道具圖片，測(cè)試滑動(dòng)時(shí)的流暢度，這塊比較考驗(yàn)性能，元素越復(fù)雜，數(shù)據(jù)越多，尤其能對(duì)比出來(lái)性能上的差異。

　　2、包含較復(fù)雜戰(zhàn)斗部分，不要寫(xiě)戰(zhàn)斗邏輯代碼，不然會(huì)花的時(shí)間太長(zhǎng)，只需要把戰(zhàn)斗相關(guān)的動(dòng)畫(huà)和復(fù)雜的元素放在場(chǎng)景中模擬即可，因?yàn)镠5游戲性能瓶頸通常在于畫(huà)面的顯示。

　　3、 測(cè)試主要目的是看項(xiàng)目在引擎中性能，這是較至關(guān)重要的，所以，硬件上，我們要選擇低端安卓手機(jī)(比如紅米)進(jìn)行測(cè)試。軟件環(huán)境建議使用微信環(huán)境測(cè)試，首先，因?yàn)槲⑿殴娞?hào)是H5的主要渠道之一，其次，微信當(dāng)前的H5性能低于chrome瀏覽器，在惡劣的環(huán)境下更能測(cè)試引擎的優(yōu)劣。