使用 Wonderland Engine 构建 Discord 活动

使用 Wonderland Engine 构建 Discord 活动

想要创建一个 Discord 活动吗？由于 Discord 活动是基于网页的，如果您希望在游戏中进行高性能的 3D 渲染，那么 Wonderland Engine 是一个很好的选择。

这里是一个帮助您入门的逐步指南！

免费注册。

Wonderland Engine 项目示例 

首先，将 Discord 活动示例仓库 克隆到您的本地机器。

git clone https://github.com/WonderlandEngine/discord-activity-example.git

接下来，我们需要在 Discord 开发者平台中创建并设置我们的新 Discord 活动以运行示例代码。

创建一个新的 Discord 应用 

首先在 Discord 开发者平台 中创建一个新应用。创建完成后，复制并保存 APPLICATION_ID 为示例代码中的 index.js 文件里的 DISCORD_CLIENT_ID。

现在复制 example.env 文件并保存为 .env。在其中用您的 APPLICATION_ID 替换 DISCORD_CLIENT_ID。

截图：创建活动

现在，设置 Oauth 流程以允许我们的 Discord 活动对用户进行身份验证并获取用户信息：

打开 Discord 活动的 OAuth2 菜单。输入 http://127.0.0.1 作为重定向 URI。接着，点击 Reset Secret 生成一个新的 DISCORD_CLIENT_SECRET。将您本地 .env 文件中的 DISCORD_CLIENT_SECRET 替换成您新生成的密钥。

截图：活动 OAuth 设置

最后，启用活动，使其可以从频道启动。

截图：启用活动

要能够启动此活动，您需要将其添加到您的 Discord 帐户的应用中。

您可以通过找到您的活动的 安装 部分并在浏览器中打开安装链接来完成这一操作。打开后，点击 添加到我的应用中。

截图：安装活动

您可以在 Discord 文档 中找到有关如何设置和运行 Discord 活动的完整指南。

本地运行 

我们快要在 Discord 中看到我们的游戏了！打开终端并进入您的 server 文件夹。在这里，运行 npm install 来安装所有依赖项。然后按照以下步骤连接到您本地的活动。

1.（在 server 文件夹内）用 npm run dev 和 npm run tunnel 运行服务器：

Requesting new quick Tunnel on trycloudflare.com...
+--------------------------------------------------------------------------------------------+
|  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
|  https://alice-in-wonderland.trycloudflare.com                                             |
+--------------------------------------------------------------------------------------------+
  1. 在 Discord 开发者平台中，更新您的 Discord 应用的 URL 映射，将 / 映射到 cloudflare 隧道提供的 URL。
    截图：活动 URL 映射
  2. 在 Wonderland Editor 中打开 DiscordActivityExample.wlp。
  3. 在您的 Discord 客户端上启用开发者模式。

我们用 npm run dev 启动的 npm 服务器将通过 cloudflare 隧道反向代理 Wonderland Editor 的 webserver 和 websockets。

启动活动 

前往您的 Discord 测试服务器，并在任一语音或文本频道中打开 App Launcher，您正在开发的活动应该在其中。如果您没有看到活动，您可以尝试搜索它的名称。

点击您的应用将从 Discord 内部启动您本地运行的应用！

截图：启动活动

部署到 Wonderland Cloud 

让我们安装 Wonderland Cloud CLI 以将我们的 Wonderland Engine 项目部署到 Wonderland Cloud 并同时部署和链接 Discord 认证服务。

npm install -g @wonderlandcloud/cli

在您的 Wonderland Engine 账户页面 上创建一个 Wonderland API token，并将其保存为项目根目录下的 wle-apitoken.json。

现在让我们一步一步地完成必要的部署脚本调整，然后我们将运行这些脚本来将前端和后端代码部署到 Wonderland Cloud：

  1. create-activity-page：创建一个新项目部署。记下您创建项目的完整名称。
  2. build-server：构建 docker 镜像。用您选择的 Docker 镜像标签名称替换 <ImageTag>。
  3. push-server：发布您的 docker 镜像。
  4. create-api：发布 Discord 认证服务。替换占位符：您可以从 Discord 应用的 oauth 页面获得您的 DISCORD_CLIENT_SECRET。这将创建一个新的 Wonderland Cloud API 部署。
  5. create-api-path：将 API 部署链接到您页面域上的 ‘/api’ 路径。

最后，将从 Wonderland Cloud 部署中获取的项目域添加到 Discord 应用的 URL 映射中。

如果您不知道域，可以在成功部署到 Wonderland Cloud 后生成的 deployment.json 文件中找到它。

如果您已正确完成所有步骤，您应该能够启动您的 Discord 活动。在加入活动时，您应收到授权确认窗口，点击后，欢迎信息应更改并包含您的姓名。

否则，请加入我们的 Discord 服务器，我们将很乐意为您提供帮助！

加入我们的 Discord 社区。
Last Update: September 9, 2025

保持更新。