H5牌九源碼架設小白入門教程
H5牌九源碼架設小白入門教程http://diguaym.com/h5
有問題Q2152876294，官網下載【diguaym.com】很多剛剛接觸到遊戲開發，準備大展拳腳的小鮮肉們，往往在技術選型這第一關就栽了跟頭。畢竟網絡上的遊戲引擎良莠不齊，官網上相關資料也比較少，而選擇一個適合的遊戲引擎是一個項目最基礎，也是很核心的一部分。
試想一下，在遊戲開發進行到中後期的時候，才發現項目引入的遊戲引擎與需求相悖，這時候不管是重新做一些修修補補的工作或者更換遊戲引擎，這都是相當耗費人力物力的一件事。為了避免這種情況的出現，在前期選擇適合項目需求的遊戲引擎顯得尤為重要。
接下來我們來聊一聊如何去選擇適合項目的 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 在工作流的支持上做的是比較好的，從 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 官方提供了 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
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牌九源碼架設小白入門教程