H5遊（yóu）戲開（kāi）發：遊戲引擎入門推薦

　　試想一下，在遊戲開發進行到中（zhōng）後期的時候，才發現項目（mù）引入的遊戲引擎與需求相悖，這時候不管是（shì）重新（xīn）做一些修修補補（bǔ）的工作或者更換遊戲引擎，這都（dōu）是相當耗費（fèi）人力物力的一件事。為了避免這種情況的出現，在前期選擇適合項（xiàng）目（mù）需求的（de）遊戲引擎顯（xiǎn）得尤為重要。

　　接下來我們來聊一聊如何去選擇適合項目的 JS 遊（yóu）戲引擎。

遊戲場景分類

　　在剛接到（dào）遊戲需求時，我們可以從以下幾個方麵進行考量，分析出遊（yóu）戲需（xū）求（qiú）場景所屬，從而作為我（wǒ）們選擇遊（yóu）戲引擎的依據。

遊戲效果呈現方式（ 2D ？ 3D ？ VR ？）

　　這與遊戲引擎能夠支持的渲染方式（shì）直接（jiē）掛鉤。現在的 H5 遊戲渲（xuàn）染方式一般有 2D 渲染、3D 渲染、VR 渲染三種。

　　而 2D 渲染一般也（yě）有三種：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由於性能原因（yīn），一般隻適合做一些動畫效果較少，交互較（jiào）少的小遊（yóu）戲，本文主要針對 Canvas 和 WebGL 展開介紹。

　　一般來說，對（duì）於 2D 小遊（yóu）戲來說，Canvas 渲染（rǎn）已經足夠。然而 Canvas 渲染由（yóu）於底層封裝層次多，不足以支撐起大型遊戲的性能要求，因此大型遊戲最好選擇（zé） WebGL 渲染或者瀏覽器（qì）內嵌 Runtime 。

遊（yóu）戲複雜度

　　這與遊戲引擎能夠支持的功能，提供的API，性能等方麵關係比較（jiào）大。

遊戲引擎推薦

　　筆者從業界較流行的一些框架，進行以下幾個（gè）方麵對比，希望能（néng）從客觀數據上給大家的技術選型帶來建（jiàn）議（yì）和參考。

引擎支持的（de）渲染方式

　　github上的 star 數

　　更新時間

　　文檔（dàng）詳細度

　　周邊產品

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

　　Egret

　　Egret 周邊產品

　　白鷺引擎是企業級遊戲引擎，有團隊維護。Egret 在工作流的（de）支持上（shàng）做的是比較好的，從 Wing 的代（dài）碼編寫，到 ResDepot 和 TextureMerger 的資源整合，再到 Inspector 調試，最（zuì）後到原（yuán）生（shēng）打包(支持（chí） APP 打包)，遊戲開發過程中（zhōng）的每個環節基本都有工具支撐。官網上的示例，教程也（yě）是比較（jiào）多。值得一（yī）提的（de）是，今年5月白鷺引擎支持了 WebAssembly ，這對（duì）於性能的提升又是一大裏（lǐ）程碑。

　　LayaAir

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

　　Pixi.js

　　一般來說，WebGL 的渲染速度都會比 Canvas 快（kuài），這是由倆者的繪製（zhì）路徑決定的（de）。Pixi 最大的特點在於，Pixi 具（jù）有完整的 WebGL 支持，卻並不要求開發者掌握（wò） WebGL 的（de）相關知（zhī）識，並在（zài）需要（yào）時無縫地回退到（dào） Canvas 。相較於很多（duō）同類產品，它的（de）渲染能（néng）力是比（bǐ）較強大的。然而，Pixi 也有不足的地方，Pixi 對於動畫的支持是比較缺乏的，在實際開發（fā）中，常常需要引進額外的動畫庫，如 GSAP。

　　Phaser

　　Phaser 在渲染方（fāng）麵直接封裝了（le） Pixi;架構（gòu）方麵，Phaser 內嵌了3個物（wù）理引擎(Arcade Physics、Ninja、p2.js)，提供粒子係統、動畫、預下載（zǎi）和設備適配方案;兼容性方（fāng）麵，Phaser 的焦點是放在移動端瀏覽器（qì）上的;API 方麵，Phaser 能實現豐富的遊（yóu）戲功能，適合複雜度高（gāo）的遊戲開發。

　　CreateJS

　　CreateJs 周邊產品

　　CreateJS 官（guān）方提供了 TweenJS 支持動畫開發，同時通過 SoundJS 和 PreLoadJS 提（tí）供了音頻和預下載的支持，對於 H5 遊戲基（jī）礎功能的支持是足夠的。在（zài）兼（jiān）容性方麵，CreateJS 支持 PC 端和移動端幾乎所有的瀏覽器。此外，CreateJS 還支持用（yòng） flash CC 開發導出由 CreateJS 渲染的 H5 遊戲（xì）。

　　Hilo

　　Hilo 是阿裏（lǐ）團隊推出的一個開（kāi）源項目，支持模塊化開發，同時提（tí）供了多種模塊範式的包裝（zhuāng）版（bǎn）本和跨終端解決方案，適合用來開發營銷小（xiǎo）遊戲。其體積也是比較（jiào）輕量的，隻有70kb左（zuǒ）右。Hilo 支（zhī）持 DOM 渲染，Canvas 渲染和（hé） WebGL 渲染，同時集成了 Hilo Audio， Hilo Preload。其後推出的 Hilo 3D 也是其亮點之一。

　　Cocos2d-x

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

　　lufylegend.js

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

　　Three.js

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

　　PlayCanvas

　　從渲染支（zhī）持程度來看，PlayCanvas 不僅支持 3D WebGL渲染，同時保持到 VR 的支持，擁有比較好（hǎo）的拓展性。在工具流的支持上，提供了（le）在線編輯器（qì）和（hé）發布托管等服務。從官方教程上看，教程也是比較（jiào）詳細的。

　　結語

　　現在市場上的 H5遊戲引擎（qíng）很多（duō），很難去直接定義哪個引擎（qíng）的好壞，隻能（néng）說每個引擎都（dōu）有自（zì）己的特性（xìng），在某方麵跟項（xiàng）目的契合程度比較高（gāo），筆（bǐ）者（zhě）根據現在市（shì）場上比較熱門（mén）的幾大引擎做了幾點比（bǐ）較，希望能給剛入門的你做技術選型的時候（hòu）有一點幫助，找到適（shì）合項目的引擎（qíng），更快、更準、更高效率地完成項目需求。