講者介紹

Mia Yang 是Alpha Camp的學長，目前在一個獨立開發遊戲的團隊。因為最新的遊戲專案尚未release，這裡先不公開名字。Mia團隊開發遊戲，主要是使用兩個library：Phaser 和 Vue，以Phaser為遊戲架構，再用Vue補足 component的細緻度，有興趣的人可以參考Mia的部落格。

Phaser簡介

• 開源的遊戲框架，支援 WebGL 與 Canvas 渲染模式
• 是從 pixi 延伸出來的遊戲引擎
• 可在電腦與手機的 Web 瀏覽器運行
• 可透過第三方工具轉成 iOS、Android Native App
• 支援 PWA（progressive web app）
• 允許使用 JavaScript 和 TypeScript 開發
• 目前Phaser有三個版本：Phaser 2（不更新）、Phaser CE（社區版本，接續第２版）、Phaser 3（最新版）。下面的教學範例會以最新的Phaser 3為主

名詞定義

在開始進入教學以前，先定義幾個Phaser遊戲開發時會用到的名詞：

• Game：遊戲主控制器，代表整個遊戲的環境設定。所有的物件都可以從Game讀取，但是不建議，效率差。Phaser有提供其他方法讀取。
• World：一個遊戲裡只有一個World，所有的遊戲物件都在World裡。World可以是任意尺寸，不受舞台邊界限制。（舞台即螢幕的畫面，受邊界限制）
• Scene：每個場景有自己的系統，類似國家的概念。一個World裡可以有好幾個國家。
• Camera：觀察遊戲世界的視野。有明確的位置與大小，並只渲染在視線範圍內的物件。

Phaser開發起手式

0. 準備工作

開始之前可以先下載官方網站的程式碼

• asset/放置遊戲使用的背景與人物圖
• part1.html ~ part10.html 是按照遊戲開發步驟，紀錄不同階段的程式碼。開發者可以觀察加入新的程式碼後的遊戲畫面變化。
• 程式載好以後就可以開始囉！

1. 設定場景

• 設定Config物件，用來設定Phaser遊戲環境。

‍