Phaser -- HTML 遊戲框架

第 1 章    Phaser 簡介

(1) HTML5 遊戲引擎

∗ HTML5 遊戲的優勢

▸ 跨平台:只要有瀏覽器即可,不論桌上型、手機、平板、或其他裝置

▸ 不需下載任何套件

▸ 各式各樣的 HTML5 遊戲引擎:https://html5gameengine.com/

∗ Phaser

▸ Phaser 是一個 HTML5 遊戲框架 (Game framework),協助開發跨平台的 2D 遊戲

▸ 於 2013 年由 Richard Davey 研發

▸ 建構於 Pixi.js 之上

▸ 有強大社群支援,每隔幾週就有新版本推出

▸ 瀏覽器需支援 HTML5 之 <canvas> 標籤

∗ 為何選 Phaser?因為 Phaser

▸ 在各種平台均運作良好

▸ 功能強大,文件完整,維護完善、開源軟體、免費

∗ Phaser 相關連結

▸ 官網:http://phaser.io/

▸ Github:https://github.com/photonstorm/phaser/

▸ 技術文件:http://docs.phaser.io/

▸ 程式範例:http://examples.phaser.io/

▸ 討論區:http://www.html5gamedevs.com/forum/14-phaser/

(2) 文字編輯器

∗ HTML 及 JavaScript 都是純文字檔

▸ 使用文字編輯器編輯

▸ 常用的文字編輯器:Sublime Text, Brackets, Atom, Bluefish, notepad++

▸ 在 Ubuntu 系統上安裝 Brackets:兩種方式

1. 利用 Ubuntu PPA (此方式較好,版本會自動更新)
$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets
2. 下載安裝檔:http://brackets.io/,再進行安裝

▸ 在 Windows 或 Mac 安裝 Brackets:

✶ 下載安裝檔:http://brackets.io/,再進行安裝

▸ 設定 Brackets

✶ 設定中文繁體介面:Debug --> Switch Language --> 繁體中文 --> Reload Brackets
✶ 選擇字型:檢視 --> 佈景主題 --> 字體大小:14px,字體 (選等寬字體):
# Ubuntu:DejaVu Sans Mono
# MS Windows:Consolas
✶ 設定按下 Tab 鍵的結果是輸入 2 個空白,而不是定位鍵
# 點選右下方設定:最後呈現「空白字元:2
# 註:在空白處移動游標時,看起來還是一次移動 2 格 (感覺上還是輸入了定位鍵), 這是 Brackets 的智慧功能,一次跳至所設定空白字元的數量
✶ 因為 Brackets 的智慧縮排一點也不智慧,且 JavaScrit 語法錯誤偵測 (JsLint) 也不好用,因此將兩個都停用
# 在 Brackets 裡,點選 「除錯」 --> 「開啟喜好設定檔」 (或:Debug --> Open Preferences File) 即可編輯 brackets.json 設定檔,在最後加入 2 行
{
    "brackets-eslint.gutterMarks": true,
    .
    .
    ...,
    "smartIndent": false,
    "linting.enabled": false
}
# 註:原先最後一行後面要加逗點,加入後的最後一行沒有逗點

(3) 網站伺服器

∗ 直接在瀏覽器開啟 Phaser 遊戲的 HTML 檔案無法運作

▸ 因為安全考量,JavaScript 不允許從本地端載入檔案

▸ 需要執行網站伺服器 (Web server) 軟體

∗ 網站伺服器

▸ Windows:WAMP ServerXAMPP

▸ OS X:MAMP

▸ 跨平台開發環境伺服器

✶ Python HTTP Server ($ python3 -m http.server)
✶ Brackets 內建伺服器

(4) 下載並設定 Phaser

∗ 遊戲目錄結構規劃如下:

games/
   phaser/
      phaser.min.js
   <gameName>/
      index.html
      assets/
      js/

▸ 最上層目錄:games (以 Ubuntu 作業系統為例, 可以設在 /home/<username>/目錄之下,其中 <username> 是登入的使用者名稱)

games/phaser:置放 phaser.min.js 檔案,讓所有專案共用

phaser.min.js:Minified 檔案,將所有空白及空行刪除,減少檔案大小
✶ 至 Phaser download 點選 min.js 下載 phaser.min.js,並置於 games/phaser 目錄
✶ 如需下載所有資料,可點選 zip

games/<gameName>:遊戲專案目錄

index.html:HTTP 協定中預設的 HTML 檔案名稱,在 URL 中不需輸入此檔名
assets:資產目錄,置放所有多媒體檔案
js:置放專案的 JavaScript 檔案

▸ 註:本教材的目錄架構主要以 Ubuntu 作業系統的表示法為主,在 Windows 系統中的目錄則以反斜線 (\) 表示

∗ Phaser 之執行需要有網站伺服器 (Web server),Brackets 有內建伺服器

▸ 需設定正確的 Web server 的根目錄,以前述的目錄結構為例,應設為 games 目錄

▸ 設定根目錄:檔案 --> 開啟資料夾 --> <...>/games --> 開啟

▸ 新增檔案或資料夾:右鍵點左側欄空白部份 --> 新增檔案或新增資料夾

(5) 第一個遊戲:hellophaser

∗ 建立第一個遊戲專案 hellophaser:旋轉 Phaser Logo 影像

▸ 確認 Brackets 中的目前目錄為 <...>/games/

▸ 專案目錄規劃如下:

games/
   hellophaser/
      index.html
      assets/
         logo.png
      js/
         main.js

▸ 新增專案:右鍵點左側欄空白部份 --> 新增資料夾 --> 輸入目錄名稱: hellophaser

