HTML5遊戲引擎深度測評

https://zhuanlan.zhihu.com/p/20768495

最近看到網上一篇文章，標題叫作《2016年 最火的 15 款 HTML5 遊戲引擎》。目前針對HTML5遊戲的解決方案已經很是多，但誰好誰差卻沒有對比性資料。特地花了幾天時間，針對文章中出現的12款免費開源引擎作了一次相對完整的對比分析，但願能對你們有所幫助。

針對技術類產品對比，一般有多個維度進行對比，不只僅是技術層面，還有許多非技術層面的內容會影響咱們的使用結果。本文從以下幾個維度進行多重對比。

1. 2D與3D
2. 編程語言
3. 產品定位&功能
4. 工做流
5. 性能
6. 學習資料
7. 商業應用

2D與3D、編程語言對比

2D與3D

遊戲領域中，最直白的一種分類方法即是2D與3D的區分。一般咱們都會認爲它們是遊戲引擎領域兩類不一樣的產品。

編程語言

基於HTML5技術的遊戲引擎，所須要的腳本一定是JavaScript，只有JavaScript腳本語言才能運行於瀏覽器中。但目前市場上，出現了不少JavaScript代替品，例如TypeScript、CoffeeScript、LiveScript等等。不一樣語言直接的定位不一樣，語言哲學也不盡相同。一些遊戲引擎在語言選擇上也很有意思。

結論

能夠從表格中看出，下面三個引擎屬於2D和3D通吃類型。

• Egret
• Turbulenz
• PlayCanvas

在Web遊戲領域勝出的編程語言是JavaScript和TypeScript。但絕大部分HTML5遊戲引擎仍是採用JavaScript語言。只有三款引擎選擇支持TypeScript。

產品定位&功能

一個引擎的功能並不是越多越好，功能應圍繞引擎定位而定，這樣的思路在一些引擎中體現尤其明顯，下面咱們針對每一個引擎一一分析。

Three.js

定位

Three.js項目建立時間是在2010年的4月24日，到目前位置，應該算是比較老牌的開源項目了。事實上Three.js定義並不是一個遊戲引擎。在Github主頁中，做者很明確的定義了Three.js的定位，叫作「JavaScript 3D library」。它僅僅是一個基於JavaScript語言的3D庫而已。

功能

文本主要想對2D遊戲引擎作深刻分析，全部沒有對Three.js的功能與那些流行的3D引擎加以對比。

Pixi.js

定位

Pixi.js的定義爲「2D WebGL renderer with canvas fallback」，翻譯爲中文是一款依賴於canvas的WebGL渲染器。因此當你看到Pixi.js提供了爲數很少的功能時。

功能

遊戲引擎中的功能，咱們能夠細分很是多分類，一篇文章沒法講解全部分類細節講解明白。我將全部功能作了一個二級分類，方便分析。

Phaser

定位

Phaser的定位是 "Desktop and Mobile HTML5 game framework"，中爲稱之爲「桌面與移動端的HTML5遊戲框架」。Phaser並不把本身定義爲Engine，而是框架，同時渲染內核使用Pixi.js。

功能

Phaser功能衆多，但絕大部分應用其餘第三方做爲實現。

Egret

定位

Egret算是HTML5遊戲引擎中的新起之秀，其定位已不單純爲HTML5遊戲引擎。官方將其定位爲「遊戲解決方案」，同時也並未過多說起HTML5。究其緣由在於Egret不只僅提供了一個基於HTML5技術的遊戲引擎，更是提供了原生打包工具和衆多周邊產品，使其成爲「解決方案」。

這裏單獨分析Egret Engine這個產品，其語言使用TypeScript，有2D和3D版本。在架構設計上，同Pixi.js同樣，參考了Flash成熟的2D架構體系。API方面，也參考了ActionScript。不只如此，因爲TypeScript的緣故，在事件系統中，也仿照ActionScript實現了addEventListener 這樣的事件註冊機制。

