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遊戲環境。

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者

學期三|軟體工程師養成

養成業界接軌的實戰能力

前端/全端工程師專修路徑,完成技能與求職準備,成為業界即戰力