iT邦幫忙

2021 iThome 鐵人賽

DAY 27
1
Modern Web

你渴望連結嗎?將 Web 與硬體連上線吧!系列 第 27

D26 - 「來互相傷害啊!」:站在 Phaser 的肩膀上

本系列文已改編成書「Arduino 自造趣:結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」,本書改用 Vue3 與 TypeScript 全面重構且加上更詳細的說明,

在此感謝 iT 邦幫忙、博碩文化與編輯小 p 的協助,歡迎大家前往購書,鱈魚在此感謝大家 (。・∀・)。

若想 DIY 卻不知道零件去哪裡買的讀者,可以參考此連結 。( •̀ ω •́ )✧


鱈魚:「再來要設計對戰遊戲,可以切換場景,人物可以在場地隨意移動,發射武器互相攻擊,人物會與牆壁、敵人武器等等發生碰撞。」

電子助教:「感覺好多內容啊,好麻煩喔 _ (:3」ㄥ) _」

鱈魚:「嘿啊,我也覺得好麻煩 _ (:3」ㄥ) _」

電子助教:「感謝各位讀者的觀看,此系列在此結束。」

鱈魚:「不要擅自結束啊!我沒有說不做啊」

電子助教:「啊你不是嫌麻煩 (・ˋω´・ )」

鱈魚:「有 Phaser 就不麻煩」

電子助教:「好吃嗎?(´,,•ω•,,)」

鱈魚:「就說不要只會想吃的!⎝(・ω´・⎝)」


Phaser 是一個遊戲引擎,我們先來聊聊甚麼是遊戲引擎。

遊戲引擎

遊戲引擎泛指集成各類遊戲所需工具之程式,通常內涵渲染器、物理引情、碰撞偵測、音效、腳本、動畫、場景管理等等功能,讓遊戲開法者不需要從零開始,可以快速、簡單的開發遊戲,專注於遊戲內容設計,而非程式實現。

實際上遊戲引擎百百款,但是最出名的通常就那幾個,以下列舉 2 個相當知名的遊戲引擎:

Unity

Untitled

圖片來源:WiKi - Unity

由 Unity Technologies 開發。開發主要語言為 C#。

特色為簡單容易上手,學習成本較低,但是製作複雜與多樣化效果較為麻煩。

Unreal

Untitled

圖片來源:WiKi - Unreal Engine

又稱虛幻引擎,由 Epic Games 開發的遊戲引擎。主要開發語言為 C++。

特色為畫面精緻、效果炫麗,擁有強大的光照與物理效果,但是學習曲線相對高,開發成本也高。

想了解更多遊戲引擎相關內容,可察看以下連結:
【專欄】淺談製作遊戲最重要的開發工具「遊戲引擎」

JavaScript 遊戲引擎

基於 JavaScript 的遊戲引擎目前常見的有以下幾個

  • Egret Engine

    生態系完整,包含編輯器等等開發工具。

  • GDevelop

    提供線上編輯器,入門容易。

  • Phaser

    社群活絡,有相當多教學資源。

  • Babylon.js

    可製作 3D 遊戲的遊戲引擎。

Phaser

Untitled

圖片來源:官方網站

Phaser 為開源的 JavaScript 2D 遊戲框架,支援 WebGL 與 Canvas 渲染模式,在官網上可以找到許多開發案例。

Untitled

本次主題主要使用 Phaser 3,找資料的時候要記得注意版本喔

Phaser 中重要的幾樣基礎概念分別為:

  • Game:遊戲主體

    程式主要入口,定義畫面尺寸、渲染方式等等並掛載場景。

  • World:世界

    提供遊戲實際範圍,並讓人物與攝影機在其中動作。

  • Camera:相機

    照相機拍攝範圍即是畫面顯示的範圍,可以讓相機追蹤人物,達成第三人稱動作遊戲效果。

  • Scene:場景

    定義遊戲舞台,載入素材,場景更新等等功能。

  • Sprite:人物

    定義基本物件,用於顯示人物等等互動角色,可透過精靈圖產生動畫效果。設定物理屬性後,可產生物理互動效果。

  • Group:群組

    可用於管理多個 Sprite。

  • Animations:動畫系統

    用於管理精靈圖或序列圖等等,可以將其轉換為動畫。

  • Physics:物理系統

    主要有 Arcade、Matter 兩種,也可以加入別種引擎。

以下依序接紹此單元主要用到的幾個重要內容。

Game

範例:

/** @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.CANVASPhaser.WEBGLPhaser.AUTO,使用 Phsaer.AUTO 會自動依據環境切換。

  • width:畫布寬度

  • hieght:畫布高度

  • scene:場景清單

  • parent:遊戲掛載位置,指定 DOM ID。

  • backgroundColor:背景顏色

  • physics:指定遊戲內使用的物理引擎。

完整參數設定詳見官方文檔

Scene

主要有 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}`);
}

Docs - Phaser.Scene

Sprite

this.cat = this.physics.add.sprite(100, 450, 'cat');

像這樣就可以產生一個包含物理效果的人物了,是不是比起前一主題「跑跑小恐龍」來說簡單很多。

Docs - Phaser.GameObjects.Sprite
Docs - Phaser.Physics.Arcade.Sprite

Animations

先在場景中載入、建立動畫。

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 有基本認識後,讓我們開始開發遊戲吧!

總結

  • 認識並了解為何需要遊戲引擎
  • 認識 Phaser

上一篇
D25 - 「不斷線的侏儸紀」:然後他就死掉了
下一篇
D27 - 「來互相傷害啊!」:運籌帷幄
系列文
你渴望連結嗎?將 Web 與硬體連上線吧!33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言