內核方面，Egret Engine採用了模塊化的設計。這樣能夠將不一樣的功能進行解耦。更加有趣的是，Flash中引覺得傲的自動髒矩形技術在Egret Engine中也被實現。在canvas模式下，髒矩形會是渲染性能獲得提高，比其餘引擎更加有優點。

功能

Egret Engine因爲模塊化設計的緣由，將不一樣功能放到了不一樣模塊中。這些模塊以庫的形式提供，下面表中是全部支持模塊的總和，但不含平臺API部分，例如微信API的封裝。

enchant.js

定位

enchant.js並不是一個引擎，而是一個框架。同時，enchant.js也不只僅用於遊戲，還能夠用於app。

功能

enchant.js框架自身提供的功能很是有限，若是須要其餘功能，必須本身擴展或者尋找響應的插件。

craftyJS

定位

craftyJS將本身定義爲針對JavaScript遊戲的框架。

功能

Turbulenz

定位

Turbulenz引擎其實是爲本身的遊戲渠道中的遊戲提供的遊戲引擎。由於和自身渠道綁定，因此在引擎中提供了不少low level API。藉助這些底層API，能夠呼叫Turbulenz遊戲渠道中的一些系統級別功能。

功能

因爲Turbulenz對不少功能作了擴展，同時推出Low Level API和 High Level API。這裏再也不對其中龐雜的系統進行功能分析，你們若是有興趣能夠到其官網查看。

cocos2d-js

定位

cocos2d-js是喊着Cocos2D-X的金鑰匙出身的，它僅僅是Cocos2D-X的一個HTML5實現的分支。

功能

cocos2d-js的功能提供的至關完整，你在遊戲中須要的功能幾乎都可以找到。

PlayCanvas

定位

PlayCanvas主要用於3D渲染，本文仍是以2D討論爲主，對PlayCanvas的分析就不作過多分析。

melonJS

定位

melonJS是一個輕量級的HTML5遊戲框架，而且經過插件機制擴展其功能。

功能

Quintus

定位

Quintus將本身定位爲簡單好用的JavaScript遊戲引擎，同時支持移動和PC端。

功能

Quintus自身並不支持WebGL，同時提供的功能也較少，在Github中排名也很靠後。

Hilo

定位

Hilo這個引擎來源於阿里前端團隊，從官網的主頁上看，這個引擎的定位比較模糊。Hilo做爲一個跨終端的互動小遊戲解決方案，同時有稱綜合解決方案。從它的演變來看，Hilo屬於阿里前端在實踐總總結出來的一套工具庫。總體引擎並不是最初有計劃設計構想。

功能

Hilo功能相對比較簡單，對於遊戲開發來講，缺失功能較多。

工做流

對團隊開發來說，工做流搭建是很是重要的，我我的比較看重這點。若是是小型團隊或者我的開發者可能對此需求並不大。當項目規模變大時，一個好的工做流會事半功倍。

Three.js

3D並不在本篇文章的討論範圍以內，同時Three.js也並不是遊戲引擎，不存在遊戲開發工做流一說。這裏簡單介紹一下Three.js所提供的在線編輯器。

Three.js提供的在線編輯器應該是基於Three.js開發的，功能很少，但至關小巧。

Pixi.js

Pixi.js做爲一個渲染器，其工具支持也是至關清爽，除了一個程序庫以外，沒有提供任何工具。

Phaser

Phaser和Pixi.js同樣，沒有提供任何工具支持，在其官網上只是推薦了兩個代碼編輯器。還提供了一個簡單的在線代碼編輯器。

Egret

Egret提供的工具很是多，也複合其解決方案的定位。在Egret整個體系下你能夠看到以下工具支撐。

Egret Wing：Egret出品的一個IDE編輯器。在提供代碼編輯功能的同時，還內置可視化的UI編輯器。與Egret Engine中的GUI、EUI框架配合使用。

ResDepot：這是個小工具，用來配置遊戲資源加載表。若是遊戲資源多的話，用這個小工具拖拽一下就完成了。

