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

智雲程式設計發表於2018-12-26

網頁端實現各種小遊戲已經是家常便飯。微信小遊戲出現後,遊戲(特別是小型遊戲)的開發已經進入了一個相當火爆的時期。那麼作為一名前端開發者,如何取選擇一個合適的遊戲開發框架來學習和提高開發效率呢?

下面我就和大家一起分享一下:

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

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

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

使用框架的注意事項。

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

當今國內外流行的遊戲開發框架有哪些
開發動畫和遊戲,跟我們做資料互動不一樣;遊戲和動畫開發起來比較複雜和耗時,是比較依賴框架和工具的。那麼現在都有那些框架和工具呢?下面我們就來看一下。

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 遊戲開發沒有其它幾個遊戲框架專業。

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

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

學習

從學習上來說,我推薦初學者挑選純程式碼進行開發的框架(three.js、createjs 和 phaser)進行學習。學習這型別的框架,雖然難度比較大,花時間比較長;但是能夠提高自己的程式碼編寫水平,還能更加深刻地理解遊戲開發。

如果有些小夥伴比較喜歡圖形化介面操作,也可以嘗試 egret 和 coco2d。這兩個框架都是國內比較流行的遊戲框架,學習哪一個都會有所幫助。

如果有小夥伴之前是做 flash 的,我推薦使用 adobe animate 軟體。

這款軟體其實就是以前的 flash 加上了 html5 的 canvas,它既可以生成 flash,也可以製作網頁動畫;製作的方法也以前的 flash 軟體基本一樣,只是多了 JavaScript 程式碼編寫。

工作:

在工作中,特別是一些中小型公司,選擇遊戲框架就跟學習的時候不一樣了。

首先需要明確需要製作什麼型別的遊戲,是否需要接入自己公司的業務系統。

如果是一些小遊戲,類似跳一跳、推箱子等等,可以使用純程式碼開發的框架。這樣無論後面需求是否修改,是否需要接入業務系統,都能夠方便進行修改。

如果遊戲的形式不太清晰,但是需要接入自己業務系統,例如遊戲過後要抽獎、要統計資料等等;也建議優先選擇純程式碼開發的框架,畢竟純程式碼開發的框架,就算前後端沒有完全分離,也可以在頁面上面放 php 或者 java 程式碼。

如果需要製作比較複雜的遊戲,圖形化的開發工具是第一選擇。圖形化介面能夠大大提升遊戲開發的效率,而且遊戲的結構也是清晰可見,價效比比較高。

如果遊戲需求比較複雜,而且需要接入自己的業務系統。這種情況,需要先測試圖形化工具縮生成的程式碼是否能夠順利接入系統,然後再選擇使用。

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

使用框架的注意事項

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

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

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

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

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

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

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2286571/,如需轉載,請註明出處,否則將追究法律責任。

相關文章