最近因工作需要底桂，調(diào)研了下 H5 2D/3D渲染引擎。不過網(wǎng)上找到的都是些比較舊的文章惧眠，所以在這里籽懦，對一些數(shù)據(jù)和內(nèi)容做下更新，以便保鮮這個主題氛魁。
首先暮顺，根據(jù)平時的印象，大致羅列了“怎樣算作一款不錯的渲染引擎”的評判因素（個人觀點歡迎補充）：
形象工程：官網(wǎng)形象秀存，官方 example捶码，github star，issue 處理或链，
技術(shù)層面：技術(shù)棧惫恼，技術(shù)文檔，性能測評
生態(tài)周邊：工具鏈支持澳盐，社區(qū)反饋祈纯，成熟產(chǎn)品
Part 1: 信息的搬運工
基于上述評判標準，接下來開始大面積搜集信息叼耙。邊搜集邊下結(jié)論腕窥，過濾掉一些不太合適的，使結(jié)論趨于收斂筛婉。
1簇爆、一些主流引擎庫的特性比較
對表格做下展開：
- Three.js：作為老牌的3D庫，它已經(jīng)有眾多案例爽撒，在PC多網(wǎng)頁3D中是目前不錯的選擇冕碟。
- Phaser：文檔教程，和案例方面都很不錯匆浙，功能也算的上豐富安寺。非常適合獨立游戲開發(fā)和小團隊使用。
- Pixi.js：作為渲染器首尼，其渲染性能絕對是非常優(yōu)秀的挑庶，游戲功能方面支持很差，適合極客程序員把玩软能。
- Egret：性能不錯迎捺，在工作流方面支持非常優(yōu)秀，適應(yīng)中度和重度HTML5游戲開發(fā)查排，有較多商業(yè)項目驗證凳枝，非常適合商業(yè)團隊使用。
-
enchant.js：性能偏差，不太推薦岖瑰。 -
craftyJS：文檔教程等方面不太完善叛买，很難找到對應(yīng)技術(shù)支持，不推薦蹋订。 - Turbulenz：性能極佳率挣，但捆綁其自身業(yè)務(wù)，不太適合國內(nèi)市場露戒。
- cocos2d-js：老牌引擎椒功，其性能在排名中居中，工作流支持相對完整智什，推薦动漾。
- PlayCanvas：重度3D游戲開發(fā)引擎，本文不對3D做推薦荠锭。
-
melonJS：性能不理想谦炬，不推薦。 -
Quintus：不支持WebGL模式节沦，性能較差键思，不推薦。 -
Hilo：阿里前端團隊作品甫贯，偏向于前端開發(fā)工程師吼鳞，與游戲?qū)I(yè)開發(fā)距離較大，推薦做HTML5營銷小交互的使用叫搁。
參考：
1赔桌、來自簡書：HTML5游戲引擎深度測評
2、2016年文章：HTML5游戲引擎對比分析調(diào)研
3渴逻、2018年文章：H5游戲引擎的選擇
4疾党、2018年文章：10 JavaScript Engines To Develop Your Own Mobile And Web Games
（本文介紹的最后幾款我去看了官網(wǎng)，很糟糕惨奕，前排的幾個和上面調(diào)研結(jié)論一致）
2雪位、github 項目概覽
github 上的項目介紹和相關(guān)數(shù)據(jù)，本身也將問題說的清楚明白梨撞，此處以表格形式略作展示雹洗。
數(shù)據(jù)統(tǒng)計時間：2020-7-10，在線表格在這里卧波。
仔細瀏覽過一遍 github 項目介紹后时肿，對于哪個引擎能干什么，基本會有一個大致了解港粱。很顯然螃成，排名中上游的引擎是在一番優(yōu)勝劣汰中沉淀下來的優(yōu)勝者，所以有著比較充分的理由選用它們。
然而寸宏，值得說明的是宁炫，大家需要結(jié)合自己的項目需求，有時強大并不一定適合击吱，中游的未必不可取淋淀。強大者入手門檻高遥昧，很難在較短時間駕馭覆醇，中等體量的反而上手快。
比如在我看來炭臭，選擇一款引擎永脓，不僅要滿足項目需求，對自己而言也意味著一項長期技術(shù)投入鞋仍。在長時間的使用過程中常摧，填坑寫插件幾乎是不可避免的，你是否愿意投入精力威创，是否恰好對這個方向感興趣落午，決定了你選擇的體量。
好了肚豺，搜集了那么多信息溃斋，也醞釀了一番，這里就進一步收斂下：
Three.js 很強大吸申，但并不是我的項目要用的東西梗劫。
工具鏈上，白鷺 egret 引擎無疑是最完善的截碴，但這不作為最大權(quán)重去考慮梳侨。一些后來居上的引擎，也可能逐步彌補工具鏈日丹。
完善的工具鏈走哺，固然是一大優(yōu)勢，但初期會考慮偏輕哲虾，快速啟動的項目去體驗割坠。
所以，我基本只打算聚焦于 pixi 和 phaser 這 2 套引擎妒牙。
3彼哼、demo 進一步體驗
這些引擎都非常棒，demo 做出的效果足夠吸引人湘今。顏值即正義敢朱，所以再多看幾眼。
1、巴比倫 https://doc.babylonjs.com/examples/
2拴签、turbulenz 也很酷 http://biz.turbulenz.com/samples
3孝常、pixi https://pixijs.io/examples/
4、phaser https://phaser.io/news/category/game
4蚓哩、主要引擎/庫介紹
似乎意猶未盡构灸，似乎猶豫不決。早先對這個方向其實了解不多岸梨，所以這里再對這些優(yōu)秀的引擎/庫做下介紹說明喜颁。
2D 引擎庫
pixi.js
一般來說，WebGL 的渲染速度都會比 Canvas 快曹阔，這是由倆者的繪制路徑?jīng)Q定的半开。Pixi 最大的特點在于，Pixi 具有完整的 WebGL 支持赃份，卻并不要求開發(fā)者掌握 WebGL 的相關(guān)知識寂拆，并在需要時無縫地回退到 Canvas 。相較于很多同類產(chǎn)品抓韩，它的渲染能力是比較強大的纠永。然而，Pixi 也有不足的地方谒拴，Pixi 對于動畫的支持是比較缺乏的尝江，在實際開發(fā)中，常常需要引進額外的動畫庫彪薛，如 GSAP茂装。
Phaser
是一款專門用于HTML5 2D游戲開發(fā)的開源框架，提供 JavaScript 和 TypeScript雙重支持善延，內(nèi)置游戲?qū)ο蟮奈锢韺傩陨偬捎?Pixi.js——在渲染方面直接封裝了 Pixi渲染引擎（Phaser2 如此，Phaser3 已放棄）易遣，以加快Canvas 和 WebGL 渲染彼妻；架構(gòu)方面，Phaser 內(nèi)嵌了4個物理引擎豆茫，提供粒子系統(tǒng)侨歉、動畫、預(yù)下載和設(shè)備適配方案揩魂；兼容性方面幽邓，Phaser 的焦點是放在移動端瀏覽器上的；API 方面火脉，Phaser 能實現(xiàn)豐富的游戲功能牵舵，適合復(fù)雜度高的游戲開發(fā)柒啤。
目前項目最新進展是，Phaser4（Phaser 第4個大版本）正在開發(fā)中畸颅，并且已經(jīng)得到 Facebook 支持担巩。
CreateJS
CreateJS 官方提供了 TweenJS 支持動畫開發(fā)，同時通過 SoundJS 和 PreLoadJS 提供了音頻和預(yù)下載的支持没炒，對于 H5 游戲基礎(chǔ)功能的支持是足夠的涛癌。在兼容性方面，CreateJS 支持 PC 端和移動端幾乎所有的瀏覽器送火。此外拳话，CreateJS 還支持用 flash CC 開發(fā)導(dǎo)出由 CreateJS 渲染的 H5 游戲。
Cocos2d-x
Cocos2d-x 是業(yè)界比較老牌的游戲引擎了漾脂，同時支持 C++ 假颇，Lua 和 JavaScript 三種開發(fā)語言胚鸯，官方用例來看更傾向于 C++ 開發(fā)骨稿，適合做一些中大型游戲開發(fā)。Cocos2d-x 提供 Cocos Creator 游戲開發(fā)工具姜钳，組件化坦冠，腳本化，數(shù)據(jù)驅(qū)動哥桥，跨平臺發(fā)布辙浑。
3D 引擎庫
Three.js
相信對于很多有關(guān)注 3D 游戲的開發(fā)者來說，Three.js 早已經(jīng)耳熟能詳了拟糕。實際上判呕，Three.js 官方定位并不是游戲引擎，而是一個 JS 3D 庫送滞。Three.js 更傾向于展示型的視覺呈現(xiàn)侠草，比較少直接拿 Three.js 來開發(fā) H5 游戲。渲染環(huán)境上犁嗅，Three.js 支持 WebGL 和 CSS3D 兩種渲染模式边涕。
PlayCanvas
從渲染支持程度來看，PlayCanvas 不僅支持 3D WebGL渲染褂微，同時保持到 VR 的支持功蜓，擁有比較好的拓展性。在工具流的支持上宠蚂，提供了在線編輯器和發(fā)布托管等服務(wù)式撼。從官方教程上看，教程也是比較詳細的求厕。
5著隆、測評&體驗
補充一則關(guān)于 pixi, egret, layabox 的測評叠洗。
Part 2: 一個初步結(jié)論
Pixi 和 Phaser 二選一，我倒向 Phaser旅东。不可否認它們都非常優(yōu)秀灭抑，但我是從自己的實際需求觸發(fā)。以下內(nèi)容作為結(jié)論支撐抵代。
1腾节、希望輕松的開發(fā)小游戲
pixi 專注于渲染。我嘗試這個 example 時荤牍，就遇到了插件庫未及時根據(jù)版本的問題案腺，最終不得擱置】党常——也就是說它單純做渲染引擎劈榨，非常優(yōu)秀（phaser2 內(nèi)置它作為渲染引擎，phaser3 已脫離 pixi ）晦嵌，但是作為游戲引擎同辣，它還需要用戶手動拼裝很多第三方插件。這容易讓沒有多少游戲基礎(chǔ)的我們惭载，陷入技術(shù)細節(jié)旱函。
phaser 可以讓我直接入門游戲開發(fā)。從完全小白開始描滔，3個小時 2 個 demo 都順利跑起來（官方示例中由于版本差異及舊代碼未同步棒妨，有些小坑要補一下，不過問題可忽略）含长，rollup + typescript + phaser3 實現(xiàn)起來非常順手券腔。
stackoverflow這里 的回答，也支持了我的選擇拘泞。
2纷纫、社區(qū)豐富
非常容易的搜索到學(xué)習(xí)資料。比如：
1田弥、開發(fā)者文檔 http://book.phaser-china.com
2涛酗、官網(wǎng)中文支持 https://www.phaser-china.com
3、phaser API github-phaser3-docs
4偷厦、中文教程 http://phaser.io/tutorials
5商叹、facebook 即時游戲 guide http://phaser.io/tutorials
6、模版項目多 phaser3-typescript-project-template
7只泼、比如一個教程 https://www.phaser-china.com/
8剖笙、某中文社區(qū) http://club.phaser-china.com
9、江湖大牛 http://blog.xiiigame.com
10请唱、百度貼吧 https://tieba.baidu.com
11弥咪、游戲產(chǎn)品1 https://tarutarolegends.com
有關(guān) Phaser 的信息非常容易獲取过蹂，模版項目緊跟技術(shù)節(jié)奏。（其他很多框架就沒見到開發(fā)者去幫他做模版項目的聚至，足見得開發(fā)者的熱情）
另外 Phaser4 已經(jīng)在 2019 年底開始開發(fā)了酷勺，這回是得到了 Facebook 爸爸的支持。
3扳躬、豐富功能
市面上的 H5 引擎并不少脆诉，但是 Phaser 可以說是 2D 中尤為出色的一個。
Phaser 提供的功能非常全面贷币，比如物理引擎击胜，Phaser3 默認內(nèi)置4種物理引擎，Arcade役纹，P2偶摔，Ninja, Matter.js，各自有各自的適用場景促脉，使用起來也非常方便辰斋。
同時，Phaser 還支持瓦片地圖嘲叔、定時器亡呵、漸變動畫抽活、幀動畫硫戈、滾動背景、對象池下硕、照相機丁逝、粒子系統(tǒng)、圖形繪制梭姓、位圖霜幼、像素圖、圖集誉尖、加載管理罪既、多點觸摸、音視頻等等幾乎你能夠想到的所有做游戲需要的基礎(chǔ)功能铡恕，是目前市面上 2D 的 H5 游戲引擎中功能最豐富的一個琢感。
4、超強定制能力
Phaser 的定制能力到底有多強探熔，可以從兩方面來講驹针。
第一，Phaser 的插件機制诀艰。Phaser 可以允許開發(fā)者通過插件來引入其他強大的能力柬甥，比如通過插件你可以引入box2d物理引擎饮六，引入spine骨骼動畫，引入列表控件等等苛蒲。Phaser 的插件機制為 Phaser 提供了無限可能性卤橄，強大的插件功能使得Phaser 幾乎無所不能。
第二臂外，Phaser 的模塊化編譯虽风。由于 Phaser 是源碼開放的，我們可以從官方 github上獲取其源碼進行編譯寄月，從而編譯出我們自己的 Phaser辜膝。同時，官方的源碼寫得非常漂亮漾肮，在設(shè)計之初就考慮到了模塊化編譯厂抖，比如你不需要 p2 引擎，那么你就可以編譯一個 phaser-arcade-physics 版本克懊，甚至你不需要物理引擎忱辅，那么你可以編譯一個 minimum 版本。只需要在編譯的時候添加一個參數(shù)就好谭溉，十分方便墙懂。
5、移動端及 I/O 支持
多端支持在 Phaser2 就開始了扮念，Phaser3 則做的更好更全面损搬。
6、周邊相關(guān)工具
1柜与、青瓷引擎巧勤，基于 Phaser 引擎
2、白鷺對幾個主要引擎提供的龍骨動畫插件 DragonBones
- dragonBone 編輯器 dragonbones
3弄匕、Unity https://zhuanlan.zhihu.com
沒有最棒颅悉，只有更適合。讀者也可以按照自己的思路迁匠，選擇一款最適合自己口味的渲染引擎剩瓶。
整理信息不易，轉(zhuǎn)載請著名作者和文章鏈接城丧。
