HTML5游戲從2014年Egret引擎開發的神經貓引爆朋友圈之后,就開始一發不可收拾,今年《傳奇世界》更是突破流水2000萬!從兩年多的發展來看,游戲開發變得越來越復雜,需要制作各種炫麗的效果,還要制作各種基於 2D 或者 3D 的場景。作為一名開發者,分析了當下最火爆,最熱門的HTML5游戲引擎供大家參考,希望大家也能找到屬於自己的那款游戲開發引擎。
我在github上面收集了四十多款的HTML5開源游戲引擎,從里面star、fork等等參數分析其流行度,最后綜合各方面元素,篩選出靠前的十五款(包含三款非開源游戲引擎)
免費
Name | Updated Time | Watch | Star | Fork | Commits | Contributors |
---|---|---|---|---|---|---|
Three.js | 2016/3/28 | 1590 | 24041 | 7768 | 14825 | 588 |
Phaser | 2016/2/18 | 837 | 11782 | 4095 | 4423 | 206 |
Pixi.js | 2016/3/17 | 656 | 10063 | 1942 | 2860 | 161 |
egret | 2016/3/30 | 215 | 1275 | 303 | 4268 | 25 |
enchantjs | 2016/1/4 | 185 | 1445 | 301 | 1683 | 27 |
crafty | 2016/3/21 | 134 | 2050 | 473 | 1807 | 106 |
turbulenz | 2015/11/23 | 271 | 2544 | 406 | 1737 | 13 |
cocos2d-js | 2016/3/30 | 162 | 1207 | 469 | 4559 | 45 |
playcanvas | 2016/3/30 | 164 | 1784 | 368 | 5142 | 16 |
melonjs | 2016/3/30 | 13 | 1579 | 371 | 3907 | 40 |
quintus | 2016/2/3 | 136 | 1023 | 412 | 256 | 33 |
Hilo | 2016/2/3 | 173 | 2449 | 340 | 20 | 2 |
收費
Name | Updated Time |
---|---|
Construct 2 | 2016/1/18 |
ImpactJS | 2016/1/18 |
GameMaker | 2016/1/18 |
1、Construct 2
Construct 2是一個運行於Windows平台的游戲制作工具,它可以讓沒有任何編程基礎的用戶在短時間內不寫一行代碼快速開發出一款可運行於所有平台(Windows、Mac、Linux、Android、iOS等)的游戲。免費版可以將游戲導出成HTML5。收費版本分為個人版(79英鎊)和企業版(259英鎊),可以導出所有平台的版本,同時提供了更多的特效和音樂。如果使用該工具盈利超過5000美元,需要升級到企業版。
特點:
簡單直觀,入門容易,無需編程也能做游戲,長處是開發射擊及動作類的平面游戲,有豐富的英文資料。
優點:
- 支持多平台(Android,iOS,Windows)
- 簡單易用、無需編程知識可以使用,可實時運行游戲;
- 提供了大量特效,支持物理效果,有開發者商城,在上面可以購買到各種開發插件和游戲素材;
- 強大的事件系統,可以不通過寫代碼來控制游戲邏輯;
- 提供了可編程擴展的接口,可以自己開發插件;
- 完整的文檔以及社區支持。
缺點:
- 非開源,且中文教程極其匱乏;
- 由於網頁,手機都是相對於電腦來說性能較低的硬件產品,所以需要開發者更好的運用系統資源,甚至在windows平台也是如此,因為其windows的輸出格式也是利用Chrome瀏覽器的內核所做,也就是說本質上還是在瀏覽器上運行。
點評:使用最多的HTML5商業引擎,更新快且開發者商城支持非常棒,推薦!**
2、Three.js
Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創建各種三維場景,包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精采的演示。
3、Phaser
Phaser是一款專門用於桌面及移動HTML5 2D游戲開發的開源免費框架,提供JavaScript和TypeScript雙重支持,內置游戲對象的物理屬性,采用Pixi.js引擎以加快Canvas和WebGL渲染,基於瀏覽器支持可自由切換。
快速、免費、易於維護,使用Phaser來開發2D小游戲的優勢顯而易見。一方面,開發者可以直接通過Koding平台上的VM開發系統進行代碼編寫及預覽。另一方面,也可以在支持Canvas的瀏覽器中直接安裝Phaser來進行游戲開發。
主要特性:
- JavaScript、TypeScript雙重支持
- 內置游戲對象的物理屬性
- WebGL、Canvas渲染自由切換
- 完全支持Web音頻
- 輸入:多點觸控、鍵盤、鼠標、MSPointer事件
- 除了IE 9+、Firefox、Chrome、Safari及Opera等桌面瀏覽器之外,Phaser還支持Mobile Chrome(Android 2.2+)及Mobile Safari(iOS 5+)等移動瀏覽器。使用Phaser進行游戲開發沒有任何語言設定,並且,在Phaser官網上,還提供了非常詳細的開發指南,想要一探究竟的開發者不妨直接登陸Phaser查看。
4、 Pixi.js
Pixi.js是一款超快的開源HTML5 2D渲染引擎,使用帶有Canvas回調功能的WebGL。作為JavaScript的2D渲染器,Pixi的目標是,可以提供一個快速且輕量級的2D庫,並能兼容所有設備。此外,讓開發者無需了解WebGL,就可以感受到硬件加速的力量。
主要特性:
- 真正的跨平台:在今天,開發工具跨平台已經不是什么稀奇的事了。不過,Pixi.js則是一個可以兼容所有設備的超快HTML5 2D渲染引擎,並且擁有canvas回調功能的WebGL,實現真正的跨平台。
- 交互式多點觸控:Pixi不僅支持移動和平板設備,還具有完整的多點觸控輸入識別,讓開發者可以發揮自己的能力去挖掘出它所有的潛力。
- WebGL過濾器:當使用WebGL時,Pixi允許你使用自己熟悉且現有的過濾器。當然,你也可以使用自己創建的獨一無二的過濾器,比如自定位移和半色調效果。
- 着色和混合模式:對設計師來說,會很喜歡這個,Pixi.js允許用戶着色和使用混合模式就像其他常見的視覺包比如Photoshop或Flash。
- 渲染器自動檢測:這個算是Pixi的一大特色,雖然Pixi是主要作為WebGL 2D渲染器而創建的,但仍支持非WebGL平台。其解決方案就是創建一個Canvas回調系統,只需一次編碼,Pixi就可無縫管理回調。
- 簡易API:設計直觀,易於上手。
- 資源加載:精靈表單、圖形、字體和動畫數據等都可通過Pixi.js來加載和處理。
- 支持精靈表單(Sprite sheet)。
5、 egret
Egret 游戲解決方案包含了開源免費的 HTML5 游戲引擎、Egret 項目開發工具集合、動畫特效制作工具、原生多平台打包工具、高效的 HTML5 游戲應用加速器、以及支持多渠道的開放平台等。開發者可以通過Egret項目開發工具快速、高效的制作及開發游戲相關各類內容,加速器將游戲效果提高到與原生游戲相媲美的效果。制作后的游戲發布到開放平台后,有着優質的渠道資源可以將游戲推薦給更多的用戶,使得游戲開發、發布、推廣變為一體化內容。
主要特性:
- 基於TypeScript及JavaScript技術,支持Flash到Egret高效轉換,引擎、工具、運行時完整工作流
- 跨平台:HTML5,iOS,Android,Windows Phone
- 全中文文檔:文檔與開發者社區齊全
- 開源免費,BSD開源協議、任意定制及擴展
6、enchantjs
Enchant.js 是個簡單的 JavaScript 框架,可以使用 HTML5 和 JavaScript 來開發簡單的游戲和應用。現在還是由 UEI 的 Akihabara 研究中心來開發和維護。在線演示
7、crafty
Crafty是一個體積小、簡單、輕量級的2D的HTML5游戲引擎,它提供了通過Canvas或DOM來繪制實體,提供了精靈Map以及SAT高級碰撞監測支持。它是由個人(Louis Stowasser)創建,同時由Github上的一些開發者共同開發。
優點
- 體積小
- 輕量級引擎,不會受到框架的太多束縛
- 同時支持PC和移動平台瀏覽器
8、turbulenz
Turbulenz是一個開源的HTML5游戲引擎,提供了可以運行在Windows、MacOS、Linux上的SDK,允許開發人員創建高質量和硬件加速的2D、3D游戲。包括以下功能:異步資源加載、進行特效和粒子渲染、支持物理效果、碰撞檢測以及動畫、3D音效支持、支持網絡交互以及社交網絡分享、場景和資源的管理。
優點:
1. 功能強大,同時支持2D和3D
2. 基於MIT協議的開源引擎
9、cocos2d-js
cocos2d-js是一款基於Cocos2d-x API的2D開源免費HTML5游戲引擎。它目前通過canvas進行渲染,將來會支持WebGL。它由國內Cocos2d-x核心團隊主導開發和維護,行業領袖、HTML5大力推動者Google為這個項目提供支持。同時,Zynga、Google等大公司的工程師也參與到它的設計工作中。
優點:
- 與Cocos2d的API類似,容易上手
- 中文文檔齊全,資料豐富
- 基於MIT協議的開源引擎
10、playcanvas
PlayCanvas是一個基於 WebGL游戲引擎 的企業級開源JavaScript框架,它有許多的開發工具能幫你快速創建3D游戲。PlayCanvas.js由一個專業社區創建,最初並不是開源的,但現在你可以在github上fork PlayCanvas.js,然后在你的下一個3D游戲項目中免費使用。
它還提供了能在瀏覽器中雲心的雲編輯器,開始使用PalyCanvas和導航到編輯器的URL一樣容易。
11、melonjs
melonJS是一個全新、輕量級,基於精靈的2D游戲引擎。兼容所有支持HTML5覽器包括:Chrome、Safari、Firefox、Opera。支持多聲道。提供基本物理和碰撞機制(以確保CPU的要求低),一組基礎的實體對象(可擴展)。支持補間動畫效果。一個狀態管理器(可以輕松管理加載,菜單,選項和在游戲畫面狀態的開關)。提供一些基本的GUI元素。一個可定制的加載器。
12、quintus
Quintus是一款易於上手、輕量級、開源的HTML5 JavaScript游戲引擎,包含一個模塊化的引擎可輕松開發游戲,並在同一個頁面上運行多個實例,支持桌面及移動平台瀏覽器。Quintus引用面向對象的思想來進行HTML5游戲開發,同時依賴於jQuery來提供事件處理機制和元素選取操作。
13、ImpactJS
ImpactJS是一個基於JavaScript的HTML5游戲引擎,同時支持PC和移動平台瀏覽器。它是目前除了Construct2之外最受歡迎的HTML5游戲引擎,使用需要支付99美元。
ImpactJS 曾經風靡一時,使用ImpactJS 開發的Z-Type該游戲被國外很多網站評選為二十款優秀游戲之一。
優點:
- 提供了靈活的關卡編輯器,可以快速構建游戲地圖
- 提供了強大的調試工具
- 提供了Ejecta可以將JavaScript的執行結果通過OpenGL渲染出來,可以在iOS平台上獲得與原生應用相近的效率
- 文檔齊全,有兩本專門介紹ImpactJS開發的書
- 支持物理效果
- 支持自己編寫插件來擴展
缺點:
1.非開源,且中文教程極其匱乏;
2.更新慢,功能不夠強大;
14、GameMaker
GameMaker與Construct 2類似,都是一個游戲制作工具,可以導出到各個平台運行,分為免費版、標准版(49.99美元)、專業版(99.99美元)和大師版(799.99美元)。其中免費版只能導出Mac和Windows版本,導出HTML5需要大師版或者專業版(再額外支付99.99美元)。

