北(běi)京軟件(jiàn)開(kāi)發πα公司如(rú)何選擇HTML5遊戲開(kāi)發引&©€擎，原生(shēng)手遊市(shì)場(c÷→hǎng)已是(shì)紅(hóng)海(hǎi)、騰訊、網易等寡頭獨霸天下(xià)，H5遊戲市ε≥×‍(shì)場(chǎng)或将成為(wèi)下(xià)±₩λ‌一(yī)個(gè)風(fēng)口。據筆(bǐ)者所知(zhī♠"∏)，很(hěn)多(duō)H5遊戲開(kāi)發團隊' ≈由于選擇引擎不(bù)慎導緻項目甚至團隊夭折。如♥&<(rú)何選擇适合團隊和(hé)項目的(de‍')引擎，筆(bǐ)者通(tōng)過學習(xí)和(hé)項目實踐，總結☆₩微(wēi)薄經驗，供大(dà)家(jiā​εφ)參考，非技(jì)術(shù)人(rén)員(yuán)也(yě)​÷₹€可(kě)以将本篇內(nèi)容作(zuò)為(wèi₹"←)引擎選擇的(de)重要(yào)關注點。

　　選擇H5遊戲引擎的(de)思考維度

　　1、開(kāi)發語言的(de)支持

　　2、2D、3D、VR的(de)支持

　　3、性能(néng)

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

　　5、設計(jì)理(lǐ)念

　　6、工(gōng)作(zuò)流支持力度

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

　　8、學習(xí)資源與技(jì)術(shù)支↓§持能(néng)力

　　首先，我們要(yào)知(zhī)道(dào)，當前主流的(de)遊戲引擎β§有(yǒu)哪些(xiē)。由于H5引擎有(yǒu)很(hěn)多(duō$∏↔)，筆(bǐ)者在這(zhè)裡(lǐ)進行(xín γg)了(le)精心的(de)篩選，過濾掉不(bù)支持webGL的(de)引擎↓÷γ，以及封裝了(le)第三方渲染內(nèi)核的♣β​≥(de)JS框架，和(hé)不(bù)能(néng)直接在浏覽器(q♦α€ì)中運行(xíng)的(de)JS引擎。

　　為(wèi)什(shén)麽要(yào)過濾掉這(z®¶hè)幾種呢(ne)，首先，沒有(yǒu)自(zì)己的↑₩(de)渲染內(nèi)核，僅僅是(shì)基于第三方的(d‌≥×e)內(nèi)核作(zuò)的(de)API封裝，筆(b₽♦ǐ)者很(hěn)擔心可(kě)持續的(de)性能(néλλ∞÷ng)優化(huà)和(hé)維護能(néng)力。另外( ♥•wài)，不(bù)能(néng)在浏覽器(qì)中直↔←​接運行(xíng)的(de)JS引擎，将限©™∑∞制(zhì)H5遊戲跨平台的(de)交互能(néng)力。還" (hái)有(yǒu)， 筆(bǐ)者非常看(kàn)好(hǎo)we₽​λbGL模式，認為(wèi)webGL模式才是(shì)H5¥≥引擎的(de)未來(lái)。原因有(yǒu)幾點：

　　第一(yī)、性能(néng)，webGL模式遠(yuǎ★ε↓σn)超Canvas數(shù)倍。DOM模式就÷&(jiù)不(bù)适合用(yòng)于↕‍£∑真正的(de)遊戲開(kāi)發，更不(bù)用(yòng)提。

　　第二、3D方向，webGL模式理(lǐ)論上(★₹λshàng)可(kě)以制(zhì)作(zuò)2D和(hé)3D遊α'☆戲，Canvas和(hé)DOM模式下(xià)隻能(néng)制(zhì)作↕'(zuò)2D遊戲。

　　第三、普及率，webGL的(de)普及率β$♦$已經非常高(gāo)了(le)，尤其是(shì)支持web£₽∞"GL的(de)騰訊TBS-Blink內(nèiβ§)核已在4月(yuè)19日(rì)發布，并逐步在微(wēi)信、QQ空(k≥>ōng)間(jiān)、QQ浏覽器(qì)、手機(jī)QQ等APP中采用(₩δ>yòng)靜(jìng)默安裝方式全面升級。這(zhè)個(g∑✘è)普及率在國(guó)內(nèi)帶來(láiε♠φ→)的(de)影(yǐng)響，;你(nǐ)懂(dǒng)的(de)&hel>∑↓lip;…

　　1、選擇H5遊戲開(kāi)發語言

