Skip to main content

🎮 基本語法(六) - 群組化物件

遊戲裡面肯定會遇到很多一模一樣的背景裝飾,每次都要寫一堆重複的設定太麻煩了,因此我們今天就來將物件群組化

我們今天就來讓沙漠中長滿草吧

先載入沙漠背景與草皮

mdImg 草皮

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

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

// 載入草皮
this.load.image("grass", "../assets/others/Grass.png");
}
}

接下來就是大家熟悉的建立背景

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

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

// 載入草皮
this.load.image("grass", "../assets/others/Grass.png");
}

/**
* 生成物件
*/
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);
}
}

接下來進入建立草皮群組環節

  • 首先我們使用 this.add.group 來對場景加入群組
  • 接下來設定群組的參數
    1. 設定群組的唯一值 key: "grass"
    2. 複製多少物件 repeat: 10, //種十撮
  • 再來就是設定物件的起始點還有規則
class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

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

// 載入草皮
this.load.image("grass", "../assets/others/Grass.png");
}

/**
* 生成物件
*/
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);

// 建立草皮群組
// 一次長十撮
this.grassland = this.add.group({
key: "grass",
repeat: 10, //種十撮
setXY: {
x: 10, // 從 X 10 開始
y: 250, // 從 Y 250 開始
stepX: 55, // 每間隔10種一撮
stepY: 0,
},
});
}
}

因為沙漠太熱了,所以草要集體縮水

  • 首先可以先取得群組內的所有物件 getChildren()
  • 此時我們就可以使用 forEach 迴圈來同時改變群組內的所有物件
  • 放大縮小我們使用 setScale() 來處理
class GameScene extends Phaser.Scene {
constructor() {
super({ key: "gameScene" });
}

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

// 載入草皮
this.load.image("grass", "../assets/others/Grass.png");
}

/**
* 生成物件
*/
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);

// 建立草皮群組
// 一次長十撮
this.grassland = this.add.group({
key: "grass",
repeat: 10, //種十撮
setXY: {
x: 10, // 從 X 10 開始
y: 250, // 從 Y 250 開始
stepX: 55, // 每間隔10種一撮
stepY: 0,
},
});

// 一次修改
this.grassland.getChildren().forEach((item) => {
item.setScale(0.5);
});
}
}

今天我們學會了大量複製場景中的物件了,大家可以試著在沙漠裡撲滿更多的草


遊戲場景

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

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

// 載入草皮
this.load.image("grass", "../assets/others/Grass.png");
}

/**
* 生成物件
*/
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);

// 建立草皮群組
// 一次長十撮
this.grassland = this.add.group({
key: "grass",
repeat: 10, //種十撮
setXY: {
x: 10, // 從 X 10 開始
y: 250, // 從 Y 250 開始
stepX: 55, // 每間隔10種一撮
stepY: 0,
},
});

// 一次修改
this.grassland.getChildren().forEach((item) => {
item.setScale(0.5);
});
}
}

主程式

<!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-day8</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>