前言
很多剛剛接觸到游戲開發(fā)，準(zhǔn)備大展拳腳的小鮮肉們，往往在技術(shù)選型這第一關(guān)就栽了跟頭。畢竟網(wǎng)絡(luò)上的游戲引擎良莠不齊，官網(wǎng)上相關(guān)資料也比較少，而選擇一個(gè)適合的游戲引擎是一個(gè)項(xiàng)目最基礎(chǔ)，也是很核心的一部分。
試想一下，在游戲開發(fā)進(jìn)行到中后期的時(shí)候，才發(fā)現(xiàn)項(xiàng)目引入的游戲引擎與需求相悖，這時(shí)候不管是重新做一些修修補(bǔ)補(bǔ)的工作或者更換游戲引擎，這都是相當(dāng)耗費(fèi)人力物力的一件事。為了避免這種情況的出現(xiàn)，在前期選擇適合項(xiàng)目需求的游戲引擎顯得尤為重要。
接下來我們來聊一聊如何去選擇適合項(xiàng)目的 JS 游戲引擎。
在剛接到游戲需求時(shí)，我們可以從以下幾個(gè)方面進(jìn)行考量，分析出游戲需求場(chǎng)景所屬，從而作為我們選擇游戲引擎的依據(jù)。
游戲效果呈現(xiàn)方式（ 2D ？ 3D ？ VR ？）
這與游戲引擎能夠支持的渲染方式直接掛鉤。現(xiàn)在的 H5 游戲渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三種。
而 2D 渲染一般也有三種：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因，一般只適合做一些動(dòng)畫效果較少，交互較少的小游戲，本文主要針對(duì) Canvas 和 WebGL 展開介紹。
一般來說，對(duì)于 2D 小游戲來說，Canvas 渲染已經(jīng)足夠。然而 Canvas 渲染由于底層封裝層次多，不足以支撐起大型游戲的性能要求，因此大型游戲最好選擇 WebGL 渲染或者瀏覽器內(nèi)嵌 Runtime 。
游戲復(fù)雜度
這與游戲引擎能夠支持的功能，提供的API，性能等方面關(guān)系比較大。
筆者從業(yè)界較流行的一些框架，進(jìn)行以下幾個(gè)方面對(duì)比，希望能從客觀數(shù)據(jù)上給大家的技術(shù)選型帶來建議和參考。
引擎支持的渲染方式
github上的 star 數(shù)
更新時(shí)間
文檔詳細(xì)度
周邊產(chǎn)品
2D，3D，VR 都支持的游戲引擎
Egret 周邊產(chǎn)品
白鷺引擎是企業(yè)級(jí)游戲引擎，有團(tuán)隊(duì)維護(hù)。Egret 在工作流的支持上做的是比較好的，從 Wing 的代碼編寫，到 ResDepot 和 TextureMerger 的資源整合，再到 Inspector 調(diào)試，最后到原生打包（支持 APP 打包），游戲開發(fā)過程中的每個(gè)環(huán)節(jié)基本都有工具支撐。官網(wǎng)上的示例，教程也是比較多。值得一提的是，今年5月白鷺引擎支持了 WebAssembly ，這對(duì)于性能的提升又是一大里程碑。
在渲染模式上，LayaAir 支持 Canvas 和 WebGL 兩種方式；在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代碼模式與設(shè)計(jì)模式，支持代碼開發(fā)與美術(shù)設(shè)計(jì)分離，內(nèi)置了 SWF 轉(zhuǎn)換、圖集打包、JS 壓縮與加密、APP 打包、Flash 發(fā)布等實(shí)用功能。
一般來說，WebGL 的渲染速度都會(huì)比 Canvas 快，這是由倆者的繪制路徑?jīng)Q定的。Pixi 最大的特點(diǎn)在于，Pixi 具有完整的 WebGL 支持，卻并不要求開發(fā)者掌握 WebGL 的相關(guān)知識(shí)，并在需要時(shí)無縫地回退到 Canvas 。相較于很多同類產(chǎn)品，它的渲染能力是比較強(qiáng)大的。然而，Pixi 也有不足的地方，Pixi 對(duì)于動(dòng)畫的支持是比較缺乏的，在實(shí)際開發(fā)中，常常需要引進(jìn)額外的動(dòng)畫庫，如 GSAP。
Phaser 在渲染方面直接封裝了 Pixi；架構(gòu)方面，Phaser 內(nèi)嵌了3個(gè)物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系統(tǒng)、動(dòng)畫、預(yù)下載和設(shè)備適配方案；兼容性方面，Phaser 的焦點(diǎn)是放在移動(dòng)端瀏覽器上的；API 方面，Phaser 能實(shí)現(xiàn)豐富的游戲功能，適合復(fù)雜度高的游戲開發(fā)。
CreateJs 周邊產(chǎn)品
CreateJS 官方提供了 TweenJS 支持動(dòng)畫開發(fā)，同時(shí)通過 SoundJS 和 PreLoadJS 提供了音頻和預(yù)下載的支持，對(duì)于 H5 游戲基礎(chǔ)功能的支持是足夠的。在兼容性方面，CreateJS 支持 PC 端和移動(dòng)端幾乎所有的瀏覽器。此外，CreateJS 還支持用 flash CC 開發(fā)導(dǎo)出由 CreateJS 渲染的 H5 游戲。
Hilo 是阿里團(tuán)隊(duì)推出的一個(gè)開源項(xiàng)目，支持模塊化開發(fā)，同時(shí)提供了多種模塊范式的包裝版本和跨終端解決方案，適合用來開發(fā)營銷小游戲。其體積也是比較輕量的，只有70kb左右。Hilo 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染，同時(shí)集成了 Hilo Audio， Hilo Preload。其后推出的 Hilo 3D 也是其亮點(diǎn)之一。
Cocos2d-x 是業(yè)界比較老牌的游戲引擎了，同時(shí)支持 C++ ，Lua 和 JavaScript 三種開發(fā)語言，官方用例來看更傾向于 C++ 開發(fā)，適合做一些中大型游戲開發(fā)。Cocos2d-x 提供 Cocos Creator 游戲開發(fā)工具，組件化，腳本化，數(shù)據(jù)驅(qū)動(dòng)，跨平臺(tái)發(fā)布。
lufylegend.js 的最新更新是在16年，不過其社區(qū)還是十分活躍的，如果遇到什么開發(fā)問題，可以很方便地在社區(qū)上找到解決的方案。lufylegend.js 可以支持基礎(chǔ)的游戲功能，但是其可拓展性不是很強(qiáng)。
相信對(duì)于很多有關(guān)注 3D 游戲的開發(fā)者來說，Three.js 早已經(jīng)耳熟能詳了。實(shí)際上，Three.js 官方定位并不是游戲引擎，而是一個(gè) JS 3D 庫。Three.js 更傾向于展示型的視覺呈現(xiàn)，比較少直接拿 Three.js 來開發(fā) H5 游戲。渲染環(huán)境上，Three.js 支持 WebGL 和 CSS3D 兩種渲染模式。
從渲染支持程度來看，PlayCanvas 不僅支持 3D WebGL渲染，同時(shí)保持到 VR 的支持，擁有比較好的拓展性。在工具流的支持上，提供了在線編輯器和發(fā)布托管等服務(wù)。從官方教程上看，教程也是比較詳細(xì)的。
現(xiàn)在市場(chǎng)上的 H5游戲引擎很多，很難去直接定義哪個(gè)引擎的好壞，只能說每個(gè)引擎都有自己的特性，在某方面跟項(xiàng)目的契合程度比較高，筆者根據(jù)現(xiàn)在市場(chǎng)上比較熱門的幾大引擎做了幾點(diǎn)比較，希望能給剛?cè)腴T的你做技術(shù)選型的時(shí)候有一點(diǎn)幫助，找到適合項(xiàng)目的引擎，更快、更準(zhǔn)、更高效率地完成項(xiàng)目需求。
