隨着瀏覽器功能越來越強大，在網頁端實現各種小游戲已經是家常便飯。微信小游戲出現后，游戲（特別是小型游戲）的開發已經進入了一個相當火爆的時期。那么作為一個普通的前端開發者，如何取選擇一個合適的游戲開發框架來學習和提高開發效率呢？
我是一名前端開發人員，目前在一家新聞網站擔任前端工作。我的公司不算大，技術部門加起來也就 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 代碼。
-
如果需要制作比較復雜的游戲，圖形化的開發工具是第一選擇。圖形化界面能夠大大提升游戲開發的效率，而且游戲的結構也是清晰可見，性價比比較高。
-
如果游戲需求比較復雜，而且需要接入自己的業務系統。這種情況，需要先測試圖形化工具縮生成的代碼是否能夠順利接入系統，然后再選擇使用。
攝圖網https://www.wode007.com/sites/73204.html VJ師網https://www.wode007.com/sites/73287.html
使用框架的注意事項
最后，給小伙伴們幾個使用框架的建議，下面的都是我經過無數次踩坑總結出來的。
-
學習使用過程，遇到英文資料或者文檔，建議不要使用翻譯軟件，通過例子和上下文去理解。
-
注意游戲的圖片和模型加載，合理使用精靈圖和框架的預加載功能。
-
開始開發之前，注意測試需要用到的框架屬性，是否存在兼容性問題，特別是安卓和蘋果手機的區別。
-
多復習一下高中的立體幾何、解析幾何，大學的線性代數、算法和圖形圖像。
-
跟美工打好關系，做游戲時，圖片和模型的調整會非常多，沒有他們的配合，很難進行。