TextureMerger：一個紋理合並的小工具，功能有點像TexturePacker。

DragonBones Pro：針對Egret中骨骼動畫解決方案提供的DragonBones動畫編輯器。

Egret Inspector：一個基於Chrome瀏覽器的插件，能夠針對Egret遊戲進行調試。

Egret iOS & Android Support：這兩個東西能夠將你的HTML5遊戲打包成原生APP。

還有一些其餘的工具，但定位與遊戲開發不一樣，有興趣能夠去它的官網看。

從上冪啊你的分析看出，Egret在工做流的支持上作的仍是很是完成的，從Wing的代碼編寫，到ResDepot和TextureMerger的資源整合，再到Inspector調試，和原生打包。遊戲開發過程當中的每一個環節基本都有工具支撐。

enchant.js

enchant.js 沒有提供任何工具支撐，在官網中也沒有任何相關支持工具的介紹。

craftyJS

craftyJS也沒有提供任何工具支撐，僅僅是一個開源代碼庫。

Turbulenz

Turbulenz在你下載的目錄中包含了不少工具，大部分與格式轉換相關。全部工具均爲命令含小工具，沒有提供任何可視化操做軟件支持。

cocos2d-js

Cocos2d-js近年來變化很大，但對於JS這個分支的支持卻少之又少。前一段時間新出了一個工具叫作Cocos Creator。我沒有具體使用過，但看截圖彷彿有Unity3D的影子。從介紹中看，應該對遊戲支持仍是不錯的，編輯方面目前還欠缺。

PlayCanvas

PlayCanvas也提供了一個在線編輯器，不過是針對它的3D功能。編輯器看上去和Three.js提供的在線編輯器份很類似。這裏直接借用官方文檔中的截圖給你們看一下。

melonJS

melonJS除了源碼庫之外，也沒有提供任何工具支持。但在其官方主頁中，包含幾個其餘編輯器的鏈接。好比著名的Tiled地圖編輯器等。

Quintus

Quintus沒有提供任何工具支撐。

Hilo

Hilo沒有提供任何工具支撐。

總結

結果並不出乎意料，對於開源遊戲引擎來說，維護庫就是耗費做者很大一部分精力，更況且去製做編輯器之類的軟件產品。不少引擎都會依賴一些比較流行的第三方工具，例如Tiled、TexturePacker等等。雖然能夠實現功能，但整個工做流搭配起來仍是多多少少會有一些問題。只有Egret和Cocos2D-js提供了相關可視化編輯工具。而這兩對於工做流的理解則徹底不一樣。從產品中不難看出，Cocos2D-JS更像Unity3D，提供一個大而全的軟件給開發者用。Egret則是什麼角色用什麼工具，將產品按照角色劃分，針對不一樣角色和開發流程中的各個環節進行產品設計。

相對來講，Egret的這種方式使得每一個工具更加垂直，可以作的功能也更加深刻，不會讓工具顯得臃腫。而Cocos Creator則力求完整，一個軟件解決全部事情。

性能

性能測試上，我只針對2D遊戲引擎作了一個渲染壓力測試。

測試內容爲同屏渲染對象數量相同的狀況下進行幀頻數據對比，爲了保證測試的公平性，我使用同一臺電腦，相同版本的Chrome瀏覽器進行測試，遊戲場景尺寸均爲800*600，顯示的圖片也爲同一張。每一個引擎進行同屏5000、10000、20000個顯示對象渲染。

其中craftyjs引擎渲染出現問題，這裏不做數據對比。 Quintus引擎不支持WebGL渲染模式，所以這裏頁不做數據對比。 Phaser渲染內核使用Pixi.js，所以Phaser渲染數據參考Pixi.js結果。

全部引擎編寫的代碼大體相同，開始作for循環，建立定量顯示對象，而後在循環中對每一個顯示對象作旋轉操做。

核心算法代碼以下：

 

個人電腦配置以下：

 

最終測試結果

結論

按照上述測試方法，咱們能夠對引擎性能排名作一個大體排列：

