青訓營 |「小遊戲開發」筆記

前端場景下的遊戲開發#

開發角色和鏈路#

遊戲開發的團隊分工

組建一個最小但最完整的遊戲開發團隊只需要 3 個人：策劃、程序、美術。

當然，能力足夠強的話可以作為獨立開發者。

基本鏈路

立項階段 -> 原型階段 -> Alpha 版本 -> Beta 階段 -> 运营階段

為什麼要用遊戲引擎#

遊戲引擎最大的優勢：渲染

引擎的誕生就是因為一家公司做了一款遊戲，做下一款遊戲時復用了上一款遊戲的代碼，後來發現這些代碼幾乎每個遊戲都會用到，抽離出來就成了一個引擎。

如果不使用引擎，你可以做複雜的動效渲染和交互嗎？當然可以。方便嗎？不一定。

所以遊戲引擎更像是一套解決方案，讓你在製作某一類型的產品時能夠提高你的開發效率。

你要做多平台移植？React Native、Weex、 Cordova 等方案也可以做到。

你要做物理效果？MatterJS、 ammo.js 等物理引擎可以用。

你要做動畫？CSS 實現又不是不行。複雜點？封裝一個動畫庫。

那為什麼要用遊戲引擎呢？

提供一套完整的實現方案，不需要你再自己去拼湊、封裝
花更少的時間做出更好的效果，特別是關於渲染效率和性能優化。
提供遊戲開發時需要的常見功能
- 引擎會提供許多組件，使用這些組件能縮短開發時間，讓遊戲開發變得更簡單
- 專業引擎通常會能比自製引擎表現出更好的性能。

遊戲引擎通常會包含渲染器，2D/3D 圖形元素，碰撞檢測，物理引擎，聲音，控制器支持，動畫等部分。

前端過渡到遊戲開發#

首先要有一個明確的認知：前端開發和遊戲開發不是相斥的。

現在市場上很多H5 遊戲、小遊戲都是 Web 前端開發製作的，而不是專門的遊戲開發團隊、專業的遊戲研發同學開發。其原因可能在於:

接觸前端開發的研發數量遠大於接觸遊戲開發的數量（招聘成本高）
2d 遊戲引擎的上手門檻已經足夠低（易上手）
活動 H5 中的遊戲玩法的實現方式比較模糊（開發界限模糊）
現在很多主流的 2d 遊戲引擎都支持使用 Javascript 進行開發同時使用相關的工程化能力，也是遊戲開發向 web 前端開發靠攏的一種表現。

因此，以 web 前端開發的視角看 2d 遊戲引擎，無非是一套框架、一套解決方案而已。

但是開發理念上還是有差別的：傳統遊戲開發更關注內容。

遊戲引擎#

市面上常見遊戲引擎#

我們暫且不討論一些端遊的引擎，比如

