跳至主要内容

🎮 基本語法(七) - 動畫

我們之前是用土炮的方式來切換圖片,達到動畫效果,今天我們來用比較正規得方式來做動畫

今天的動畫是要讓雞在沙漠走來走去

  • 先載入雞與背景的圖片

  • 我們這邊使用 spritesheet 來設定每一偵的寬高

    mImg

class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

/**
* 載入素材
*/
preload() {
// 載入素材
// bg1 -> 圖片載入後的物件名稱(key)
this.load.image("bg1", "../assets/backgrounds/desert.webp");

// 載入雞動畫
this.load.spritesheet("chicken", "../assets/roles/chickenGo.png", {
frameWidth: 32,
frameHeight: 32,
});
}
}

接下接下來需要設定雞的圖片應該從第幾偵開始

  • 我們這邊多給一個參數表示從第 12 格開始 this.add.sprite(50, 200, "chicken", 12)
  • 並且把雞放大 1.5 倍
class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

/**
* 載入素材
*/
preload() {
// 載入素材
// bg1 -> 圖片載入後的物件名稱(key)
this.load.image("bg1", "../assets/backgrounds/desert.webp");

// 載入雞動畫
this.load.spritesheet("chicken", "../assets/roles/chickenGo.png", {
frameWidth: 32,
frameHeight: 32,
});
}

/**
* 生成物件
*/
create() {
// 1. 背景
let bg = this.add.sprite(0, 0, "bg1");

//取得寬高
let width = this.sys.game.config.width / 2;
let height = this.sys.game.config.height / 2;

//設定位置
bg.setPosition(width, height);

// 2. 雞
this.chicken = this.add.sprite(50, 200, "chicken", 12);

// 把雞放大 1.5 倍
this.chicken.setScale(1.5);
}
}

建立動畫

  • 這邊使用 this.anims.create 來建立動畫
  • start end ,表示動畫應該從哪格開始與結束
  • 我們分別建立一個向左走與向右走的動畫
class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

/**
* 載入素材
*/
preload() {
// 載入素材
// bg1 -> 圖片載入後的物件名稱(key)
this.load.image("bg1", "../assets/backgrounds/desert.webp");

// 載入雞動畫
this.load.spritesheet("chicken", "../assets/roles/chickenGo.png", {
frameWidth: 32,
frameHeight: 32,
});
}

/**
* 生成物件
*/
create() {
// 1. 背景
let bg = this.add.sprite(0, 0, "bg1");

//取得寬高
let width = this.sys.game.config.width / 2;
let height = this.sys.game.config.height / 2;

//設定位置
bg.setPosition(width, height);

// 2. 雞
this.chicken = this.add.sprite(50, 200, "chicken", 12);

// 把雞放大 1.5 倍
this.chicken.setScale(1.5);

// 建立雞向右走的動畫
this.anims.create({
key: "chickenGoRight",
frames: this.anims.generateFrameNumbers("chicken", {
start: 12,
end: 15,
}),
frameRate: 4,
});

this.anims.create({
key: "chickenGoLeft",
frames: this.anims.generateFrameNumbers("chicken", {
start: 4,
end: 7,
}),
frameRate: 4,
});
}
}

播放動畫

  • 這時候我們想要點擊畫面雞就會出發
  • 點擊畫面會用到 this.input.activePointer.isDown
  • 接下來就是播放動畫了 this.chicken.anims.play("chickenGoRight", true)
  • 並且要幫雞的 x 軸 +1 他才會往右前進
class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

/**
* 載入素材
*/
preload() {
// 載入素材
// bg1 -> 圖片載入後的物件名稱(key)
this.load.image("bg1", "../assets/backgrounds/desert.webp");

// 載入雞動畫
this.load.spritesheet("chicken", "../assets/roles/chickenGo.png", {
frameWidth: 32,
frameHeight: 32,
});
}

/**
* 生成物件
*/
create() {
// 1. 背景
let bg = this.add.sprite(0, 0, "bg1");

//取得寬高
let width = this.sys.game.config.width / 2;
let height = this.sys.game.config.height / 2;

//設定位置
bg.setPosition(width, height);

// 2. 雞
this.chicken = this.add.sprite(50, 200, "chicken", 12);

// 把雞放大 1.5 倍
this.chicken.setScale(1.5);

// 建立雞向右走的動畫
this.anims.create({
key: "chickenGoRight",
frames: this.anims.generateFrameNumbers("chicken", {
start: 12,
end: 15,
}),
frameRate: 4,
});

this.anims.create({
key: "chickenGoLeft",
frames: this.anims.generateFrameNumbers("chicken", {
start: 4,
end: 7,
}),
frameRate: 4,
});
}