第一名：Pixi.js 和 Turbulenz

第二名：Egret

第三名：Cocos2d-js

第四名：Hilo

第五名：enchant.js

第六名：melonJS

 

最後放出一張測試時效果圖

學習資料

一般狀況下，咱們都會選擇一個資料較全的產品進行學習使用，畢竟使用過程當中會遇到各類各樣的問題。如今遊戲引擎的文檔，討論組等都已經成爲了產品標配。下面這個表格就對各個引擎的這些「標配」作一個對比。

結論

從上面對比表格能夠看出，絕大部分引擎在文檔教程方面作的仍是比較深刻的，但完成程度不一樣。大部分都爲英文文檔，對於國內的開發者來講可能學習起來成本略高。其中兩個支持中文的引擎Egret、Hilo均爲國人產品，這兩款引擎在文檔方面，Egret作的至關優秀，開發者能夠從它的http://edn.egret.com中查閱大量中文資料。

在學習難度上，Egret算是最爲簡單的，不管從完整度仍是中文普及度上。

商業應用

這部分對比是在商業產品應用中的佔比狀況。一個引擎被商業產品應用普遍的狀況下，足以證實此引擎具有商業產品使用價值。通俗的講，別人能用這玩意作出遊戲，你也能。因此針對這兩方面進行一下粗略的分析。

我對國外的HTML5遊戲市場徹底不瞭解，這個市場分析的東西太大，很差作評價。就分析一下國內的，簡單看一下到底哪一個引擎用的多。

我用了國內比較火的HTML5遊戲平臺新浪微博做爲數據採樣基礎，一我的實在精力有限，不可能作的完整。因爲客戶端對遊戲地址進行了加密，沒法直接獲取。因此用了一些調試工具來看遊戲網頁的標記，以此判斷遊戲到底使用什麼引擎製做。

最終統計結果以下：

一共找了50款遊戲，如上面表格。50款引擎，使用純HTML5開發的6款，使用Egret開發的30款，Cocos2d-js的14款，laya的1款，createjs的1款。

百分比統計以下：

從網上又搜刮了一些數據，下面是國內HTML5遊戲四大典型大渠道，即新浪微博（社交型APP類表明），愛微遊（微信大號類表明），QQ瀏覽器（各大瀏覽器類表明），WiFi萬能鑰匙（超級APP類表明）統計的數據，比我本身的全。

下面是主流渠道H5遊戲引擎使用率。

 

HTML5付費遊戲全渠道累計用戶排名前30的產品

 

不難看出，Egret 和 Cocos2D-js聯合瓜分了大部分市場。而Egret佔比竟然過半。看來Egret在國內HTML5遊戲市場仍是很是強悍的。

總結

1. Three.js：做爲老牌的3D庫，它已經有衆多案例，在PC多網頁3D中是目前不錯的選擇。
2. Phaser：文檔教程，和案例方面都很不錯，功能也算的上豐富。很是適合獨立遊戲開發和小團隊使用。
3. Pixi.js：做爲渲染器，其渲染性能絕對是很是優秀的，遊戲功能方面支持不好，適合極客程序員把玩。
4. Egret：性能不錯，在工做流方面支持很是優秀，適應中度和重度HTML5遊戲開發，有較多商業項目驗證，很是適合商業團隊使用。
5. enchant.js：性能誤差，不太推薦。
6. craftyJS：文檔教程等方面不太完善，很難找到對應技術支持，不推薦。
7. Turbulenz：性能極佳，但捆綁其自身業務，不太適合國內市場。
8. cocos2d-js：老牌引擎，其性能在排名中居中，工做流支持相對完整，推薦。
9. PlayCanvas：重度3D遊戲開發引擎，本文不對3D作推薦。
10. melonJS：性能不理想，不推薦。
11. Quintus：不支持WebGL模式，性能較差，不推薦。
12. Hilo：阿里前端團隊做品，偏向於前端開發工程師，與遊戲專業開發距離較大，推薦作HTML5營銷小交互的使用。