Unreal （虛幻引擎，代表作《PUBG》、《GTA5》）、
Source （起源引擎，代表作 (《Cs》、《Dota2》）
Frostbite Engine （寒霜引擎，代表作《戰地》、《極品飛車 18》）、
Unity3D （代表作《爐石傳說》、《王者榮耀》）。

路要一步步走，我們先看看我們作為前端開發最容易上手的引擎。

特定類型的客戶端遊戲引擎#

The NVL Maker#

THE NVL Maker文字冒險遊戲製作器

NoCode形式的開發，只需要寫文字腳本加上一定的配置就可以生成一個文字冒險遊戲。

代表作：《Fate/stay night》和 steam 上一眾 GAL Game。

當然，由於缺乏迭代和運營，該遊戲引擎算是比較小眾的。也有一個適用於前端的庫 AVG.js Project。（內核是 PixiJS 作為渲染引擎）

RPG Maker#

RPG Maker 可以Low Code搭建一個關卡類型的遊戲，適合代碼能力不強但是想發揮自己的創意的開發者。

由 RPGMaker 系列遊戲引擎創造的 Steam 暢銷遊戲《To The Moon》

Web 遊戲引擎#

利用 Canvas 和 WebGL 為底層技術抽象的圖像繪製庫（往往還附帶一些其他的功能）

Web 遊戲引擎的通用能力:

預加載
- 遊戲中大量的靜態素材，包括場景、元素、聲音、動畫、模型、貼圖等，如果以原生 JS 進行請求，並統籌請求時間和加載的時機，將會非常麻煩。
- 預加載引擎將加載時機、加載過程加以抽象，解決加載編碼中的效率問題。
展示與圖層、組合系統
- 對於 Web 遊戲編程而言，往往選擇 Canvas 或 WebGL 作為渲染方式（大家可以想想為什麼不用 DOM 作為渲染方式？）。
- Canvas 和 WebGL 作為底層的 API，接口非常基礎，需要大量的編碼來編寫簡單的展示。而且圖形之間沒有組合和圖層，很難處理元素組合和圖層問題。
- 渲染引擎和圖層、組合系統應運而生。
動畫系統：動畫往往被分為緩動動畫和逐幀動畫，這裡討論緩動動畫系統。
- 緩動動畫系統在原生 JS 中需要搭配幀渲染進行考量而進行書寫，代碼量和思考量巨大，抽象程度低，所以需要遊戲引擎動畫系統。
音效和聲音系統：
- 遊戲相較於普通的 Web 前端而言需要更加立體、及時的反饋，聲音和音效是反饋的重要組成部分。
- 聲音和音效系統往往包含了聲音的播放、音量、截止、暫停等功能的集成。

Cocos#

優勢

平台支持能力好
完善的遊戲功能支持
生態較好

缺點

3D 能力仍在建設中
版本迭代過快

Laya#

優勢

3D 能力比較成熟，號稱市場佔有率 90%
支持 JS、TS、AS
引擎體積小

缺點

界面能力不友好
生態很差

Egret#

優勢

工具鏈比較完善
第三方庫支持好
企業定制能力強

缺點

更新迭代遭瓶頸
生態較差

可以看到上述遊戲引擎的界面都是很相似的

CreateJS & Phaser#

這兩個遊戲引擎沒有可視化界面。

以 CreateJS 為例:

它是多個庫的集合

EASELS (控制素材展示與組合)、TWEENJS (控制素材緩動動畫)、 SOUNDIS（控制聲音）、PRELOADIS （控制加載），通過預加載後的素材展示、動畫、聲音構成遊戲。Phaser 遊戲引擎，除了 CreateJS 為基礎的展示、聲音、動畫、加載系統
還設計了攝像機、物理引擎、內置瀏覽器、插件系統等高級功能。

功能引擎#

大型遊戲引擎往往是由小的功能引擎組裝成的，一個大型遊戲引擎往往包含渲染引擎、物理引擎、UI 系統、聲音系統、動畫系統、粒子系統、骨骼系統、網絡系統等組合而成。其中最重要的便是渲染引擎和物理引擎。功能引擎是專注某個方向能力的引擎，其特點是體積小、功能完善。特別是 Pixi.js 和 Three.js 這兩個渲染引擎，通常被誤以為是一個完整的遊戲引擎，但它們是專注渲染能力的渲染引擎。

下面介紹幾種可能會經常接觸的功能引擎:

Pixi.js
- 2D 渲染能力強（尤其是 WebGL）
- 複雜動畫系統、複雜圖片渲染形式、製作自己的 2d 遊戲引擎等
Three.js
- 3D 渲染能力強
- 適合 3D 效果演示或 3D 類的 H5 遊戲或小遊戲
Box2D.js
- 2d 物理引擎
- 物體仿真能力

2D 遊戲引擎的技術架構#

以 Cocos 引擎的架構為例子：

render（渲染器）、collision（）、Physical（）
適配器 for PC、IOS、Andriod、H5…… 以及各平台的構建工具
運行時

Web 遊戲引擎的渲染原理#

以 Pixi 的渲染流程為例子

大致流程如下

創建一個 Renderer 渲染器，獲取它的 view (一個 canvas 對象)，添加到 Dom Tree 中。（或者指定 Dom Tree 中已經存在的 canvas 對象作為 view）
在 MainLoop (主循環）中調用 Renderer.render () 並傳入一個DisplayObject 作為根節點開發渲染。
從場景樹的根節點開始，以 zIndex 為序從小到大進行深度優先遍歷，對每個節點進行渲染操作，由後往前把整個場景繪製一次。(CanvasRenderer)

WebGL 的 render 方法執行過程（科普）

render(displayObject, renderTexture, clear, transform, skipUpdateTransform) {
    // 1.應用變換(GPU級別) 
    this.projection.transform = transform;
    // 2.渲染紋理綁定與BatchRendering處理
    this.renderTexture.bind(renderTexture);
    this.batch.currentRenderer.start();
    // 3.執行元素渲染，將頂點、索引和紋理等數據添加到BatchRendering中
    display0bject.render();
    // 4.執行renderer的繪製方法
    this.batch.currentRenderer.flush();
    //根據傳入的C Lear與renderTexture參數對紋理的處理.。.
    // 5.清空變換
    this.projection.transform = null;
}

Canvas 的 render 方法執行過程

以 Pixi 的渲染流程為例子：

render(displayobject, renderTexture, clear, transform, skipUpdateTransform) {
    const context = this.context;
    // 1.當前狀態壓入狀態棧
    context.save();
    // 2.初始化變換及樣式屬性
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.globaLAlpha = 1;
    this._activeBlendMode = BLEND_MODES.NORMAL;
    this._outerBlend = false;
    context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL];
    // 3.執行元素渲染
    const tempContext = this.context;
    this.context = context;
    display0bject.renderCanvas(this); 
    this.context = tempContext;
    // 4.從狀態棧恢復之前狀態
    context.restore();
}

遊戲開發的技能樹#

PixiJS+Web 開發#

Pixi 簡介#

PixiJS官網乍一看很像一個遊戲引擎，但是上面也明確說了：“用最快、最靈活的 2DWebGL 渲染器創建精美的數字內容”(谷歌機翻)。

它本質上還是一個渲染引擎，而且自稱做得最好。
它不僅僅能做遊戲，還能使用這個技術去創建任何互動式內容，比如APP，還能夠在它的基礎上做自己的遊戲引擎。(AVG.js 和 Phaserjs 的渲染引擎就是 Pixi)

前置技術棧

Web 前端開發基礎
用過 JSON 文件，知道是用來幹什麼的
了解過 Canvas 的繪圖 API

在 web 項目中加載一個遊戲玩法#

安裝和引入
- npm 安裝 或者透過 script 標籤引入<script src=”pixi.min.js" ></script>

創建 Pixi 應用和舞台（Stage）

// 第一步，創建一個顯示的矩形區域，創建一個Pixi應用實例的時候會自動創建一個canvas並計算出怎麼讓你的圖片在canvas中顯示。
let app = new PIXI.Application({width: 250, height: 250 });
// app.stage就是一個[舞台] 它包含了所有你想用Pixi顯示的東西。

// 第二步，把canvas添加到DOM Tree中。這個時候就顯示了一個250*250的純黑色的界面
document.body.appendChild(app.view);
// PIXI.Application計算了應該使用Canvas還是WebGL去渲染圖像，取決於當前瀏覽器支持哪一個，一般優先使用WebGL。

// 如果你希望Canvas是透明的，或者強制使用Canvas模式，可以設置
let app = new PIXI.Application({
    width: 250,
    height: 250,
    transparent: true,
    forceCanvas: true,
});

顯示一張圖片

概念理解：Sprite（精靈）
- 學習 CSS 的時候可能有聽過精靈圖 / 雪碧圖的概念，但是不一樣。Pixi 或者更多遊戲引擎中 Sprite 的概念是一個用於承載圖像的對象，你能夠控制它的大小、位置等屬性來產生互動、動畫。創建和控制 Sprite 是學習 Pixi 很重要的部分
- 而創建一個 Sprite 需要了解圖片怎麼加載到 Pixi 中。這裡就有一個概念：紋理緩存（指可以被 GPU 處理的圖像）
  - Pixi 使用紋理緩存來存儲和引用 Sprite 所需要的紋理。紋理的名稱字符串就是圖像的地址。比如現在有一個 "images/cat.png", 我們就可以使用PIXl.utils.TextureCache["images/cat.png"]來在紋理緩存找到他
  - 找到它當然要先把它轉化成紋理存儲在紋理緩存中，可以使用PIXI.loader加載進來。
    PIXI.loader.add("images/cat.png").load(res => { let sprite = new PIXI.Sprite( PIXI.loader.resources["images/cat.png"].texture ); });
- 現在已經創建了一個 Sprite 了，下一步就是顯示它，將他添加到舞台中
  
  app.stage.addChild(sprite);
讓圖片動起來

前面我們說到了可以設置 Sprite 的位置和大小，那如果我希望每幀移動一個像素呢？這時候就需要用到遊戲循環。（任何遊戲循環的代碼都會每幀調用一次）
```
app.tiker.add(delta => {
	sprite.x += 11;
});
```
然後加億點點細節CacheAsBitmap - PixiJS Examples

Cocos Creator 編輯器開發#

Cocos Creater 介紹#

Q：Cocos Creator 是遊戲引擎嗎？

A：Cocos + 界面編輯它是一個完整的遊戲開發解決方案，包含了輕量高效的跨平台遊戲引擎，以及能讓你更快速開發
遊戲所需要的各種圖形界面工具。

編輯器集成的能力#

Cocos 的工作流#

下載並創建 -> 設計場景 & 開發 -> 預覽和調試 -> ANYSDK 接入 -> 打包發布 -> Cocos Runtime

上圖展示了 Cocos 的工作流

創建項目#

搭建場景#

Cocos 的工作流 ——數據驅動和場景為核心、組件式開發為核心

可以看到，不需要了解 css 等直接通過右側的屬性檢查器就可以調整圖片大小等，低代碼

結點（cc.Node）是承載組件的實體，我們將具有各種功能的組件（如 Sprite、SPine、Label）掛載到節點上來讓節點具有各式各樣的表現和功能。

由節點來構成節點樹，節點樹影響真實的渲染層級

導入資源 + 顯示資源#

從操作系統中的其他窗口拖拽文件到 Cocos Creator 窗口中的資源管理器面板上，就能夠從外部導入資源。該操作會自動複製資源文件到項目資源文件夾下，並完成導入操作。然後把圖片拖到層級管理器即可以生成一個 cc.Sprite。

腳本掛載#

test.js

const { property, ccclass } = cc._decorator;
@ccclass
export default class TestComp extends cc.Component {
    onLoad() {
        console.log('TestComp onload');
    }
    
    start() {}
    
    update(dt) {}

    onDestroy() {}
}