鳕鱼：「再来要设计对战游戏，可以切换场景，人物可以在场地随意移动，发射武器互相攻击，人物会与墙壁、敌人武器等等发生碰撞。」

电子助教：「感觉好多内容啊，好麻烦喔 _ (:3」ㄥ) _」

鳕鱼：「嘿啊，我也觉得好麻烦 _ (:3」ㄥ) _」

电子助教：「感谢各位读者的观看，此系列在此结束。」

鳕鱼：「不要擅自结束啊！我没有说不做啊」

电子助教：「啊你不是嫌麻烦 (・ˋω´・ )」

鳕鱼：「有 Phaser 就不麻烦」

电子助教：「好吃吗？(´,,•ω•,,)」

鳕鱼：「就说不要只会想吃的！⎝(・ω´・⎝)」

Phaser 是一个游戏引擎，我们先来聊聊甚麽是游戏引擎。

游戏引擎

游戏引擎泛指集成各类游戏所需工具之程序，通常内涵渲染器、物理引情、碰撞侦测、音效、脚本、动画、场景管理等等功能，让游戏开法者不需要从零开始，可以快速、简单的开发游戏，专注於游戏内容设计，而非程序实现。

实际上游戏引擎百百款，但是最出名的通常就那几个，以下列举 2 个相当知名的游戏引擎：

Unity

图片来源：WiKi - Unity

由 Unity Technologies 开发。开发主要语言为 C#。

特色为简单容易上手，学习成本较低，但是制作复杂与多样化效果较为麻烦。

Unreal

图片来源：WiKi - Unreal Engine

又称虚幻引擎，由 Epic Games 开发的游戏引擎。主要开发语言为 C++。

特色为画面精致、效果炫丽，拥有强大的光照与物理效果，但是学习曲线相对高，开发成本也高。

想了解更多游戏引擎相关内容，可察看以下连结：
【专栏】浅谈制作游戏最重要的开发工具「游戏引擎」

JavaScript 游戏引擎

基於 JavaScript 的游戏引擎目前常见的有以下几个

• Egret Engine

  生态系完整，包含编辑器等等开发工具。

• GDevelop

  提供线上编辑器，入门容易。

• Phaser

  社群活络，有相当多教学资源。

• Babylon.js

  可制作 3D 游戏的游戏引擎。

Phaser

图片来源：官方网站

Phaser 为开源的 JavaScript 2D 游戏框架，支援 WebGL 与 Canvas 渲染模式，在官网上可以找到许多开发案例。

本次主题主要使用 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.CANVAS、Phaser.WEBGL 或 Phaser.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