本系列文已改編成書「Arduino 自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」，本書改用 Vue3 與 TypeScript 全面重構且加上更詳細的說明，
在此感謝 iT 邦幫忙、博碩文化與編輯小 p 的協助，歡迎大家前往購書，鱈魚在此感謝大家 (｡･∀･)。
若想 DIY 卻不知道零件去哪裡買的讀者，可以參考此連結 。( •̀ ω •́ )✧
鱈魚：「再來要設計對戰遊戲，可以切換場景，人物可以在場地隨意移動，發射武器互相攻擊，人物會與牆壁、敵人武器等等發生碰撞。」
電子助教：「感覺好多內容啊，好麻煩喔 _ (:3」ㄥ) _」
鱈魚：「嘿啊，我也覺得好麻煩 _ (:3」ㄥ) _」
電子助教：「感謝各位讀者的觀看，此系列在此結束。」
鱈魚：「不要擅自結束啊！我沒有說不做啊」
電子助教：「啊你不是嫌麻煩 (・ˋω´・ )」
鱈魚：「有 Phaser 就不麻煩」
電子助教：「好吃嗎？(´,,•ω•,,)」
鱈魚：「就說不要只會想吃的！⎝(・ω´・⎝)」
Phaser 是一個遊戲引擎，我們先來聊聊甚麼是遊戲引擎。
遊戲引擎泛指集成各類遊戲所需工具之程式，通常內涵渲染器、物理引情、碰撞偵測、音效、腳本、動畫、場景管理等等功能，讓遊戲開法者不需要從零開始，可以快速、簡單的開發遊戲，專注於遊戲內容設計，而非程式實現。
實際上遊戲引擎百百款，但是最出名的通常就那幾個，以下列舉 2 個相當知名的遊戲引擎：
由 Unity Technologies 開發。開發主要語言為 C#。
特色為簡單容易上手，學習成本較低，但是製作複雜與多樣化效果較為麻煩。
又稱虛幻引擎，由 Epic Games 開發的遊戲引擎。主要開發語言為 C++。
特色為畫面精緻、效果炫麗，擁有強大的光照與物理效果，但是學習曲線相對高，開發成本也高。
想了解更多遊戲引擎相關內容，可察看以下連結：
【專欄】淺談製作遊戲最重要的開發工具「遊戲引擎」
基於 JavaScript 的遊戲引擎目前常見的有以下幾個
Egret Engine
生態系完整，包含編輯器等等開發工具。
GDevelop
提供線上編輯器，入門容易。
Phaser
社群活絡，有相當多教學資源。
Babylon.js
可製作 3D 遊戲的遊戲引擎。
Phaser 為開源的 JavaScript 2D 遊戲框架，支援 WebGL 與 Canvas 渲染模式，在官網上可以找到許多開發案例。
本次主題主要使用 Phaser 3，找資料的時候要記得注意版本喔
Phaser 中重要的幾樣基礎概念分別為：
Game：遊戲主體
程式主要入口，定義畫面尺寸、渲染方式等等並掛載場景。
World：世界
提供遊戲實際範圍，並讓人物與攝影機在其中動作。
Camera：相機
照相機拍攝範圍即是畫面顯示的範圍，可以讓相機追蹤人物，達成第三人稱動作遊戲效果。
Scene：場景
定義遊戲舞台，載入素材，場景更新等等功能。
Sprite：人物
定義基本物件，用於顯示人物等等互動角色，可透過精靈圖產生動畫效果。設定物理屬性後，可產生物理互動效果。
Group：群組
可用於管理多個 Sprite。
Animations：動畫系統
用於管理精靈圖或序列圖等等，可以將其轉換為動畫。
Physics：物理系統
主要有 Arcade、Matter 兩種，也可以加入別種引擎。
以下依序接紹此單元主要用到的幾個重要內容。
範例：
/** @type {Phaser.Types.Core.GameConfig} */
const config = {
type: Phaser.WEBGL,
width: 600,
height: 800,
parent: `#game`,
scene: [ScenePreload, SceneWelcome, SceneMain, SceneOver],
backgroundColor: '#FFF',
disableContextMenu: true,
physics: {
default: 'arcade',
arcade: {
// debug: true,
},
},
};
const game = new Phaser.Game(config);
type：渲染方式
可以設定為 Phaser.CANVAS、Phaser.WEBGL 或 Phaser.AUTO，使用 Phsaer.AUTO 會自動依據環境切換。
width：畫布寬度
hieght：畫布高度
scene：場景清單
parent：遊戲掛載位置，指定 DOM ID。
backgroundColor：背景顏色
physics：指定遊戲內使用的物理引擎。
完整參數設定詳見官方文檔。
主要有 4 個生命週期函數
init()：初始化變數與設定。preload()：載入各類素材。create()：建立 Sprite 或動畫等等物件。update()：畫面更新，預設每秒執行 60 次，控制人物移動、碰撞偵測等等。範例：
function init() {
this.health = 0;
}
function preload() {
this.load.image('cat','@/assets/cat-vs-dog/cat-work.png')
}
function create() {
this.catHealthText = this.add.text(20, 20, `貓命：${this.health}`, {
fill: '#000',
fontSize: 14,
});
}
function update() {
this.catHealthText.setText(`貓命：${this.health}`);
}
this.cat = this.physics.add.sprite(100, 450, 'cat');
像這樣就可以產生一個包含物理效果的人物了，是不是比起前一主題「跑跑小恐龍」來說簡單很多。
Docs - Phaser.GameObjects.Sprite
Docs - Phaser.Physics.Arcade.Sprite
先在場景中載入、建立動畫。
function preload() {
this.load.spritesheet('cat-work', '@/assets/cat-vs-dog/cat-work.png',
{ frameWidth: 300, frameHeight: 300 }
);
}
function create() {
this.anims.create({
key: 'cat-work',
frames: this.anims.generateFrameNumbers('cat-work', { start: 0, end: 1 }),
frameRate: 4,
repeat: -1,
});
}
就可以在 Sprite 中使用動畫
this.cat.play('cat-work');
對 Phaser 有基本認識後，讓我們開始開發遊戲吧！
iThome鐵人賽
看影片追技術
