H5遊戲開發：遊戲引擎入門推薦

前言

很多剛剛接觸到遊戲開發，準備大展拳腳的小鮮肉們，往往在技術選型這第一關就栽了跟頭。畢竟網絡上的遊戲引擎良莠不齊，官網上相關資料也比較少，而選擇一個適合的遊戲引擎是一個項目最基礎，也是很核心的一部分。
試想一下，在遊戲開發進行到中後期的時候，才發現項目引入的遊戲引擎與需求相悖，這時候不管是重新做一些修修補補的工作或者更換遊戲引擎，這都是相當耗費人力物力的一件事。爲了避免這種情況的出現，在前期選擇適合項目需求的遊戲引擎顯得尤爲重要。
接下來我們來聊一聊如何去選擇適合項目的 JS 遊戲引擎。

遊戲場景分類

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

遊戲效果呈現方式（ 2D ？ 3D ？ VR ？）
這與遊戲引擎能夠支持的渲染方式直接掛鉤。現在的 H5 遊戲渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三種。
而 2D 渲染一般也有三種：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由於性能原因，一般只適合做一些動畫效果較少，交互較少的小遊戲，本文主要針對 Canvas 和 WebGL 展開介紹。
一般來說，對於 2D 小遊戲來說，Canvas 渲染已經足夠。然而 Canvas 渲染由於底層封裝層次多，不足以支撐起大型遊戲的性能要求，因此大型遊戲最好選擇 WebGL 渲染或者瀏覽器內嵌 Runtime 。
遊戲複雜度
這與遊戲引擎能夠支持的功能，提供的API，性能等方面關係比較大。

遊戲引擎推薦

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

引擎支持的渲染方式
github上的 star 數
更新時間
文檔詳細度
周邊產品

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

name	2D渲染（Canvas）	2D渲染(WebGL)	3D渲染（WebGL）	VR	github star 數	文檔詳細程度	周邊產品	備註
Egret	YES	YES	YES	YES	2k（最新更新2017.12）	▪ 有中文文檔 ▪ 例子充足 ▪ 社區活躍	遊戲開發過程中的每個環節基本都有工具支撐。	不僅僅提供了一個基於HTML5技術的遊戲引擎，更是提供了原生打包工具和衆多周邊產品
LayaAir	YES	YES（優先）	YES	YES	0.7k（最新更新2017.12）	▪ 有中文文檔 ▪ 例子充足 ▪ 社區活躍	提供開發工具和可視化編輯器	支持2D、3D、VR，能開發超大遊戲，forgame的醉西遊，騰訊的QQ農場，樂動卓越的浪漫h5這些大作就是用它開發

Egret

Egret 周邊產品

白鷺引擎是企業級遊戲引擎，有團隊維護。Egret 在工作流的支持上做的是比較好的，從 Wing 的代碼編寫，到 ResDepot 和 TextureMerger 的資源整合，再到 Inspector 調試，最後到原生打包（支持 APP 打包），遊戲開發過程中的每個環節基本都有工具支撐。官網上的示例，教程也是比較多。值得一提的是，今年5月白鷺引擎支持了 WebAssembly ，這對於性能的提升又是一大里程碑。

LayaAir

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

下圖是主要支持2D遊戲的遊戲引擎

name	2D渲染（Canvas）	2D渲染(WebGL)	3D渲染（WebGL）	VR	github star 數	文檔詳細程度	周邊產品	備註
Pixi.js	YES	YES	NO	NO	16.8k(最新更新2017.12)	▪ 英文文檔 ▪ 例子充足 ▪ 英文社區	無	依賴於canvas的WebGL渲染器
Phaser	YES	YES	NO	NO	16.9k（最新更2017.07）	▪ 英文文檔 ▪ 例子充足 ▪ 英文社區	提供在線編輯器Phaser Sandbox
CreateJs	YES	YES	NO	NO	6.5k（最新更新2017.12）	▪ 英文文檔 ▪ 例子充足 ▪ 有博客	無	官方推薦TweenJS，SoundJS，PreloadJS配合使用
Hilo	YES	YES	YES(Hilo3D)	NO	4.2k（最新更新2017.12）	▪ 有中文文檔 ▪ 例子充足	提供資源下載和管理工具	阿里巴巴集團推出，適合開發營銷小遊戲，以Chipmunk爲2D物理引擎，與主流物理引擎兼容
Cocos2d-x	YES	YES	NO	NO	11.2k（最新更新2017.12）	▪ 有中文文檔 ▪ js例子不多，c++例子較多 ▪ 社區活躍	Cocos Creator編輯器，打包工具等	提供的功能相當完整
lufylegend.js	YES	NO	NO	NO	0.4k（最新更新2016.03）	▪ 有中文文檔 ▪ 社區活躍	無	仿ActionScript3.0的語法，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多種熱門環境，可以配合Box2dWeb製作物理遊戲，內置了LTweenLite緩動類等

Pixi.js

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

Phaser

Phaser 在渲染方面直接封裝了 Pixi；架構方面，Phaser 內嵌了3個物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系統、動畫、預下載和設備適配方案；兼容性方面，Phaser 的焦點是放在移動端瀏覽器上的；API 方面，Phaser 能實現豐富的遊戲功能，適合複雜度高的遊戲開發。

CreateJS

CreateJs 周邊產品

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

Hilo

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

Cocos2d-x

Cocos2d-x 是業界比較老牌的遊戲引擎了，同時支持 C++ ，Lua 和 JavaScript 三種開發語言，官方用例來看更傾向於 C++ 開發，適合做一些中大型遊戲開發。Cocos2d-x 提供 Cocos Creator 遊戲開發工具，組件化，腳本化，數據驅動，跨平臺發佈。

lufylegend.js

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

主要支持3D遊戲的遊戲引擎

name	2D渲染（Canvas）	2D渲染(WebGL)	3D渲染（WebGL）	VR	github star 數	文檔詳細程度	周邊產品	備註
Three.js	NO	NO	YES（傾向）	NO	37.6k（最新更新2017.12）	▪ 英文文檔 ▪ 例子充足 ▪ 英文社區	無	默認Ammo.js爲默認物理引擎，基於JavaScript語言的3D庫，耗性能，加載慢，效果一般
PlayCanvas	NO	NO	YES	YES	3k（最新更新2017.12）	▪ 英文文檔 ▪ 例子充足 ▪ 英文社區	提供了在線編輯器，發佈託管等	教程較爲詳細，入門快

Three.js

Three.js 示例案例

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