📅 最后修改于: 2023-12-03 15:08:39.097000 🧑 作者: Mango
游戏制作者是一款非常受欢迎的游戏类型，它让玩家可以自己设计并制作游戏。在 JavaScript 中，我们可以使用一些库或框架来简化开发过程。本文将介绍如何使用 Phaser 3 来制作游戏制作者游戏。
首先需要确保已经安装了 Node.js 和 npm，并在命令行中全局安装了 Phaser 3：
npm install -g phaser@3.55.2
然后我们创建一个新的项目文件夹：
mkdir game-maker
cd game-maker
在项目文件夹中创建一个 index.html 文件，并添加以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game Maker</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>
这里引入了 Phaser 的 JS 文件和我们将要编写的 JS 文件。
接下来在项目文件夹中创建一个 game.js 文件，并添加以下内容：
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: { preload, create },
};
const game = new Phaser.Game(config);
function preload() {}
function create() {}
这里定义了一个 config 对象，包含了游戏的一些配置信息，例如画布的大小和场景的回调函数。然后创建了一个 game 实例。这里的 preload 和 create 是 Phaser 所提供的回调函数，分别在游戏资源加载完成后和游戏创建完成后执行。
现在可以在命令行中运行 npm run start 启动项目，并在浏览器中打开 http://localhost:8080/ 查看页面效果。此时页面将是空白的，因为我们还没有添加任何游戏内容。
接下来我们添加一些基本的游戏内容，包括一个游戏菜单和一个游戏编辑器。
创建一个新的场景 MenuScene，并添加一个文本标签和一个按钮，用于跳转到编辑器场景：
class MenuScene extends Phaser.Scene {
constructor() {
super("MenuScene");
}
create() {
this.add.text(400, 100, "Game Maker", { fontSize: 48 }).setOrigin(0.5);
const button = this.add.text(400, 300, "Create Game", { fontSize: 24 }).setOrigin(0.5);
button.setInteractive();
button.on("pointerdown", () => this.scene.start("EditorScene"));
}
}
这里创建了一个 MenuScene 类，继承自 Phaser 的 Scene 类，并定义了一个构造函数和一个 create 方法。在 create 方法中，我们添加了一个文本标签和一个按钮。按钮使用了 setInteractive 方法来使其可以响应鼠标事件，并监听了 pointerdown 事件，用于跳转到编辑器场景。
然后在 game.js 文件中添加这个场景：
const config = {
// ...
scene: [MenuScene, EditorScene],
};
这里使用了数组语法，将场景列表作为 config 对象的属性值。这样 Phaser 就会按照这个列表依次创建场景。注意场景的顺序很重要，因为后面的场景可能会依赖前面的场景。
创建一个新的场景 EditorScene，并添加一个文本标签和一个返回按钮，用于返回菜单场景。此外，还需要添加一些用户界面元素，例如文本框和下拉菜单，用于选择和设置游戏内容：
const gameObjects = ["Player", "Enemy", "Obstacle"];
class EditorScene extends Phaser.Scene {
constructor() {
super("EditorScene");
}
create() {
this.add.text(400, 100, "Game Editor", { fontSize: 48 }).setOrigin(0.5);
const backButton = this.add.text(50, 50, "< Back", { fontSize: 24 }).setOrigin(0);
backButton.setInteractive();
backButton.on("pointerdown", () => this.scene.start("MenuScene"));
this.add.text(200, 200, "Game Objects", { fontSize: 24 }).setOrigin(0, 0.5);
const gameObjectSelect = this.add.dom(400, 200, "select", {
style: "font-size: 24px; width: 200px;",
}).setOrigin(0.5);
gameObjectSelect.options.addRange(gameObjects.map((label) => ({ text: label, value: label })));
this.add.dom(200, 300, "input", {
type: "text",
placeholder: "Enter name...",
style: "font-size: 24px; width: 200px;",
});
this.add.dom(400, 300, "input", {
type: "number",
placeholder: "Enter x...",
style: "font-size: 24px; width: 200px;",
});
this.add.dom(600, 300, "input", {
type: "number",
placeholder: "Enter y...",
style: "font-size: 24px; width: 200px;",
});
const createButton = this.add.text(400, 400, "Create", { fontSize: 24 }).setOrigin(0.5);
createButton.setInteractive();
createButton.on("pointerdown", () => this.createGameObject());
}
createGameObject() {
const name = this.getChildByName("input[type=text]").value;
const x = parseInt(this.getChildByName("input[type=number][placeholder=Enter x...]").value);
const y = parseInt(this.getChildByName("input[type=number][placeholder=Enter y...]").value);
const gameObject = this.add.graphics();
gameObject.fillStyle(0x00ff00);
gameObject.fillRect(x, y, 50, 50);
gameObject.setName(name);
}
}
这里创建了一个 EditorScene 类，和上面的 MenuScene 类类似。在 create 方法中，我们添加了一些用户界面元素，例如按钮、文本框和下拉菜单。按钮和下拉菜单使用了 setInteractive 和 add.dom 方法来添加交互功能。文本框使用了 add.dom 方法来添加 DOM 元素。
然后我们实现了一个 createGameObject 方法，用于创建游戏对象。这个方法读取了文本框和下拉菜单中的值，并使用 Phaser 的 add.graphics 方法创建了一个矩形，表示游戏对象。这个矩形的位置和大小是使用 Phaser 的图形 API 进行绘制的。
最后我们将这个场景添加到了 config 对象的场景列表中。
现在运行项目，就可以在菜单场景中点击按钮进入编辑器场景，然后在编辑器场景中创建游戏对象了。
使用 Phaser 3，我们可以快速地创建一个游戏制作者游戏，并实现一些基本的功能，例如场景跳转和用户界面交互。具体来说，我们创建了一个菜单场景和一个编辑器场景，用于显示游戏菜单和编辑游戏内容。在编辑器场景中，我们创建了一个 createGameObject 方法，用于创建游戏对象，并实现了一些常见的 UI 控件，例如文本框和下拉菜单。