ArenaEdit 用户手册

Appearance

创建你的第一个 UI ​

到目前为止，我们所有的脚本都运行在服务器上。现在，是时候探索另一半的世界了：客户端脚本。客户端脚本负责处理每个玩家独有的内容，最典型的应用就是创建用户界面 (UI)。

客户端脚本简介 ​

回顾一下，客户端脚本有以下特点：

  • 运行环境: 在每个玩家的电脑或手机上独立运行。
  • 核心功能: 主要用于处理视觉和输入，比如显示 UI、播放只给当前玩家听的音效、响应键盘鼠标事件等。
  • API 入口: 客户端最核心的全局对象是 ui，用于管理所有 UI 元素。

创建一个时钟 ​

我们的目标是：在屏幕左上角创建一个文本标签，实时显示当前时间。

目标: 游戏每一帧 -> 获取当前时间 -> 更新屏幕上的文本

编写代码 ​

现在，在你的项目中找到或创建一个客户端主脚本 clientIndex.js，并写入以下代码：

javascript
// clientIndex.js

console.log("客户端脚本已启动！");

// 1. 创建一个新的文本 UI 节点
const coordText = UiText.create();

// 2. 设置文本节点的属性
coordText.name = "CoordinateDisplay"; // 给节点起个名字
coordText.textContent = "当前时间：0"; // 初始显示的文本
coordText.textFontSize = 18; // 字体大小
coordText.textColor.copy(Vec3.create({ r: 255, g: 255, b: 255 })); // 字体颜色 (白色)
coordText.textStrokeColor.copy(Vec3.create({ r: 0, g: 0, b: 0 })); // 描边颜色 (黑色)，让文字更清晰
coordText.textStrokeThickness = 2;
coordText.textXAlignment = "Left";
coordText.textYAlignment = "Top";
coordText.autoWordWrap = true;

// 3. 设置文本节点的位置
coordText.anchor.copy(Vec2.create({ x: 0, y: 0 })); // 锚点在左上角
coordText.position.offset.copy(Vec2.create({ x: 20, y: 20 })); // 相对于锚点的位置 (向右20, 向下20)

// 4. 将文本节点添加到屏幕上
// ui 对象本身就是屏幕的根节点
coordText.parent = ui;

console.log("坐标显示 UI 已创建。");

// 实时同步当前时间
setInterval(() => {
  coordText.textContent = `当前时间：${new Date().toLocaleString()}`;
}, 1000);

代码解析 ​

  • UiText.create(): 我们创建了一个 UiText 类的实例。这是一个专门用来显示文本的 UI 节点。
  • coordText.anchor 和 coordText.position: 这两个属性共同决定了 UI 的位置。anchor 设置了节点的“原点”在屏幕的哪个位置（(0, 0) 是左上角，(1, 1) 是右下角），而 position 则是相对于这个锚点的像素偏移量。
  • coordText.textFontSize 和 coordText.textColor: 设置文本的字体大小和颜色。
  • coordText.textStrokeColor 和 coordText.textStrokeThickness: 设置文本的描边颜色和描边厚度，让文字更清晰。
  • coordText.textXAlignment 和 coordText.textYAlignment: 设置文本的对齐方式。
  • coordText.autoWordWrap: 设置文本是否自动换行。
  • coordText.textColor: 设置文本的颜色。
  • coordText.parent: 将文本节点的 parent 属性设置为 ui。ui 是一个全局的根节点，所有希望被渲染的 UI 元素都需要将其 parent 指向 ui 或其子节点，从而形成一个 UI 树状结构。
  • setInterval(() => { ... }): 我们注册了帧更新事件。这个回调函数会在每秒钟被调用很多次（取决于帧率）。
  • coordText.textContent: 设置文本节点的文本内容。

现在，进入游戏。你应该能在屏幕的左上角看到一个显示你当前坐标的文本。试着在地图里移动，你会发现数字在实时变化。

接下来 ​

你已经成功地创建了你的第一个客户端 UI，并掌握了客户端脚本的核心工作流程！这为你制作复杂的游戏界面、小地图、计分板等功能打下了坚实的基础。你可以尝试：

  • 创建一个 UiImage 节点，在屏幕上显示一张图片。
  • 使用 ui.events.on("pointerdown", (event) => { ... }) 事件，让 UI 元素可以被点击。