update() {
if (this.input.activePointer.isDown) {
this.chicken.x += 1;
this.chicken.anims.play("chickenGoRight", true);
}
}
}

讓雞回家

  • 現在一直點著螢幕,雞就會離家出走
  • 跑出螢幕外就回不了家了
  • 因此我們加一個變數,來判斷雞是不是該回家了
  • 並且偵測機是不是走到世界的盡頭,是的話就讓他回頭
class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

/**
* 載入素材
*/
preload() {
// 載入素材
// bg1 -> 圖片載入後的物件名稱(key)
this.load.image("bg1", "../assets/backgrounds/desert.webp");

// 載入雞動畫
this.load.spritesheet("chicken", "../assets/roles/chickenGo.png", {
frameWidth: 32,
frameHeight: 32,
});
}

/**
* 生成物件
*/
create() {
// 1. 背景
let bg = this.add.sprite(0, 0, "bg1");

//取得寬高
let width = this.sys.game.config.width / 2;
let height = this.sys.game.config.height / 2;

//設定位置
bg.setPosition(width, height);

// 2. 雞
this.chicken = this.add.sprite(50, 200, "chicken", 12);

// 把雞放大 1.5 倍
this.chicken.setScale(1.5);

// 建立雞向右走的動畫
this.anims.create({
key: "chickenGoRight",
frames: this.anims.generateFrameNumbers("chicken", {
start: 12,
end: 15,
}),
frameRate: 4,
});

this.anims.create({
key: "chickenGoLeft",
frames: this.anims.generateFrameNumbers("chicken", {
start: 4,
end: 7,
}),
frameRate: 4,
});
}

#isChickenGoHome = false;
update() {
// 雞沒有再回家才能走

if (this.input.activePointer.isDown) {
if (this.#isChickenGoHome === false) {
this.chicken.x += 1;
this.chicken.anims.play("chickenGoRight", true);
} else {
this.chicken.x -= 1;
this.chicken.anims.play("chickenGoLeft", true);
}
}

// 如果雞超過場景就讓他跑回家
if (this.chicken.x >= this.sys.game.config.width) {
this.#isChickenGoHome = true;
} else if (this.chicken.x <= 0) {
this.#isChickenGoHome = false;
}
}
}

此時此刻的雞,就會乖乖散步也不會離家出走了,我們明天再來監視這隻雞確保他不會亂跑


遊戲場景

class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

/**
* 載入素材
*/
preload() {
// 載入素材
// bg1 -> 圖片載入後的物件名稱(key)
this.load.image("bg1", "../assets/backgrounds/desert.webp");

// 載入雞動畫
this.load.spritesheet("chicken", "../assets/roles/chickenGo.png", {
frameWidth: 32,
frameHeight: 32,
});
}

/**
* 生成物件
*/
create() {
// 1. 背景
let bg = this.add.sprite(0, 0, "bg1");

//取得寬高
let width = this.sys.game.config.width / 2;
let height = this.sys.game.config.height / 2;

//設定位置
bg.setPosition(width, height);

// 2. 雞
this.chicken = this.add.sprite(50, 200, "chicken", 12);

// 把雞放大 1.5 倍
this.chicken.setScale(1.5);

// 建立雞向右走的動畫
this.anims.create({
key: "chickenGoRight",
frames: this.anims.generateFrameNumbers("chicken", {
start: 12,
end: 15,
}),
frameRate: 4,
});

this.anims.create({
key: "chickenGoLeft",
frames: this.anims.generateFrameNumbers("chicken", {
start: 4,
end: 7,
}),
frameRate: 4,
});
}

#isChickenGoHome = false;
update() {
// 雞沒有再回家才能走

if (this.input.activePointer.isDown) {
if (this.#isChickenGoHome === false) {
this.chicken.x += 1;
this.chicken.anims.play("chickenGoRight", true);
} else {
this.chicken.x -= 1;
this.chicken.anims.play("chickenGoLeft", true);
}
}

// 如果雞超過場景就讓他跑回家
if (this.chicken.x >= this.sys.game.config.width) {
this.#isChickenGoHome = true;
} else if (this.chicken.x <= 0) {
this.#isChickenGoHome = false;
}
}
}

主程式

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game-day9</title>
</head>

<body>
<div id="app"></div>

<script src="../lib/phaser.min.js"></script>
<script src="./scenes/gameScene.js"></script>
<script>
// 宣告一個場景
let scene = new GameScene();

// 宣告場景的基本資訊
let config = {
type: Phaser.AUTO,
width: 600, // 寬
height: 300, // 高
}

//啟動遊戲
let game = new Phaser.Game(config)

//加載場景
game.scene.add('gameScene', scene);
//啟動場景
game.scene.start('gameScene');
</script>

</body>

</html>