▸ 下載資產 assets01.zip, 解壓縮後置於 hellophaser 目錄下,內含以下 logo.png 影像:

logo

∗ 建立 index.html 檔案

▸ 右鍵點左側欄 hellophaser 目錄 --> 新增檔案 --> 檔名: index.html,內容如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="gameDiv"></div>
<script src="../phaser/phaser.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
✶ 以上藍色部份:HTML5 的標準格式
<div id="gameDiv">:設定一個<div> 標籤 (Division,區塊),IDgameDiv, 遊戲視窗將置於此
✶ 兩個 <script ...> 指令:分別載入 phaser.min.jsjs 目錄下的 main.js 程式檔
# JavaScript 程式應放在網頁最後 (即 </body> 之前), 以確保所有 HTML 元素都載入完畢後才載入 JavaScript 程式
# JavaScript 程式的執行與載入順序有關,因此 phaser.min.js 要放在 main.js 之前

∗ 建立初始 main.js 檔案:Phaser 的基本架構

▸ 右鍵點左側欄 hellophaser 目錄 --> 新增資料夾 --> 名稱: js

▸ 右鍵點左側欄 js 目錄 --> 新增檔案 --> 名稱: main.js,內容如下:

var main = {

  preload: function() {
  },

  create: function() {
  },

  update: function() {
  },

};

var game = new Phaser.Game(400, 300, Phaser.AUTO, 'gameDiv');
game.state.add('main', main);
game.state.start('main');

var main = { ... };:定義一個 JavaScript 物件 main

✶ 一個遊戲可以有許多場景 (Scene),例如:首頁場景 (可以選擇要選哪個遊戲,要選哪種複雜度,...) 、遊戲 1 的場景、 遊戲 2 的場景、初級遊戲 1 的場景、高級遊戲 1 的場景等,Phaser 將場景稱為「狀態」(State)
✶ 本專案僅有一個狀態,因此命名為 main

▸ 接著在 main 物件中,定義三個方法特性 (Function property): preload, create, update (這些是 Phaser 預設的名稱,不能改變)

✶ Phaser 的執行流程:
phaserProcess
# preload (預載):在遊戲開始前,預先載入相關資產,例如影像、音訊、視訊等
# create (產生):在 preload 之後執行,進行遊戲的相關設定, 並產生各個物件
# update (更新):在 create 之後執行,內容為遊戲的邏輯, 遊戲開始後需經常更新狀態,此階段每秒鐘重複執行約 60 次 (由電腦運算速度決定)

var game = ...:產生一個 Phaser.Game 物件, 即為此遊戲物件,並指派給全域變數 game

Phaser.Game() 的前兩個參數:Phaser 所產生畫布元素 (Canvas element) 的寬度與高度 (單位:像素,pixel)
✶ 第三個參數:呈現畫面所使用的技術
# Phaser.CANVAS:使用 Canvas 技術
# Phaser.WEBGL:使用 WebGL 技術 (較先進)
# Phaser.AUTO:如果瀏覽器支援就使用 WebGL,否則使用 Canvas
✶ 第四個參數:文件物件模型的元素 ID,Canvas 會放在該處,目前設為 gameDiv

game.state.add('main', main);:將 main 狀態加入 game 中,並命名為 main

game.state.start('main');:開始 main 狀態 (亦即開始遊戲),Phaser 就會循序執行 preload, create, 及 update,並且重複執行 update

∗ 測試:

▸ 確認網站伺服器的根目錄為 <...>/games,如此 HTML 檔案才能順利找到 phaser.min.jsmain.js 兩個檔案, main.js 裡的程式也才能順利找到 assets/ 目錄

✶ 檔案 --> 開啟資料夾 --> <...>/games/

▸ 開啟 index.html 檔案,然後啟動本機伺服器:

✶ 檔案 --> 即時預覽:可看到一個 400x300 的黑色區塊,此即為遊戲視窗區塊
✶ 亦可點擊編輯器右上方的即時預覽按鈕 dom

▸ 瀏覽器的 URL 欄位可輸入 (xxxxx 為埠號,Brackets 會指定):

127.0.0.1:xxxxx/hellophaser
127.0.0.1:xxxxx/hellophaser/index.html
localhost:xxxxx/hellophaser
localhost:xxxxx/hellophaser/index.html

▸ 如果改使用 Python 伺服器,可在終端機中先到達網站伺服器根目錄 (<...>/games/),然後再啟動伺服器 (預設埠號 8000):

$ cd <...>/games
$ python3 -m http.server
✶ 然後於瀏覽器的 URL 欄位輸入:localhost:8000/hellophaser/

∗ 修改 main.js:定義三個函式

preload:利用 game.load.image() 函式將 logo.png 影像載入 game 中,並設定其「資產鍵」 (Asset key) 為 logo

  preload: function() {
    game.load.image('logo', 'assets/logo.png');
  },

create

✶ 精靈 (Sprite) 是 Phaser 遊戲中的命脈,幾乎所有可設定特性的物件都是精靈
✶ 利用函式 game.add.sprite() 及資產 logo 在遊戲中加入一個精靈,位置在 (200, 150)
  create: function() {
    this.logoSprite = game.add.sprite(200, 150, 'logo');
  },
# this.<propertyName>:宣告 JavaScript 物件的特性 (Property)
✶ 遊戲視窗座標:左上角位置為 (0, 0),x 軸為橫軸由左往右,y 軸為縱軸由上往下,如下圖
coord
✶ 測試:可看到有一個 Phaser Logo 影像的遊戲視窗

update:利用屬性 angle 在每次執行 update 時將精靈角度加 1 便可產生一個旋轉影像

  update: function() {
    this.logoSprite.angle += 1;
  },

▸ 結果:

coord

上一章       下一章