H5 遊戲開發:遊戲引擎入門推薦

發表於2017-12-28

banner

前言

很多剛剛接觸到遊戲開發,準備大展拳腳的小鮮肉們,往往在技術選型這第一關就栽了跟斗。畢竟網路上的遊戲引擎良莠不齊,官網上相關資料也比較少,而選擇一個適合的遊戲引擎是一個專案最基礎,也是很核心的一部分。
試想一下,在遊戲開發進行到中後期的時候,才發現專案引入的遊戲引擎與需求相悖,這時候不管是重新做一些修修補補的工作或者更換遊戲引擎,這都是相當耗費人力物力的一件事。為了避免這種情況的出現,在前期選擇適合專案需求的遊戲引擎顯得尤為重要。
接下來我們來聊一聊如何去選擇適合專案的 JS 遊戲引擎。

遊戲場景分類

在剛接到遊戲需求時,我們可以從以下幾個方面進行考量,分析出遊戲需求場景所屬,從而作為我們選擇遊戲引擎的依據。

  • 遊戲效果呈現方式( 2D ? 3D ? VR ?)
    這與遊戲引擎能夠支援的渲染方式直接掛鉤。現在的 H5 遊戲渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三種。
    而 2D 渲染一般也有三種:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由於效能原因,一般只適合做一些動畫效果較少,互動較少的小遊戲,本文主要針對 Canvas 和 WebGL 展開介紹。
    一般來說,對於 2D 小遊戲來說,Canvas 渲染已經足夠。然而 Canvas 渲染由於底層封裝層次多,不足以支撐起大型遊戲的效能要求,因此大型遊戲最好選擇 WebGL 渲染或者瀏覽器內嵌 Runtime 。
  • 遊戲複雜度
    這與遊戲引擎能夠支援的功能,提供的API,效能等方面關係比較大。

遊戲引擎推薦

筆者從業界較流行的一些框架,進行以下幾個方面對比,希望能從客觀資料上給大家的技術選型帶來建議和參考。

  • 引擎支援的渲染方式
  • github上的 star 數
  • 更新時間
  • 文件詳細度
  • 周邊產品

2D,3D,VR 都支援的遊戲引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 數 文件詳細程度 周邊產品 備註
Egret YES YES YES YES 2k(最新更新2017.12)
▪ 有中文文件
▪ 例子充足
▪ 社群活躍
遊戲開發過程中的每個環節基本都有工具支撐。 不僅僅提供了一個基於HTML5技術的遊戲引擎,更是提供了原生打包工具和眾多周邊產品
LayaAir YES YES(優先) YES YES 0.7k(最新更新2017.12)
▪ 有中文文件
▪ 例子充足
▪ 社群活躍
提供開發工具和視覺化編輯器 支援2D、3D、VR,能開發超大遊戲,forgame的醉西遊,騰訊的QQ農場,樂動卓越的浪漫h5這些大作就是用它開發
Egret

egret

Egret 周邊產品

白鷺引擎是企業級遊戲引擎,有團隊維護。Egret 在工作流的支援上做的是比較好的,從 Wing 的程式碼編寫,到 ResDepot 和 TextureMerger 的資源整合,再到 Inspector 除錯,最後到原生打包(支援 APP 打包),遊戲開發過程中的每個環節基本都有工具支撐。官網上的示例,教程也是比較多。值得一提的是,今年5月白鷺引擎支援了 WebAssembly ,這對於效能的提升又是一大里程碑。

LayaAir

在渲染模式上,LayaAir 支援 Canvas 和 WebGL 兩種方式;在工具流的支援程度上,主要是提供了 LayaAir IDE。LayaAir IDE 包括程式碼模式與設計模式,支援程式碼開發與美術設計分離,內建了 SWF 轉換、圖集打包、JS 壓縮與加密、APP 打包、Flash 釋出等實用功能。

下圖是主要支援2D遊戲的遊戲引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 數 文件詳細程度 周邊產品 備註
Pixi.js YES YES NO NO 16.8k(最新更新2017.12)
▪ 英文文件
▪ 例子充足
▪ 英文社群
依賴於canvas的WebGL渲染器
Phaser YES YES NO NO 16.9k(最新更2017.07)
▪ 英文文件
▪ 例子充足
▪ 英文社群
提供線上編輯器Phaser Sandbox
CreateJs YES YES NO NO 6.5k(最新更新2017.12)
▪ 英文文件
▪ 例子充足
▪ 有部落格
官方推薦TweenJS,SoundJS,PreloadJS配合使用
Hilo YES YES YES(Hilo3D) NO 4.2k(最新更新2017.12)
▪ 有中文文件
▪ 例子充足
提供資源下載和管理工具 阿里巴巴集團推出,適合開發營銷小遊戲,以Chipmunk為2D物理引擎,與主流物理引擎相容
Cocos2d-x YES YES NO NO 11.2k(最新更新2017.12)
▪ 有中文文件
▪ js例子不多,c++例子較多
▪ 社群活躍
Cocos Creator編輯器,打包工具等 提供的功能相當完整
lufylegend.js YES NO NO NO 0.4k(最新更新2016.03)
▪ 有中文文件
▪ 社群活躍
仿ActionScript3.0的語法,支援Google Chrome,Firefox,Opera,IE9,IOS,Android等多種熱門環境,可以配合Box2dWeb製作物理遊戲,內建了LTweenLite緩動類等
Pixi.js

