Создание Discord Activity с Wonderland Engine

Хотите создать Discord Activity? Поскольку Discord Activities основаны на веб-технологиях, Wonderland Engine отлично подходит, если вам необходимо высокопроизводительное 3D-рендеринг в вашей игре.

Вот пошаговое руководство, чтобы начать!

Пример проекта в Wonderland Engine 

Начнем с клонирования репозитория Discord Activity example на ваш локальный компьютер.

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

Далее нам нужно создать и настроить наше новое Discord Activity в Discord Developer Portal, чтобы запустить пример кода.

Создание нового приложения в Discord 

Начните с создания нового приложения в Discord Developer Portal. После создания скопируйте и сохраните APPLICATION_ID как DISCORD_CLIENT_ID в файле index.js примера кода.

Теперь сделайте копию файла example.env и сохраните ее как .env. Внутри замените DISCORD_CLIENT_ID на ваш APPLICATION_ID.

Теперь давайте настроим поток Oauth для авторизации нашего Discord Activity и получения информации о пользователе:

Откройте меню OAuth2 вашей Discord Activity. Введите http://127.0.0.1 как URI перенаправления. Далее нажмите Reset Secret, чтобы сгенерировать новый DISCORD_CLIENT_SECRET. Замените DISCORD_CLIENT_SECRET в вашем локальном файле .env сгенерированным секретом.

Наконец, включите Activity, чтобы его можно было запускать из каналов.

Чтобы иметь возможность запустить активность, вам нужно добавить ее в приложения вашего аккаунта Discord.

Сделайте это, найдя раздел Installation вашего Activity и открыв ссылку установки в браузере. После открытия нажмите Add to my Apps.

Полное руководство по настройке и запуску Discord Activity вы можете найти в документации Discord.

Локальный запуск 

Мы почти готовы увидеть нашу игру внутри Discord! Откройте терминал и перейдите в папку server. Здесь выполните npm install, чтобы установить все зависимости. Затем следуйте шагам ниже, чтобы подключиться к вашему Activity локально.

1. (В папке server) Запустите сервер с помощью npm run dev и npm run tunnel:

1Requesting new quick Tunnel on trycloudflare.com...
2+--------------------------------------------------------------------------------------------+
3|  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
4|  https://alice-in-wonderland.trycloudflare.com                                             |
5+--------------------------------------------------------------------------------------------+

2. В портале разработчика Discord обновите URL-карту вашего приложения Discord, чтобы связать / с URL, предоставленным Cloudflare Tunnel.

   

3. Откройте DiscordActivityExample.wlp в Wonderland Editor.
4. Включите режим разработчика в вашем клиенте Discord.

Сервер npm, который мы запустили с помощью npm run dev, будет обратным прокси для веб-сервера и вебсокетов редактора Wonderland через Cloudflare Tunnel.

Запуск активности 

Перейдите на ваш тестовый сервер Discord и в любом голосовом или текстовом канале откройте App Launcher, где должно отображаться ваше разрабатываемое Activity. Если вы не видите ваше Activity, попробуйте поискать его по имени.

Щелчок по вашему приложению запустит локально работающую программу внутри Discord!

Развертывание в Wonderland Cloud 

Давайте установим Wonderland Cloud CLI для развертывания нашего проекта Wonderland Engine в Wonderland Cloud и также для развертывания и связывания сервиса аутентификации Discord.

1npm install -g @wonderlandcloud/cli

Создайте токен API Wonderland на вашей странице аккаунта Wonderland Engine и сохраните его как wle-apitoken.json в корневом каталоге вашего проекта.

Теперь давайте пошагово пройдемся по необходимым корректировкам скриптов развертывания, которые мы позже запустим для развертывания кода фронтенда и бэкенда в Wonderland Cloud:

1. create-activity-page: создает новое развёртывание проекта. Заметьте полное имя вашего созданного проекта.
2. build-server: создает образ Docker. Замените <ImageTag> на выбранное вами имя тега изображения Docker.
3. push-server: публикует ваш образ Docker.
4. create-api: публикует сервис аутентификации Discord. Замените плейсхолдеры: Вы можете получить DISCORD_CLIENT_SECRET на странице oauth приложения Discord. Это создаст новое развёртывание API в Wonderland Cloud.
5. create-api-path: свяжет развертывание API с доменом страницы по пути ‘/api’.

В заключение добавьте домен проекта, который мы получили из развертывания в Wonderland Cloud, в карту URL приложения Discord.

Если вы не знаете домен, вы можете найти его в файле deployment.json, который создается после успешного развертывания в Wonderland Cloud.

Если вы правильно следовали всем шагам, вы сможете запустить ваше Discord Activity. При присоединении вы должны получить окно подтверждения авторизации, и после его нажатия приветственное сообщение должно измениться и содержать ваше имя.

Если у вас возникнут проблемы, пожалуйста, присоединяйтесь к нашему серверу Discord, мы будем рады помочь!