# Hello World：你的第一个 ArenaPro 脚本

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

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

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

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

## 第 1 步：编写服务端代码

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

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

```typescript [server/src/App.ts]
// 这段代码的意思是：
// 当有任何新玩家(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 指南](./typescript-vs-javascript)**

## 第 2 步：一键构建并上传

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

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

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

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

![构建成功](/QQ_1721023950939.webp)

## 第 3 步：在游戏内运行

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

1.  回到你的**神岛创作端**。
2.  在“编辑器”界面的“脚本”页签下，找到并打开**服务端的入口脚本 `index.js`**。
3.  在脚本的最顶端，**添加（或确保有）** 下面这一行代码：

    ```javascript [index.js]
    require("./_server_bundle.js");
    ```

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

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

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

![运行效果](/QQ20241025-105839.png)

## ✅ 恭喜你，旅程开始！

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

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

祝你创造愉快！
