最近看到網上一篇文章，標題叫做《2016年 最火的 15 款 HTML5 游戲引擎》。目前針對HTML5游戲的解決方案已經非常多，但誰好誰差卻沒有對比性資料。特意花了幾天時間，針對文章中出現的12款免費開源引擎做了一次相對完整的對比分析，希望能對大家有所幫助。
　　針對技術類產品對比，通常有多個維度進行對比，不僅僅是技術層面，還有許多非技術層面的內容會影響我們的使用結果。本文從如下幾個維度進行多重對比。
　　2D與3D編程語言設計理念&功能工作流性能學習資料商業應用
　　2D與3D、編程語言對比
　　2D與3D
　　游戲領域中，最直白的一種分類方法便是2D與3D的區分。通常我們都會認為它們是游戲引擎領域兩類不同的產品。原文中提及的引擎確實是當下最為流行的HTML5游戲引擎。很多引擎屬于2D、3D通吃類型，我們通過一個表格進行對比。
　　編程語言
　　基于HTML5技術的游戲引擎，所需要的腳本必定是Java，只有Java腳本語言才能運行于瀏覽器中。但目前市場上，出現了很多Java代替品，例如Type、Coffee、Live等等。不同語言直接的定位不同，語言哲學也不盡相同。一些游戲引擎在語言選擇上也頗有意思。
　　Engine
　　2D Render
　　3D Render
　　Java
　　Type
　　Three.js NO YESYESNO
　　Phaser YESNO YESYES
　　Pixi.js YESNO YESYES
　　Egret YESYESNO YES
　　enchant.js YESNO YESNO
　　craftyJS YESNO YESNO
　　Turbulenz YESYESYESYES
　　cocos2d-js YESNO YESNO
　　PlayCanvas NO YESYESNO
　　melonJS YESNO YESNO
　　Quintus YESNO YESNO
　　Hilo YESNO YESNO
　　結論
　　可以從表格中看出，下面三個引擎屬于2D和3D通吃類型。
　　EgretTurbulenzPlayCanvas
　　在Web游戲領域勝出的編程語言是Java和Type。但絕大部分HTML5游戲引擎還是采用Java語言。只有三款引擎選擇支持Type。其中Egret做的最為徹底，僅支持Type，并未推出Java語言版本。
　　從當前前端技術圈環境分析，未來可能很多前端框架或者引擎會推出響應的Type語言分支，從AngularJS宣布將使用Type開發開始，Type在很大程度上被前端認可。不得不說微軟在開源圈這一仗打得漂亮。
　　設計理念&功能
　　架構設計是一門大學問，對于開源引擎架構的設計模式主要取決于作者的程序哲學觀點和產品定位。將設計思路和功能放在一起對比討論，比單獨功能討論更有參考意義。一個引擎的功能并非越多越好，功能應圍繞引擎定位而定，這樣的思路在一些引擎中體現尤為明顯，下面我們針對每個引擎一一分析。
　　Three.js
　　定位
　　Three.js項目創建時間是在2010年的4月24日，到目前位置，應該算是比較老牌的開源項目了。事實上Three.js定義并非一個游戲引擎。在Github主頁中，作者很明確的定義了Three.js的定位，叫做“Java 3D library”。它僅僅是一個基于Java語言的3D庫而已。當然，你可以用它來做任何事情，無論是游戲，還是炫酷的3D展示。
　　設計理念
　　Three.js在設計之處希望創建一個非常輕量級的3D庫，能夠幫助開發者快速搭建基于HTML5的3D內容。同時，通過暴露簡單的API，將3D內容的開發復雜性降至最低。
　　渲染環境上，Three.js支持WebGL和CCS3D兩種渲染模式。從當前使用量和標準普及程度來做分析看，開發者更加傾向于WebGL渲染方式。
　　功能
　　文本主要想對2D游戲引擎做深入分析，所有沒有對Three.js的功能與那些流行的3D引擎加以對比。
　　Pixi.js
　　定位
　　很多人第一眼看到Pixi.js官網，都會不自覺的認為這是一款游戲引擎。但在主頁中作者對于Pixi.js的定義為“2D WebGL renderer with canvas fallback”，翻譯為中文是一款依賴于canvas的WebGL渲染器。所以當你看到Pixi.js提供了為數不多的功能時，請不要驚訝，因為它只是一款渲染器。
　　設計理念
　　Pixi.js的設計理念很多程度來源于它的定位，只做渲染器，要把渲染功能做到最強。而這樣的定位，則會讓Pixi.js成為其他引擎的渲染內核。你經常能看到一些游戲引擎，或者產品都基于Pixi.js而開發。
　　最求極致的渲染性能是Pixi.js的首要任務，為了讓Pixi.js更加易于使用，作者在API設計上更加參考非常成熟的2D渲染架構 —— Flash，并且提供的API也盡量參考了Action。
　　例如創建一個顯示對象，在Pixi.js中被封裝為 PIXI.Sprite。如果需要顯示圖像，借助 PIXI.PIXI.Texture紋理進行渲染數據填充。最終設置顯示對象的坐標，代碼看起來就像下面這樣。
　　varstage = newPIXI.Container（）; vartexture = PIXI.Texture.fromImage（‘bunny.jpg’）; varbunny = newPIXI.Sprite（texture）; bunny.position.x = 80; bunny.position.y = 60; stage.addChild（bunny）;

普通下載普通下載

相關電子資料下載

• Wowza HTML5視頻播放器--Flowplayer 193
• 數字視頻時代，為什么流媒體加速CDN越來越重要？ 112
• 圖撲研發基于HTML5 的 2D、3D圖形渲染引擎 3088
• HTML5是什么 HTML5有什么好處 2108
• 谷歌將大力推廣基于HTML5的游戲平臺 1532
• 基于HTML5 WebGL的醫療物流系統，觀察醫療物流過程 6856
• HT for Web 自主研發強大的基于 HTML5 的 2D、3D 渲染引擎 5846
• 基于HTML5 WebGL的3D科幻風機，科技帶給我們的變化 430
• 關于HTML5新增的那些功能和特性介紹 3272
• 新Edge實現HTML5 100%可訪問性 老IE 11僅56% 1860