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