theme: channing-cyan

「小遊戲開發」

Web遊戲引擎-CreateJS&Phaser

CreateJS

它是多個庫的集合，EASELJS（控制素材展示與組合）、TWEENJS（控制素材緩動動畫）SOUNDJS（控制聲音）、PRELOADJS（控制載入），通過預載入後的素材展示、動畫、聲音構成遊戲。

Phaser

Phaser 遊戲引擎，除了CreateJS為基礎的展示、聲音、動畫、載入系統，還設計了攝像機、物理引擎、內建瀏覽器、外掛系統等高階功能。

功能引擎

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

Cocos引擎架構：

Web遊戲引擎的渲染原理

1.建立一個Renderer渲染器，獲取它的view（一個canvas物件），新增到Dom Tree中。（或者指定Dom Tree中已經存在的canvas物件作為view）

2.在MainLoop（主迴圈）中呼叫Renderer.render（）並傳入一個DisplayObject作為根節點開發渲染。

3.從場景樹的根節點開始，以zlndex為序從小到大進行深度優先遍歷，對每個節點進行渲染操作，由後往前把整個場景繪製一次。（CanvasRenderer）

4.WebGL的render方法執行過程

遊戲前端開發入門技能樹

瀏覽器渲染模式：
保留模式，
快速模式。

PixiJS+Web開發

PixiJS簡介

PixiJS本質上還是一個渲染引擎。不僅僅能做遊戲，還能使用這個技術去建立任何互動式內容，比如APP，還能夠在它的基礎上做自己的遊戲引擎。

前置技術棧

• Web前端開發基礎
• 用過JSON檔案，知道是用來幹什麼的
• 瞭解過Canvas的繪圖API子

Web專案中載入一個遊戲玩法

1.安裝和引入

npm安裝或者通過script標籤引入

<script src="pixi.min.js"></script>

2.建立Pixi應用和舞臺（Stage）

3.顯示一張圖片

Sprite（精靈）學習CSS的時候可能有聽過精靈圖/雪碧圖的概念，但是Pixi或者更多遊戲引擎中Sprite的概念是一個用於承載影象的物件，你能夠控制它的大小、位置等屬性來產生互動、動畫。

紋理快取（指可以被GPU處理的影象）：Pixi使用紋理快取來儲存和引用Sprite所需要的紋理。紋理的名稱字串就是影象的地址。使用前當然要先把它轉化成紋理儲存在紋理快取中，這時候可以使用PIXI.loader載入進來。

建立了一個Sprite，下一步就是顯示它。舞臺是用來包裹你所有精靈的主要容器。（重點：你不應該看見任何沒有被加入舞臺的精靈）要顯示影象就得把它新增到舞臺中。

4.讓圖片動起來

前面我們說到了可以設定Sprite的位置和大小。需要用到遊戲迴圈將每幀移動一個畫素。（任何遊戲迴圈的程式碼都會每幀呼叫一次）

Cocos Creator編輯器開發

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

Cocos的工作流

節點（cc.Node）是承載元件的實體，我們通過將具有各種功能的元件（比如Sprite、Spine、Label）掛載到節點上，來讓節點具有各式各樣的表現和功能。節點構成節點樹，節點樹影響真實的渲染層級。

小遊戲“小”在哪裡

遊戲釋出平臺的差異性

激發創造

把遊戲開發過程當做一個遊戲，在規則（自己的技術棧、限定主題、限定資源）的約束下通過創意和技術力挑戰一個高質量的遊戲吧！

宣告：
以上內容大部分來自位元組ycaptain老師課堂講解