前言
很多剛剛接觸到游戲開發，准備大展拳腳的小鮮肉們，往往在技術選型這第一關就栽了跟頭。畢竟網絡上的游戲引擎良莠不齊，官網上相關資料也比較少，而選擇一個適合的游戲引擎是一個項目最基礎，也是很核心的一部分。
試想一下，在游戲開發進行到中后期的時候，才發現項目引入的游戲引擎與需求相悖，這時候不管是重新做一些修修補補的工作或者更換游戲引擎，這都是相當耗費人力物力的一件事。為了避免這種情況的出現，在前期選擇適合項目需求的游戲引擎顯得尤為重要。
接下來我們來聊一聊如何去選擇適合項目的 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 都支持的游戲引擎
白鷺引擎是企業級游戲引擎，有團隊維護。Egret 在工作流的支持上做的是比較好的，從 Wing 的代碼編寫，到 ResDepot 和 TextureMerger 的資源整合，再到 Inspector 調試，最后到原生打包（支持 APP 打包），游戲開發過程中的每個環節基本都有工具支撐。官網上的示例，教程也是比較多。值得一提的是，今年5月白鷺引擎支持了 WebAssembly ，這對於性能的提升又是一大里程碑。
在渲染模式上，LayaAir 支持 Canvas 和 WebGL 兩種方式；在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代碼模式與設計模式，支持代碼開發與美術設計分離，內置了 SWF 轉換、圖集打包、JS 壓縮與加密、APP 打包、Flash 發布等實用功能。
下圖是主要支持2D游戲的游戲引擎
一般來說，WebGL 的渲染速度都會比 Canvas 快，這是由倆者的繪制路徑決定的。Pixi 最大的特點在於，Pixi 具有完整的 WebGL 支持，卻並不要求開發者掌握 WebGL 的相關知識，並在需要時無縫地回退到 Canvas 。相較於很多同類產品，它的渲染能力是比較強大的。然而，Pixi 也有不足的地方，Pixi 對於動畫的支持是比較缺乏的，在實際開發中，常常需要引進額外的動畫庫，如 GSAP。
Phaser 在渲染方面直接封裝了 Pixi；架構方面，Phaser 內嵌了3個物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系統、動畫、預下載和設備適配方案；兼容性方面，Phaser 的焦點是放在移動端瀏覽器上的；API 方面，Phaser 能實現豐富的游戲功能，適合復雜度高的游戲開發。
CreateJS 官方提供了 TweenJS 支持動畫開發，同時通過 SoundJS 和 PreLoadJS 提供了音頻和預下載的支持，對於 H5 游戲基礎功能的支持是足夠的。在兼容性方面，CreateJS 支持 PC 端和移動端幾乎所有的瀏覽器。此外，CreateJS 還支持用 flash CC 開發導出由 CreateJS 渲染的 H5 游戲。
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游戲的游戲引擎
相信對於很多有關注 3D 游戲的開發者來說，Three.js 早已經耳熟能詳了。實際上，Three.js 官方定位並不是游戲引擎，而是一個 JS 3D 庫。Three.js 更傾向於展示型的視覺呈現，比較少直接拿 Three.js 來開發 H5 游戲。渲染環境上，Three.js 支持 WebGL 和 CSS3D 兩種渲染模式。
PlayCanvas
從渲染支持程度來看，PlayCanvas 不僅支持 3D WebGL渲染，同時保持到 VR 的支持，擁有比較好的拓展性。在工具流的支持上，提供了在線編輯器和發布托管等服務。從官方教程上看，教程也是比較詳細的。
現在市場上的 H5游戲引擎很多，很難去直接定義哪個引擎的好壞，只能說每個引擎都有自己的特性，在某方面跟項目的契合程度比較高，筆者根據現在市場上比較熱門的幾大引擎做了幾點比較，希望能給剛入門的你做技術選型的時候有一點幫助，找到適合項目的引擎，更快、更准、更高效率地完成項目需求。
感謝各位耐心讀完，希望能有所收獲，有考慮不足的地方歡迎留言指出。