前端遊戲框架哪個好
隨著瀏覽器功能越來越強大，在網頁端實現各種小遊戲已經是家常便飯。微信小遊戲出現後，遊戲（特別是小型遊戲）的開發已經進入了一個相當火爆的時期。那麼作為一個普通的前端開發者，如何取選擇一個合適的遊戲開發框架來學習和提高開發效率呢？
本場 Chat 將包含以下內容：
- 當今國內外流行的遊戲開發框架有哪些
- 每個框架的特點以及優缺點
- 怎樣去選擇一個適合的框架來學習和使用
- 使用框架的注意事項
我是一名前端開發人員，目前在一家新聞網站擔任前端工作。我的公司不算大，技術部門加起來也就 20 來人，算一箇中小型的公司，主要做的是宣傳方面的工作。由於公司主要是做宣傳方面的工作，所以也是比較注重宣傳的形式以及展現出來的效果。
正由於公司的性質，我所做的可能跟很多其他的前端工作者不一樣。我所接觸的技術，更多是 css3 動畫，canvas 動畫以及 webgl；而不是 vue、react 和 angular 這一些跟資料打交道比較多的框架和類庫。
處在這樣一個環境下，讓我對前端動畫和小遊戲有了一定程度的瞭解，下面我就和大家一起分享一下我在這方面的一些小見解。
- 當今國內外流行的遊戲開發框架有哪些。
- 每個框架的特點以及優缺點。
- 怎樣去選擇一個適合的框架來學習和使用。
- 使用框架的注意事項。
當今國內外流行的遊戲開發框架有哪些
開發動畫和遊戲，跟我們做資料互動不一樣；遊戲和動畫開發起來比較複雜和耗時，是比較依賴框架和工具的。那麼現在都有那些框架和工具呢？下面我們就來看一下。
| Name | 2D | 3D |
|---|---|---|
| Three.js | no | yes |
| Phaser | yes | no |
| Createjs | yes | no |
| Egret | yes | yes |
| Cocos2d-js | yes | no |
每個框架的特點以及優缺點
上面表格的框架，是我總結出來，比較多同行關注並且學習使用的框架。
Three.js
一款歷史比較悠久的開源專案，準確地說它不是一個遊戲引擎，是一個 JavaScript 的 3D 庫。然而我們可以用它來做各種的 3D 效果和遊戲。
優點：
專注於三維效果的 JavaScript 實現，能夠在網頁端實現大部分三維效果。
文件齊全，並具有搜尋功能，方便快速查閱。
國外專案，目前仍然持續更新，不需要擔心沒人維護國外。
純 js 程式碼開發，引入庫即可用，不需要藉助其他工具，方面接入任何的系統。
缺點：
文件大部分是英文，需要具備一定英文水平才能讀懂。
學習難度比較大，除了 js 程式碼基礎，還需要具備高中的幾何知識、webgl 知識、線性代數等等。
國內例子相對比較少，中文教程也不多，基本上都是看官網的例子和文件進行學習和研究。
網頁 3d 效果的相容性和效能問題，需要詳細研究需求後才能使用。
Phaser
免費開源的 html5 遊戲框架，支援 canvas 和 webgl 渲染，github 上 2w + star，比較不錯的遊戲框架。
優點：
專注於 2d 遊戲的 JavaScript 實現，集合了渲染、物理引擎，能夠完成大部分小遊戲。
使用方法簡單，容易上手。
官方網站上有大量例子，程式碼都不負責，基本需要使用的效果都能找到對應的例子。
純 js 程式碼開發，引入庫即可用，不需要藉助其他工具，方面接入任何的系統。
能夠在微信小遊戲中使用，並支援 typescript。
缺點：
官方文件大部分是英文，並且沒有搜尋功能，需要按照類一層層往下搜尋；假如在官方例子中找不到合適的程式碼，需要花時間研究文件。
目前穩定版本是 2.10，但是版本是社群維護；官方在開發新的 3.0 版本，暫時還在調整階段。
由於純程式碼編寫，如果遊戲邏輯複雜，程式碼會比較多和繁瑣，需要在前期做比較好的規劃。
Createjs
免費開源的 html5 遊戲、動畫和互動應用框架，adobe animate 軟體基於該庫來生成程式碼。
優點：
動畫和互動效果小能手，眾多好看和高質量的 h5 展示效果使用 createjs 製作。
可以使用純程式碼開發，或者使用 adobe animate 軟體開發。
國內教程比較豐富，學習成本不大。
核心庫分為四個，分別支援渲染、動畫、預載入和音訊，可以按需求載入對於庫。
缺點：
例子相對較少，遇到新或者複雜的需求，基本需要檢視 api，無法尋找相似例子。
沒有封裝好粒子系統、骨骼動畫、瓦片地圖等等，輕量級的庫，不適合大型遊戲。
動畫製作一般需要大量圖片，涉及圖片壓縮和使用精靈圖方面的技術。
Egret
國內優秀的遊戲製作引擎，具備一整套的開發工具和教程。
優點：
大型遊戲製作能手，能夠使用圖形化工具製作遊戲，效能優越。
使用 typescript 開發業務邏輯，程式碼規範。
中文文件和教程，學習方便。
同時支援 3d 和 2d，並且帶有各種模組，遊戲製作基本屬於全能。
支援接入微信小遊戲。
缺點：
需要使用工具開發，不方便接入其他業務系統。
雖然具備中文文件，當時需要熟悉各種工具，學習成本不低。
例子相對較少，製作大型遊戲需要大量填坑。
Cocos2d-js
歷史比較悠久的遊戲開發框架，類似 egret。
優點：
2D 優秀開發引擎，同樣使用圖形化工具製作遊戲，操作方便。
核心使用 JavaScript 編寫。
中文文件和教程，學習方便，並且資料和例子豐富。
功能相當完整，遊戲中需要的功能幾乎都能夠找到。
支援接入微信小遊戲。
缺點：
需要使用工具開發，不方便接入其他業務系統。
需要熟悉各種工具，學習成本不低，這點類似 egret。
擅長 2D 遊戲開發，3D 遊戲開發沒有其它幾個遊戲框架專業。
怎樣去選擇一個適合的框架來學習和使用
學習：
從學習上來說，我推薦初學者挑選純程式碼進行開發的框架（three.js、createjs 和 phaser）進行學習。學習這型別的框架，雖然難度比較大，花時間比較長；但是能夠提高自己的程式碼編寫水平，還能更加深刻地理解遊戲開發。
如果有些小夥伴比較喜歡圖形化介面操作，也可以嘗試 egret 和 coco2d。這兩個框架都是國內比較流行的遊戲框架，學習哪一個都會有所幫助。
如果有小夥伴之前是做 flash 的，我推薦使用 adobe animate 軟體。
這款軟體其實就是以前的 flash 加上了 html5 的 canvas，它既可以生成 flash，也可以製作網頁動畫；製作的方法也以前的 flash 軟體基本一樣，只是多了 JavaScript 程式碼編寫。
工作：
在工作中，特別是一些中小型公司，選擇遊戲框架就跟學習的時候不一樣了。
首先需要明確需要製作什麼型別的遊戲，是否需要接入自己公司的業務系統。
如果是一些小遊戲，類似跳一跳、推箱子等等，可以使用純程式碼開發的框架。這樣無論後面需求是否修改，是否需要接入業務系統，都能夠方便進行修改。
如果遊戲的形式不太清晰，但是需要接入自己業務系統，例如遊戲過後要抽獎、要統計資料等等；也建議優先選擇純程式碼開發的框架，畢竟純程式碼開發的框架，就算前後端沒有完全分離，也可以在頁面上面放 php 或者 java 程式碼。
如果需要製作比較複雜的遊戲，圖形化的開發工具是第一選擇。圖形化介面能夠大大提升遊戲開發的效率，而且遊戲的結構也是清晰可見，價效比比較高。
如果遊戲需求比較複雜，而且需要接入自己的業務系統。這種情況，需要先測試圖形化工具縮生成的程式碼是否能夠順利接入系統，然後再選擇使用。
使用框架的注意事項
最後，給小夥伴們幾個使用框架的建議，下面的都是我經過無數次踩坑總結出來的。
學習使用過程，遇到英文資料或者文件，建議不要使用翻譯軟體，通過例子和上下文去理解。
注意遊戲的圖片和模型載入，合理使用精靈圖和框架的預載入功能。
開始開發之前，注意測試需要用到的框架屬性，是否存在相容性問題，特別是安卓和蘋果手機的區別。
多複習一下高中的立體幾何、解析幾何，大學的線性代數、演算法和圖形影象。
跟美工打好關係，做遊戲時，圖片和模型的調整會非常多，沒有他們的配合，很難進行。
本文首發於GitChat，未經授權不得轉載，轉載需與GitChat聯絡。
一場場看太麻煩？訂閱GitChat體驗卡，暢享300場chat文章！更有CSDN下載、CSDN學院等超划算會員權益！點選檢視