一般來說,WebGL 的渲染速度都會比 Canvas 快,這是由倆者的繪製路徑決定的。Pixi 最大的特點在於,Pixi 具有完整的 WebGL 支援,卻並不要求開發者掌握 WebGL 的相關知識,並在需要時無縫地回退到 Canvas 。相較於很多同類產品,它的渲染能力是比較強大的。然而,Pixi 也有不足的地方,Pixi 對於動畫的支援是比較缺乏的,在實際開發中,常常需要引進額外的動畫庫,如 GSAP。

Phaser

Phaser 在渲染方面直接封裝了 Pixi;架構方面,Phaser 內嵌了3個物理引擎(Arcade Physics、Ninja、p2.js),提供粒子系統、動畫、預下載和裝置適配方案;相容性方面,Phaser 的焦點是放在移動端瀏覽器上的;API 方面,Phaser 能實現豐富的遊戲功能,適合複雜度高的遊戲開發。

CreateJS

createjs

CreateJs 周邊產品

CreateJS 官方提供了 TweenJS 支援動畫開發,同時通過 SoundJS 和 PreLoadJS 提供了音訊和預下載的支援,對於 H5 遊戲基礎功能的支援是足夠的。在相容性方面,CreateJS 支援 PC 端和移動端幾乎所有的瀏覽器。此外,CreateJS 還支援用 flash CC 開發匯出由 CreateJS 渲染的 H5 遊戲。

Hilo

Hilo 是阿里團隊推出的一個開源專案,支援模組化開發,同時提供了多種模組正規化的包裝版本和跨終端解決方案,適合用來開發營銷小遊戲。其體積也是比較輕量的,只有70kb左右。Hilo 支援 DOM 渲染,Canvas 渲染和 WebGL 渲染,同時整合了 Hilo Audio, Hilo Preload。其後推出的 Hilo 3D 也是其亮點之一。

Cocos2d-x

Cocos2d-x 是業界比較老牌的遊戲引擎了,同時支援 C++ ,Lua 和 JavaScript 三種開發語言,官方用例來看更傾向於 C++ 開發,適合做一些中大型遊戲開發。Cocos2d-x 提供 Cocos Creator 遊戲開發工具,元件化,指令碼化,資料驅動,跨平臺釋出。

lufylegend.js

lufylegend.js 的最新更新是在16年,不過其社群還是十分活躍的,如果遇到什麼開發問題,可以很方便地在社群上找到解決的方案。lufylegend.js 可以支援基礎的遊戲功能,但是其可擴充性不是很強。

主要支援3D遊戲的遊戲引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 數 文件詳細程度 周邊產品 備註
Three.js NO NO YES(傾向) NO 37.6k(最新更新2017.12)
▪ 英文文件
▪ 例子充足
▪ 英文社群
預設Ammo.js為預設物理引擎,基於JavaScript語言的3D庫,耗效能,載入慢,效果一般
PlayCanvas NO NO YES YES 3k(最新更新2017.12)
▪ 英文文件
▪ 例子充足
▪ 英文社群
提供了線上編輯器,釋出託管等 教程較為詳細,入門快
Three.js

threejs

Three.js 示例案例

相信對於很多有關注 3D 遊戲的開發者來說,Three.js 早已經耳熟能詳了。實際上,Three.js 官方定位並不是遊戲引擎,而是一個 JS 3D 庫。Three.js 更傾向於展示型的視覺呈現,比較少直接拿 Three.js 來開發 H5 遊戲。渲染環境上,Three.js 支援 WebGL 和 CSS3D 兩種渲染模式。

PlayCanvas

從渲染支援程度來看,PlayCanvas 不僅支援 3D WebGL渲染,同時保持到 VR 的支援,擁有比較好的擴充性。在工具流的支援上,提供了線上編輯器和釋出託管等服務。從官方教程上看,教程也是比較詳細的。

結語

現在市場上的 H5遊戲引擎很多,很難去直接定義哪個引擎的好壞,只能說每個引擎都有自己的特性,在某方面跟專案的契合程度比較高,筆者根據現在市場上比較熱門的幾大引擎做了幾點比較,希望能給剛入門的你做技術選型的時候有一點幫助,找到適合專案的引擎,更快、更準、更高效率地完成專案需求。

感謝各位耐心讀完,希望能有所收穫,有考慮不足的地方歡迎留言指出。

如果對「H5遊戲開發」感興趣,歡迎關注我們的專欄

相關文章