北(běi)京軟件(jiàn)開(kāi)發公司如(rú)何選擇HTML5遊戲開(kāi)發引擎，原生(shēng'‌₽)手遊市(shì)場(chǎng)已是(shì)紅(hóng)海(hǎ×<i)、騰訊、網易等寡頭獨霸天下(xià)，H5遊戲市(shì)場(chǎn•λg)或将成為(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íng)了(le)精心的(de)篩選，過濾掉不(bù)支♣↕‌持webGL的(de)引擎，以及封裝了(le)第三方渲染✘♦內(nèi)核的(de)JS框架，和(hé)不(bù)能(nén₩¶g)直接在浏覽器(qì)中運行(xíng)的(de)JS引擎。

　　為(wèi)什(shén)麽要(yào)φα"過濾掉這(zhè)幾種呢(ne)，首先，沒有(yǒu)自(zì)己᧱的(de)渲染內(nèi)核，僅僅是(shì)基于第三方的(de)♥≠≤內(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)webGL模式，認為(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ì)作(z€✘÷¥uò)2D和(hé)3D遊戲，Canvas和(hé)DOM模式下(xià)隻能(néng) >'♠制(zhì)作(zuò)2D遊戲。

　　第三、普及率，webGL的(de)普及率已經非常高(gāo)了(le)，尤其是(shì)支‌✘持webGL的(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)'§★……

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

　　擁有(yǒu)廣泛開(kāi)發者的(de)H5遊戲開(kāi)發Ω ₹語言共有(yǒu)三種，分(fēn)别為(wèi)Flash AS3、Typ >>→eScript、JavaScript。其中Flash AS3、Ty‍φ★peScript均屬于面向對(duì)象的 ‌(de)高(gāo)級腳本語言，通(tōng)過編譯器(qì)将原項目代碼編譯成Java↓>Script代碼文(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)Laya↔•÷↔box引擎推出的(de)，因此采用(yòng)AS3作(zuò)為(wèiδφ)開(kāi)發語言的(de)僅有(yǒ'ε€÷u)Layabox引擎。筆(bǐ)者建議(yì)在•πσ開(kāi)發中大(dà)型遊戲項目的(de)時(shí)候♠$☆，采用(yòng)TypeScript或者是(shì)F→∑lash AS3語言進行(xíng)開(kāi)發。如(rú)果是↓↔(shì)小(xiǎo)型遊戲，任選其一(yī)即可(kě)。

　　2、引擎的(de)未來(lái)延續能(nén≤•g)力

　　選擇一(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的(d☆¶$e)機(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遊戲面臨的(d ®★e)核心門(mén)檻，也(yě)是(shì)很(hěn)多(duō✔>α)H5遊戲不(bù)被專業(yè)玩(wán)家(jiā)>׶×認可(kě)的(de)重要(yào)原因之一(yī♦≠₹)。遊戲卡頓，不(bù)流暢，這(zhè)樣的(d£☆e)産品體(tǐ)驗很(hěn)難在激烈競争中生(shēng)存'♥下(xià)來(lái)。

　　H5産業(yè)早期的(de)普及階段即将過去‍δ↔(qù)，遊戲品質在迅速提高(gāo)，品質中包括精細的(de)美(měi)術(shù)‌≥↕和(hé)炫酷的(de)動畫(huà)等。在複雜(zá)的(de)遊戲項目面前，上(shàπ↔ng)述種種元素，其流暢體(tǐ)驗度對<↔(duì)遊戲引擎是(shì)極大(dà)的(de)考驗。所以選擇性能(n™σéng)優秀的(de)引擎是(shì)保證品質的(d♠♦€e)最重要(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éng)上(shàng)的₩↑≤(de)需求，可(kě)能(néng)會(huì)帶來(lái)眩暈、眼花(huā)、疲倦等不(£$bù)良體(tǐ)驗。

　　在webGL的(de)2D渲染性能(néng)方面，pixi.js的(de)λ©"性能(néng)處于當前的(de)頂級。在webGL的(de)3D渲 ®§染性能(néng)方面，Three.js非常優秀。在rγ✔ untime方面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)D≤©EMO的(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éng)性非常大(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)fla"¥&sh頁遊需求，大(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àng)量很(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ě)是(s→€λhì)一(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-JS這(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àn±‍≥g)都(dōu)會(huì)有(yǒu)遊戲案例介紹，我們在選擇引♦₹擎之前要(yào)進行(xíng)深入體(tǐ)驗，包括：商業(yè)案例的(de)數(s₩→↕hù)量、商業(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)，Layabox引擎的(de)MMORPG《 <>醉西(xī)遊》、重度動作(zuò)遊戲《獵刃2★∏↔》、大(dà)型模拟經營遊戲《夢幻家(jiā) ≠ "園》等無疑是(shì)H5引擎技(jì)術(shù)的(de)最高(gāo)水(shuǐ)準代表作δ•>(zuò)。但(dàn)是(shì)從(cóng)卡牌、挂機(jī)÷∑等類型的(de)付費(fèi)遊戲總體(tǐ)數(shù)量來(lái)看(kàn)，Egret引←‌≠擎明(míng)顯占優，充分(fēn)說(shuō)明(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ě)是(s♦±±hì)重要(yào)因素，如(rú)果你(≈γ×>nǐ)是(shì)技(jì)術(shù)大(dà)牛，隻想使用(yòng)輕量的(→©★÷de)第三方渲染內(nèi)核。那(nà)麽2D ™®∞遊戲，pixi.js無疑是(shì)首選。3D遊戲，筆(bǐ)≠"者推薦Three.js。但(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òng)中的(de)問(wèn)題。所以，₹λ¶API完善，DEMO完善，文(wén)檔完善，社區(qū)的(dε♣←e)響應速度，交流氛圍，以及QQ技(jì)術(shù)支♥♥↑™持等，都(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ú)Flash AS3開(kāi)±‌≠☆發的(de)2D或3D頁遊或手遊，可(kě)>&以把邏輯與算(suàn)法代碼直接拷貝移植到(dào)Layabox引擎項目中₹ ，開(kāi)發速度提高(gāo)數(shù)≥α倍。

　　寫在最後：最後提醒一(yī)下(xià)，千萬不(bù)要(yào)相(xiàng)信某£>§些(xiē)引擎的(de)單方宣傳，一(yī)定要(yà®✘♣o)花(huā)一(yī)點時(shí)間(jiān)去(q↓∑™ù)研究實踐，親自(zì)制(zhì)作(zuò)DEMO去(qù)作(zuò)一(yī)作(z¥€ uò)對(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)動 σ≈§畫(huà)和(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)，所↔↑以，硬件(jiàn)上(shàng)，我們要(yào)選擇低(dī)端安卓手機‌$(jī)(比如(rú)紅(hóng)米)進行(xín±®g)測試。軟件(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ì)，在惡劣的(d÷☆¶≤e)環境下(xià)更能(néng)測試引擎的✔≠(de)優劣。