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 支援 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緩動類等 |
一般來說，WebGL 的渲染速度都會比 Canvas 快，這是由倆者的繪製路徑決定的。Pixi 最大的特點在於，Pixi 具有完整的 WebGL 支援，卻並不要求開發者掌握 WebGL 的相關知識，並在需要時無縫地回退到 Canvas 。相較於很多同類產品，它的渲染能力是比較強大的。然而，Pixi 也有不足的地方，Pixi 對於動畫的支援是比較缺乏的，在實際開發中，常常需要引進額外的動畫庫，如 GSAP。
Phaser 在渲染方面直接封裝了 Pixi；架構方面，Phaser 內嵌了3個物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系統、動畫、預下載和裝置適配方案；相容性方面，Phaser 的焦點是放在移動端瀏覽器上的；API 方面，Phaser 能實現豐富的遊戲功能，適合複雜度高的遊戲開發。
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 是業界比較老牌的遊戲引擎了，同時支援 C++ ，Lua 和 JavaScript 三種開發語言，官方用例來看更傾向於 C++ 開發，適合做一些中大型遊戲開發。Cocos2d-x 提供 Cocos Creator 遊戲開發工具，元件化，指令碼化，資料驅動，跨平臺釋出。
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 示例案例
相信對於很多有關注 3D 遊戲的開發者來說，Three.js 早已經耳熟能詳了。實際上，Three.js 官方定位並不是遊戲引擎，而是一個 JS 3D 庫。Three.js 更傾向於展示型的視覺呈現，比較少直接拿 Three.js 來開發 H5 遊戲。渲染環境上，Three.js 支援 WebGL 和 CSS3D 兩種渲染模式。
從渲染支援程度來看，PlayCanvas 不僅支援 3D WebGL渲染，同時保持到 VR 的支援，擁有比較好的拓展性。在工具流的支援上，提供了線上編輯器和釋出託管等服務。從官方教程上看，教程也是比較詳細的。
結語
現在市場上的 H5遊戲引擎很多，很難去直接定義哪個引擎的好壞，只能說每個引擎都有自己的特性，在某方面跟專案的契合程度比較高，筆者根據現在市場上比較熱門的幾大引擎做了幾點比較，希望能給剛入門的你做技術選型的時候有一點幫助，找到適合專案的引擎，更快、更準、更高效率地完成專案需求。
感謝各位耐心讀完，希望能有所收穫，有考慮不足的地方歡迎留言指出。
如果對「H5遊戲開發」感興趣，歡迎關注我們的專欄。