Loading...

講者介紹

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

Phaser簡介

  • 開源的遊戲框架,支援 WebGLCanvas 渲染模式
  • 是從 pixi 延伸出來的遊戲引擎
  • 可在電腦與手機的 Web 瀏覽器運行
  • 可透過第三方工具轉成 iOS、Android Native App
  • 支援 PWA(progressive web app)
  • 允許使用 JavaScript 和 TypeScript 開發
  • 目前Phaser有三個版本:Phaser 2(不更新)、Phaser CE(社區版本,接續第2版)、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遊戲環境。

延伸閱讀

更多好文章推薦給你!

No items found.