優點和缺點:
優勢與Construct2類似,但性價比不如Construct2高
15、 Hilo
Hilo,一套HTML5跨終端的互動游戲解決方案開源啦!。Hilo支持了多屆淘寶&天貓狂歡城等雙十一大型和日常營銷活動。內核極簡,提供包括DOM,Canvas,Flash,WebGL等多種渲染方案,滿足全終端和性能要求。
主要特性:
- 極簡內核: Hilo核心模塊極精簡,保留了2D游戲引擎最必要的模塊,同時采用模塊化管理。
- 完善接入&擴展: Hilo 支持多種模塊范式的包裝版本,包括AMD,CMD,Standalone多種方式接入。另外,你可以新增和擴展需要的模塊和類型。
- 多種渲染方式:提供DOM,Canvas,Flash,WebGL等多種渲染方案,可以做到跨全端,高性能的要求。
- 完善的周邊工具:提供動畫編輯器 ,Yeoman腳手架及典型案例產出的輔助開發工具。
- 案例豐富: 支持天貓,手淘多次大型和日常活動,如雙十一,年中大促等。代表產品如狂歡城。
本文參考數據來自:
1. Github
2. html5gameengine
本文原創:首發於DiyCode、目前被oschina、掘金頭條、開發者頭條、CSDN極客頭條編輯推到首頁。覺得好,請給我點贊,推薦,評論,幫我上博客園頭條!