web遊戲框架哪家強？國內外精選優質框架分析及注意事項

網頁端實現各類小遊戲已是屢見不鮮。微信小遊戲出現後，遊戲（特別是小型遊戲）的開發已經進入了一個至關火爆的時期。那麼做爲一名前端開發者，如何取選擇一個合適的遊戲開發框架來學習和提升開發效率呢？

下面我就和你們一塊兒分享一下：

當今國內外流行的遊戲開發框架有哪些。

每一個框架的特色以及優缺點。

怎樣去選擇一個適合的框架來學習和使用。

使用框架的注意事項。

當今國內外流行的遊戲開發框架有哪些
開發動畫和遊戲，跟咱們作數據交互不同；遊戲和動畫開發起來比較複雜和耗時，是比較依賴框架和工具的。那麼如今都有那些框架和工具呢？下面咱們就來看一下。

每一個框架的特色以及優缺點

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 代碼。

若是須要製做比較複雜的遊戲，圖形化的開發工具是第一選擇。圖形化界面可以大大提高遊戲開發的效率，並且遊戲的結構也是清晰可見，性價比比較高。

若是遊戲需求比較複雜，並且須要接入本身的業務系統。這種狀況，須要先測試圖形化工具縮生成的代碼是否可以順利接入系統，而後再選擇使用。

使用框架的注意事項

最後，給小夥伴們幾個使用框架的建議，下面的都是我通過無數次踩坑總結出來的。

學習使用過程，遇到英文資料或者文檔，建議不要使用翻譯軟件，經過例子和上下文去理解。

注意遊戲的圖片和模型加載，合理使用精靈圖和框架的預加載功能。

開始開發以前，注意測試須要用到的框架屬性，是否存在兼容性問題，特別是安卓和蘋果手機的區別。

多複習一下高中的立體幾何、解析幾何，大學的線性代數、算法和圖形圖像。

跟美工打好關係，作遊戲時，圖片和模型的調整會很是多，沒有他們的配合，很難進行。