試想一下，在游戲開發(fā)進行到中后期的時候，才發(fā)現(xiàn)項目引入的游戲引擎與需求相悖，這時候不管是重新做一些修修補補的工作或者更換游戲引擎，這都是相當(dāng)耗費人力物力的一件事。為了避免這種情況的出現(xiàn)，在前期選擇適合項目需求的游戲引擎顯得尤為重要。

　　接下來我們來聊一聊如何去選擇適合項目的 JS 游戲引擎。

游戲場景分類

　　在剛接到游戲需求時，我們可以從以下幾個方面進行考量，分析出游戲需求場景所屬，從而作為我們選擇游戲引擎的依據(jù)。

游戲效果呈現(xiàn)方式（ 2D ？ 3D ？ VR ？）

　　這與游戲引擎能夠支持的渲染方式直接掛鉤。現(xiàn)在的 H5 游戲渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三種。

　　而 2D 渲染一般也有三種：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因，一般只適合做一些動畫效果較少，交互較少的小游戲，本文主要針對 Canvas 和 WebGL 展開介紹。

　　一般來說，對于 2D 小游戲來說，Canvas 渲染已經(jīng)足夠。然而 Canvas 渲染由于底層封裝層次多，不足以支撐起大型游戲的性能要求，因此大型游戲最好選擇 WebGL 渲染或者瀏覽器內(nèi)嵌 Runtime 。

游戲復(fù)雜度

　　這與游戲引擎能夠支持的功能，提供的API，性能等方面關(guān)系比較大。

游戲引擎推薦

　　筆者從業(yè)界較流行的一些框架，進行以下幾個方面對比，希望能從客觀數(shù)據(jù)上給大家的技術(shù)選型帶來建議和參考。

引擎支持的渲染方式

　　github上的 star 數(shù)

　　更新時間

　　文檔詳細度

　　周邊產(chǎn)品

2D，3D，VR 都支持的游戲引擎

　　Egret

　　Egret 周邊產(chǎn)品

　　白鷺引擎是企業(yè)級游戲引擎，有團隊維護。Egret 在工作流的支持上做的是比較好的，從 Wing 的代碼編寫，到 ResDepot 和 TextureMerger 的資源整合，再到 Inspector 調(diào)試，最后到原生打包(支持 APP 打包)，游戲開發(fā)過程中的每個環(huán)節(jié)基本都有工具支撐。官網(wǎng)上的示例，教程也是比較多。值得一提的是，今年5月白鷺引擎支持了 WebAssembly ，這對于性能的提升又是一大里程碑。

　　LayaAir

　　在渲染模式上，LayaAir 支持 Canvas 和 WebGL 兩種方式;在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代碼模式與設(shè)計模式，支持代碼開發(fā)與美術(shù)設(shè)計分離，內(nèi)置了 SWF 轉(zhuǎn)換、圖集打包、JS 壓縮與加密、APP 打包、Flash 發(fā)布等實用功能。

　　Pixi.js

　　一般來說，WebGL 的渲染速度都會比 Canvas 快，這是由倆者的繪制路徑?jīng)Q定的。Pixi 最大的特點在于，Pixi 具有完整的 WebGL 支持，卻并不要求開發(fā)者掌握 WebGL 的相關(guān)知識，并在需要時無縫地回退到 Canvas 。相較于很多同類產(chǎn)品，它的渲染能力是比較強大的。然而，Pixi 也有不足的地方，Pixi 對于動畫的支持是比較缺乏的，在實際開發(fā)中，常常需要引進額外的動畫庫，如 GSAP。

　　Phaser

　　Phaser 在渲染方面直接封裝了 Pixi;架構(gòu)方面，Phaser 內(nèi)嵌了3個物理引擎(Arcade Physics、Ninja、p2.js)，提供粒子系統(tǒng)、動畫、預(yù)下載和設(shè)備適配方案;兼容性方面，Phaser 的焦點是放在移動端瀏覽器上的;API 方面，Phaser 能實現(xiàn)豐富的游戲功能，適合復(fù)雜度高的游戲開發(fā)。

　　CreateJS

　　CreateJs 周邊產(chǎn)品

　　CreateJS 官方提供了 TweenJS 支持動畫開發(fā)，同時通過 SoundJS 和 PreLoadJS 提供了音頻和預(yù)下載的支持，對于 H5 游戲基礎(chǔ)功能的支持是足夠的。在兼容性方面，CreateJS 支持 PC 端和移動端幾乎所有的瀏覽器。此外，CreateJS 還支持用 flash CC 開發(fā)導(dǎo)出由 CreateJS 渲染的 H5 游戲。

　　Hilo

　　Hilo 是阿里團隊推出的一個開源項目，支持模塊化開發(fā)，同時提供了多種模塊范式的包裝版本和跨終端解決方案，適合用來開發(fā)營銷小游戲。其體積也是比較輕量的，只有70kb左右。Hilo 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染，同時集成了 Hilo Audio， Hilo Preload。其后推出的 Hilo 3D 也是其亮點之一。

　　Cocos2d-x

　　Cocos2d-x 是業(yè)界比較老牌的游戲引擎了，同時支持 C++ ，Lua 和 JavaScript 三種開發(fā)語言，官方用例來看更傾向于 C++ 開發(fā)，適合做一些中大型游戲開發(fā)。Cocos2d-x 提供 Cocos Creator 游戲開發(fā)工具，組件化，腳本化，數(shù)據(jù)驅(qū)動，跨平臺發(fā)布。

　　lufylegend.js

　　lufylegend.js 的最新更新是在16年，不過其社區(qū)還是十分活躍的，如果遇到什么開發(fā)問題，可以很方便地在社區(qū)上找到解決的方案。lufylegend.js 可以支持基礎(chǔ)的游戲功能，但是其可拓展性不是很強。

　　Three.js

　　相信對于很多有關(guān)注 3D 游戲的開發(fā)者來說，Three.js 早已經(jīng)耳熟能詳了。實際上，Three.js 官方定位并不是游戲引擎，而是一個 JS 3D 庫。Three.js 更傾向于展示型的視覺呈現(xiàn)，比較少直接拿 Three.js 來開發(fā) H5 游戲。渲染環(huán)境上，Three.js 支持 WebGL 和 CSS3D 兩種渲染模式。

　　PlayCanvas

　　從渲染支持程度來看，PlayCanvas 不僅支持 3D WebGL渲染，同時保持到 VR 的支持，擁有比較好的拓展性。在工具流的支持上，提供了在線編輯器和發(fā)布托管等服務(wù)。從官方教程上看，教程也是比較詳細的。

　　結(jié)語

　　現(xiàn)在市場上的 H5游戲引擎很多，很難去直接定義哪個引擎的好壞，只能說每個引擎都有自己的特性，在某方面跟項目的契合程度比較高，筆者根據(jù)現(xiàn)在市場上比較熱門的幾大引擎做了幾點比較，希望能給剛?cè)腴T的你做技術(shù)選型的時候有一點幫助，找到適合項目的引擎，更快、更準、更高效率地完成項目需求。