　　擁有(yǒu)廣泛開(kāi)發者的(de)H5遊戲開( ↔§↕kāi)發語言共有(yǒu)三種，分(fēn)别為(w'♥¶<èi)Flash AS3、TypeScript、J±♥​avaScript。其中Flash AS3、TypeSc★✔ript均屬于面向對(duì)象的(de)高(뮥gāo)級腳本語言，通(tōng)過編譯器(qì)将原項∏Ω↑✔目代碼編譯成JavaScript代碼文(wén)©₽件(jiàn)運行(xíng)于浏覽器(qì)之中，面向對(₽₹ duì)象的(de)高(gāo)級語言無論是♥←(shì)項目開(kāi)發管理(lǐ)，還(hái)是(shì)項目開(k™±∏āi)發的(de)工(gōng)具環境的(de)成熟度都(dōu)明(₩✘míng)顯優于JavaScript腳本語言，尤其是(shì)中大(dà≤×∞)型項目方面，AS3等高(gāo)級語言的(de)效率會(huì)更高≈ (gāo)。

　　從(cóng)上(shàng)圖看(kàn)出&₩&×，支持JavaScript語言的(de)引擎更多(duō)，由于AS3語言Ω↕的(de)編譯器(qì)為(wèi)Layabox引擎推出的(de)，≠•因此采用(yòng)AS3作(zuò)為(wèi‍₽&")開(kāi)發語言的(de)僅有(yǒu)Layabox€×β引擎。筆(bǐ)者建議(yì)在開(kāi)發中大(dà)型遊戲項目的(deσ↑)時(shí)候，采用(yòng)TypeS★★↑€cript或者是(shì)Flash AS3γ±™語言進行(xíng)開(kāi)發。如(rú)果是(shì)小(xiǎo)≥ 型遊戲，任選其一(yī)即可(kě)。

　　2、引擎的(de)未來(lái)延續能(néng)‍¥力

　　選擇一(yī)個(gè)引擎，并不( ¶bù)是(shì)簡單的(de)認為(wèi)，滿足眼前夠用(yòng)×∑↔©就(jiù)可(kě)以了(le)，引擎的(de)未來₹δ(lái)延續能(néng)力也(yě)是(shì)很(hěn)重要(yào)®ΩΩ'的(de)，這(zhè)個(gè)項目是(shì♦✔•)2D，下(xià)個(gè)項目想開(kāi)發3D™₽£✘，如(rú)果引擎不(bù)支持怎麽辦?去(qù)換個(gè)引擎?如(→©↑rú)果VR的(de)機(jī)會(huì)來(lái)了(le)，π≤↔&再想發布VR版本，這(zhè)個(gè)引δφγ擎不(bù)支持，需要(yào)重新開(kāi)發嗎(ma)?等等問(• wèn)題，作(zuò)為(wèi)開(kāi​π÷)發者盡可(kě)能(néng)要(yào♦÷)提前想好(hǎo)。

　　通(tōng)過上(shàng)圖，可(k ∑ě)以看(kàn)出，即便是(shì)在支持webGL的(de↓€¶£)H5引擎裡(lǐ)，有(yǒu)隻面向₽ 2D遊戲的(de)，也(yě)有(yǒu)隻面向3D遊戲的™€↑(de)，同時(shí)支持2D、3D、VR的 ™α₹(de)H5引擎，從(cóng)目前看(kàn)↑≥£ε隻有(yǒu)Layabox與Egret引擎。

　　3、性能(néng)是(shì)核心需求

　　性能(néng)是(shì)H5遊戲面臨的(de)姕 核心門(mén)檻，也(yě)是(shì)很(hěn)多(duō)H5遊戲不(★&bù)被專業(yè)玩(wán)家(jiā)認可(kě)的(de)重要(y©Ωào)原因之一(yī)。遊戲卡頓，不(bù)流暢，這(zhè)樣× ↓σ的(de)産品體(tǐ)驗很(hěn)難在激烈競争中生(shēng☆¶≈)存下(xià)來(lái)。

　　H5産業(yè)早期的(de)普及階段即将過去(q<λλ←ù)，遊戲品質在迅速提高(gāo)，品質中包括精細的(de)美(mě"¥αi)術(shù)和(hé)炫酷的(de)動畫(huà)等。在'↔"♦複雜(zá)的(de)遊戲項目面前，上(shàn∑‍g)述種種元素，其流暢體(tǐ)驗度對(duì)遊戲↑©引擎是(shì)極大(dà)的(de)考驗。所≤♦以選擇性能(néng)優秀的(de)引擎是(shì)保證品質的(de)較重要←↑♥✔(yào)基礎，一(yī)定要(yào)謹慎。

　　在遊戲項目研發開(kāi)始時(shí ​)，一(yī)定要(yào)先對(duì)複雜(zá)的π‍‍(de)模塊做(zuò)DEMO測試，特别是(shì)帶背景滾動的(de)遊∑§戲。比如(rú)橫屏卷軸遊戲，對(duì)幀數(shù)穩定性要α★☆(yào)求極高(gāo)，如(rú)果滿足不(bù)了(le)性能(nénλ₹g)上(shàng)的(de)需求，可(kě)能(néng)會(hu≠•↔ì)帶來(lái)眩暈、眼花(huā)、疲倦®✔♣等不(bù)良體(tǐ)驗。

　　在webGL的(de)2D渲染性能(néng)方面，pixi.js的(de♦♦§φ)性能(néng)處于當前的(de)頂級。在webGL的(d£§✘∞e)3D渲染性能(néng)方面，Three.js非常≈ ↕優秀。在runtime方面Cocos2d-js也(yě)有(yǒu)φ 著(zhe)原生(shēng)級的(de)表現(xiàn)，經過對(←λ duì)比，筆(bǐ)者認為(wèi)Layabox性能(néng)的Ω•'‌(de)綜合實力較強，在各個(gè)渲染領域都(dōu↔∞β)保持在HTML5引擎的(de)頂級水(shuǐ)平。當然，上(shàng)'≈✔<圖僅作(zuò)為(wèi)參考，對(duì)于任何号稱某個(♠π$↑gè)引擎性能(néng)較牛的(de)論調，¶✘₹一(yī)定要(yào)親自(zì)進行(xíng)性能(≠₹néng)DEMO的(de)測試對(duì)比，'Ω" 而不(bù)要(yào)輕易采信。

　　由于性能(néng)是(shì)遊戲較核心的(de)需求，★↕筆(bǐ)者這(zhè)裡(lǐ)再多(duō)說(shuō)一(yī)句，λ♠♦大(dà)型項目在系統複雜(zá)度、UI複雜(zá↕φ)度、動畫(huà)顯示數(shù)量和(hé)種類等方面與小(xiǎo)××>↓型遊戲項目完全不(bù)在一(yī)個(gè)量級。會(huì)涉及到₩♥♥₽(dào)比小(xiǎo)遊戲更複雜(zá↕✘)的(de)性能(néng)優化(huà)、內(nèi)存管理(lǐ)、資源管σφ≠理(lǐ)等需求，如(rú)果選擇了(le)✘↑↕↕小(xiǎo)馬拉大(dà)車(chē)的(de)低(dī)性能★<(néng)引擎，項目夭折可(kě)能(nén↑≤₹g)性非常大(dà)，除非較後項目開(kāi)發者花(huσ₩±ā)大(dà)量時(shí)間(jiān)自 ♠(zì)己優化(huà)引擎。所以性能(néng)•©>&差一(yī)點，就(jiù)會(huì)導緻結果差很(hěn)多(dΩ¥γuō)，不(bù)可(kě)主觀想象。

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

　　随著(zhe)H5遊戲品質提升，在其他(tā)領域也(yě)具備一(♣®αyī)定的(de)競争力和(hé)價值，一(yī)次開(kāσΩ₽σi)發可(kě)發行(xíng)各個(gè)領域版本£π₽，已成為(wèi)日(rì)漸明(míng)确的(de♠≥♣)需求，這(zhè)裡(lǐ)面包括發行(xíng)原≤≥•★生(shēng)APP手遊和(hé)PC的(de)fα‍εlash頁遊需求，大(dà)統一(yī)的(de)σ÷±$引擎時(shí)代即将來(lái)領。目前較火(huǒ)​™₩÷爆的(de)H5遊戲《傳奇世界H5》據說(shuō)有←↑★©(yǒu)40%的(de)收入來(lái)自(zì)PC網π∑頁。

　　發布PC頁遊時(shí)，由于PC浏覽器(qì)目前×∏≤對(duì)HTML5兼容性不(bù)足70%，用(yòng)戶¶¶§損耗很(hěn)大(dà)，頁遊聯運平台≥∞可(kě)能(néng)會(huì)拒絕或放(fàn'★​​g)量很(hěn)少(shǎo)，隻有(yǒu)采用(yòng)能(n饶γ∑ng)同時(shí)發布Flash版本的(de)引∑ ‍擎，才能(néng)解決這(zhè)個(gè)問(wèn)題。

　　5、設計(jì)理(lǐ)念與定位

　　設計(jì)理(lǐ)念是(shì)個(gè)比較♦γ☆©大(dà)的(de)話(huà)題，也(yě)是(shì)個(g €$δè)很(hěn)重要(yào)的(de)引∑®擎選擇因素，比如(rú)引擎是(shì)要(yào)專∞$注移動端，還(hái)是(shì)要(yào)面向全平台多(duō)端 ‌φ遊戲市(shì)場(chǎng)。是(shì)注重性能(néng)，還(há ←☆i)是(shì)注重工(gōng)具鏈等等。深入了(le)解不(bù)同引€ 擎的(de)理(lǐ)念與定位，才能(néng♦¥♥)更好(hǎo)的(de)與遊戲産品進行(xí✔δ<ng)結合。

　　上(shàng)圖內(nèi)容僅作(zuò)參考，詳情σ×建議(yì)去(qù)各引擎官網深入了(le)解。

　　6、工(gōng)作(zuò)流支持力度

　　作(zuò)為(wèi)商業(yè)級開(kāi)源∞♠β引擎，工(gōng)具鏈的(de)提供與支持也(yě)是(shì)一♥δ₹£(yī)種選擇考量要(yào)素，比如(rú)UI編 ₽φ輯器(qì)、粒子(zǐ)編輯器(qì)、骨骼編輯器(qì)、場(chǎng™>)景編輯器(qì)等等，如(rú)果引擎方直↓✘α接提供或支持，那(nà)麽将會(huì)較大(Ω׶dà)的(de)提升研發效率。

　　本文(wén)中提到(dào)的(de)7↕↓個(gè)引擎，隻有(yǒu)Egret、Layabox、Cocos2d-J α‍×S這(zhè)三個(gè)引擎，在工(g‍≤±ōng)具鏈方面提供足夠全面的(de)支撐。

　　7、是(shì)否有(yǒu)成熟的(de)商業(yè)案↔ ↔例

　　怎麽證明(míng)引擎是(shì)成熟的(de)?一(yī)定要(>γyào)有(yǒu)成熟的(de)商業(yè)案例，一(yī)般≥ 引擎的(de)官網上(shàng)都(d∏♣ ōu)會(huì)有(yǒu)遊戲案例介紹，我們在∏÷¶γ選擇引擎之前要(yào)進行(xíng)深入體(tǐ)驗，∏™♣₹包括：商業(yè)案例的(de)數(shù)量、商業(↑Ωyè)案例的(de)種類、穩定性、流暢度(要(yà☆γσ o)在低(dī)端機(jī)裡(lǐ)體(tǐ)驗)、項目複雜(z <♣á)度、項目相(xiàng)似度等。如(rú)₽÷果有(yǒu)一(yī)些(xiē)大(dà)型成功案例背書(shū)會‌¶(huì)相(xiàng)對(duì)安全可(kě)靠些(xiē)。

　　從(cóng)目前的(de)行(xí≈≈ng)業(yè)案例來(lái)看(kàn)，L ★'ayabox引擎的(de)MMORPG《醉西(xī)遊♥✘》、重度動作(zuò)遊戲《獵刃2》、大(dà)型模拟δ↔ ₹經營遊戲《夢幻家(jiā)園》等無疑是(♦​shì)H5引擎技(jì)術(shù)的(d‌π•↔e)較高(gāo)水(shuǐ)準代表作(z'®uò)。但(dàn)是(shì)從(cóng)卡牌、挂機(jī)等類型的(¶‍±≥de)付費(fèi)遊戲總體(tǐ)數(shù)量來(δ≤Ωεlái)看(kàn)，Egret引擎明(míng)顯占優，充分(fēn)說(s↔↑huō)明(míng)該引擎的(de)市(shì)場(chǎng)宣©☆傳力度更勝一(yī)籌。

　　8、學習(xí)資源與技(jì)術(shù)支持能(néng)Ω₹力

　　能(néng)提供什(shén)麽樣的(de)學習(xí)資源，以及技(' ♠‌jì)術(shù)支持，對(duì)于開(kā<≤→≠i)發者也(yě)是(shì)重要(yào)因素<"£÷，如(rú)果你(nǐ)是(shì)技(jì)術(shùπ&§)大(dà)牛，隻想使用(yòng)輕量的(de)第三方渲染♥♣¶♥內(nèi)核。那(nà)麽2D遊戲，pixi.$✘β→js無疑是(shì)首選。3D遊戲，筆(bǐ)者推薦Three.j≥∏∑∏s。但(dàn)是(shì)這(zhè)兩§&種引擎的(de)學習(xí)資料都(dōu)比較₽★"‌稀少(shǎo)。筆(bǐ)者認為(wèi)學習(xí)資料的<★★(de)完善，以及在學習(xí)過程中的(de)技(jì)術​♣€(shù)支持力度，将會(huì)很(hσ↔$∏ěn)大(dà)的(de)幫助你(nǐ)解決引擎使用(yòn¥¶g)中的(de)問(wèn)題。所以，API完善，DEMO完善，文(wéΩεαεn)檔完善，社區(qū)的(de)響應速度，交流氛圍，以及QQ技(jì)術(sγ"≥hù)支持等，都(dōu)可(kě)以作(zuò)★‍✔✔為(wèi)你(nǐ)選擇引擎的(de)因素考量之一(yī)。

　　9、頁遊移植産品的(de)引擎選擇

　　目前像《醉西(xī)遊》等優秀H5産品是​→ (shì)Flash頁遊或手遊移植而成，移植類的(de)産品在±÷選用(yòng)引擎時(shí)要(yào)注意，代碼是(shì)₽£∞否可(kě)以直接移植?如(rú)果可(kě)以，那(nà)将節省大(dà)↔∏ 量的(de)開(kāi)發成本。比如(rú)F≥&lash AS3開(kāi)發的(de)2D或3D頁遊或手遊λε♥☆，可(kě)以把邏輯與算(suàn)法代碼直接拷貝移植βα€到(dào)Layabox引擎項目中，開(kā∏​→ i)發速度提高(gāo)數(shù)倍。

　　寫在較後：較後提醒一(yī)下(xià)，千萬不φ®↑(bù)要(yào)相(xiàng)信某些(x&×→‌iē)引擎的(de)單方宣傳，一(yī)定要(yào)花(huā∏→£)一(yī)點時(shí)間(jiān)去(qù)研究實踐，親自(z×π ≤ì)制(zhì)作(zuò)DEMO去(q★βù)作(zuò)一(yī)作(zuò)對™✘₩(duì)比，動手體(tǐ)驗到(dào)的(de)才是(shì)真理(lǐ)↕λ。

　　針對(duì)DEMO測試筆(bǐ)者有(‍←"yǒu)幾點建議(yì)：

　　1、采用(yòng)一(yī)個(gè)複雜(zá)的§©'δ(de)UI，特别是(shì)複雜(zá)列表，比如(rú)說Ω∑¶(shuō)沒有(yǒu)分(fēn)頁的(de)背包列φ±表，背包裡(lǐ)放(fàng)上(shàng)不(bù)同的★§(de)道(dào)具圖片，測試滑動時(shí)的(∑ €∑de)流暢度，這(zhè)塊比較考驗性能(néng)，元素越複雜(zá)，數← ‌±(shù)據越多(duō)，尤其能(néng)對(duì)比出來(lái >$©)性能(néng)上(shàng)的(de)差異。

　　2、包含較複雜(zá)戰鬥部分(fēn)，不(bù)要(yàεαo)寫戰鬥邏輯代碼，不(bù)然會(huλ↓₩♣ì)花(huā)的(de)時(shí)間(jiān)太長(ch £×áng)，隻需要(yào)把戰鬥相(xiàng)關的(de)動畫(h★∞uà)和(hé)複雜(zá)的(de)元素放(fàng)在場(chǎng§♠♥)景中模拟即可(kě)，因為(wèi)H5遊戲性§$↔能(néng)瓶頸通(tōng)常在于畫®≈₹​(huà)面的(de)顯示。

　　3、 測試主要(yào)目的(de)是(shì)看(kàn≥₹)項目在引擎中性能(néng)，這(zhè)是(shì)較至≥φ&↑關重要(yào)的(de)，所以，硬件(j₹<iàn)上(shàng)，我們要(yào)選擇δ‍低(dī)端安卓手機(jī)(比如(rú)紅(hó€λ≈ng)米)進行(xíng)測試。軟件(jiàn)環境建議(≠♦£¶yì)使用(yòng)微(wēi)信環境測試，首先，因為(φ©wèi)微(wēi)信公衆号是(shì)H5的(de)主要(y★₹ào)渠道(dào)之一(yī)，其次，微(w→→ēi)信當前的(de)H5性能(néng)∏÷©☆低(dī)于chrome浏覽器(qì)，在惡劣的(de)環境下(↔¥ ®xià)更能(néng)測試引擎的(de)優劣。