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

普通下載普通下載

相關(guān)電子資料下載

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