Hello World：你的第一个 ArenaPro 脚本

恭喜你完成了所有准备工作！现在，是时候亲手创造一点东西，感受 ArenaPro 的魔法了。

在本教程中，我们将一起完成一个最经典的功能：当玩家进入地图时，向他们显示一条欢迎信息。

你将体验到 ArenaPro 最核心的开发流程：① 编写代码 → ② 构建上传 → ③ 运行测试。

准备好了吗？让我们开始吧！

第 1 步：编写服务端代码

我们的目标是，当有新玩家加入游戏时，由“服务器”来执行弹窗的逻辑。

1. 在 VS Code 左侧的文件浏览器中，找到并打开这个文件：server/src/App.ts。
2. 它里面可能有一些默认的代码，请先将它们全部清空。
3. 然后，复制并粘贴以下这段全新的代码进去：

// 这段代码的意思是：
// 当有任何新玩家(onPlayerJoin)加入这个世界(world)时，
// 我们就执行括号里的操作
world.onPlayerJoin(({ entity }) => {
  // 我们从加入的玩家实体(entity)身上，
  // 找到他的玩家信息(player)，并让他执行一个对话框(dialog)指令
  entity.player.dialog<GameTextDialogParams>({
    type: GameDialogType.TEXT,
    title: "来自服务器的问候",
    content: `欢迎你, ${entity.player.name}！`,
  });
});

代码解释：我们监听了 onPlayerJoin（玩家加入）这个事件。一旦有玩家进入，我们就调用 dialog API，在他们的屏幕上显示一个简单的文本对话框。我们还通过 ${entity.player.name} 获取了玩家的名字，让问候更显亲切。

🤔 想要更深入地了解代码背后的奥秘吗？

• entity 和 player 有什么区别？
• 为什么推荐用 .ts 而不是 .js 文件？
• 代码里的 GameTextDialogParams 和尖括号 <...> 是做什么的？

我们为你准备了一篇专门的指南来解答这些问题，完成本次实战后，推荐阅读： TypeScript vs. JavaScript 指南

第 2 步：一键构建并上传

代码已经写好，现在我们需要施展一个“魔法”，把它从我们的 VS Code “工作室”传送到神岛的“云端工地”。

1. 确保你正处于 VS Code 窗口。
2. 按下神奇的快捷键 Alt + Q。
3. 或者，你也可以点击 VS Code 窗口右下角的 Build 按钮。

你会看到 VS Code 下方的“终端”面板开始工作，滚动输出一堆信息。别担心，这是我们的“机器人助手”正在为你编译和打包代码。

当它最后显示出 “✅ [build] 打包且上传成功” 的绿色字样时，就说明你的代码已经成功抵达云端了！

第 3 步：在游戏内运行

万事俱备，只欠东风。我们的代码虽然已经上传，但还需要告诉游戏引擎：“嘿，去加载我刚刚上传的新代码！”

1. 回到你的神岛创作端。

2. 在“编辑器”界面的“脚本”页签下，找到并打开服务端的入口脚本 index.js。

3. 在脚本的最顶端，添加（或确保有） 下面这一行代码：

   require("./_server_bundle.js");

   这行代码的作用，就是加载我们通过 ArenaPro 上传的所有服务端逻辑。

4. 点击创作端顶部的 “运行” 按钮。

现在，退出并重新进入你的地图。你应该能立刻看到屏幕上弹出了我们精心设计的欢迎对话框！

✅ 恭喜你，旅程开始！

你已经成功地、完整地体验了 ArenaPro 最核心的开发循环。这个 “编写 → 构建 → 运行” 的模式，将贯穿你未来所有的创作过程。

现在你已经掌握了最基础的开发流程，可以开始自由探索，尝试修改对话框的内容，或者挑战更复杂的玩法了。

祝你创造愉快！