Construir una Actividad de Discord con Wonderland Engine

¿Quieres crear una Actividad de Discord? Como las Actividades de Discord son basadas en la web, Wonderland Engine es una gran opción si buscas un rendimiento 3D altamente eficiente en tu juego.

¡Aquí tienes una guía paso a paso para comenzar!

Proyecto de ejemplo de Wonderland Engine 

Empecemos clonando el repositorio de ejemplo de la Actividad de Discord en tu máquina local.

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

A continuación, necesitamos crear y configurar nuestra nueva Actividad de Discord en el Portal de Desarrolladores de Discord para ejecutar el código de ejemplo.

Crear una Nueva Aplicación de Discord 

Comienza creando una nueva Aplicación en el Portal de Desarrolladores de Discord. Una vez hecho esto, copia y guarda el APPLICATION_ID como DISCORD_CLIENT_ID en el archivo index.js del código de ejemplo.

Ahora haz una copia del archivo example.env y guárdalo como .env. Dentro de este, reemplaza el DISCORD_CLIENT_ID con tu APPLICATION_ID.

Ahora, configuremos el flujo de Oauth para permitir que nuestra Actividad de Discord autentique al usuario y obtenga información del usuario:

Abre el menú OAuth2 de tu Actividad de Discord. Ingresa http://127.0.0.1 como URI de redirección. Luego, haz clic en Reset Secret para generar un nuevo DISCORD_CLIENT_SECRET. Reemplaza el DISCORD_CLIENT_SECRET en tu archivo local .env con el secreto que acabas de generar.

Finalmente, habilita la Actividad para que pueda ser lanzada desde los canales.

Para poder iniciar la actividad, debes agregarla a las aplicaciones de tu cuenta de Discord.

Haz esto buscando la sección Installation de tu Actividad y abriendo el enlace de instalación en tu navegador. Una vez abierto, haz clic en Add to my Apps.

Puedes encontrar la guía completa sobre cómo configurar y ejecutar una Actividad de Discord en los Documentos de Discord.

Ejecutando Localmente 

¡Estamos cerca de ver nuestro juego dentro de Discord! Abre una terminal y entra en tu carpeta server. Aquí, ejecuta npm install para instalar todas las dependencias. Luego sigue los pasos a continuación para conectarte a tu actividad localmente.

1. (Dentro de la carpeta server) Ejecuta el servidor con npm run dev y npm run tunnel:

1Solicitando nuevo túnel rápido en trycloudflare.com...
2+--------------------------------------------------------------------------------------------+
3|  ¡Tu túnel rápido ha sido creado! Visítalo en (puede tardar un poco en ser accesible):     |
4|  https://alice-in-wonderland.trycloudflare.com                                             |
5+--------------------------------------------------------------------------------------------+

2. En el portal para desarrolladores de Discord, actualiza el mapeo de URL de tu aplicación de Discord para mapear / a la URL proporcionada por el túnel cloudflare.

   

3. Abre DiscordActivityExample.wlp en el Editor de Wonderland.
4. Habilita el modo desarrollador en tu cliente de Discord.

El servidor npm que iniciamos con npm run dev hará de proxy inverso del servidor web y web sockets del Editor de Wonderland a través del túnel cloudflare.

Iniciar la Actividad 

Navega a tu servidor de prueba en Discord y, en cualquier canal de voz o de texto, abre el Lanzador de Aplicaciones donde tu Actividad en desarrollo debería estar presente. Si no ves tu Actividad, intenta buscar por su nombre.

¡Hacer clic en tu aplicación lanzará tu aplicación localmente desde dentro de Discord!

Despliegue en Wonderland Cloud 

Instalemos el CLI de Wonderland Cloud para desplegar nuestro proyecto de Wonderland Engine en Wonderland Cloud y también desplegar y vincular el servicio de autenticación de Discord.

1npm install -g @wonderlandcloud/cli

Crea un token de API de Wonderland en tu página de Cuenta de Wonderland Engine y guárdalo como wle-apitoken.json en el directorio raíz de tu proyecto.

Ahora repasemos los ajustes necesarios para los scripts de despliegue paso a paso, que ejecutaremos más tarde para desplegar el código de frontend y backend en Wonderland Cloud:

1. create-activity-page: crea un nuevo despliegue de proyecto. Anota el nombre completo de tu proyecto creado.
2. build-server: construye la imagen docker. Reemplaza <ImageTag> con un nombre de etiqueta de imagen Docker de tu elección.
3. push-server: publica tu imagen docker.
4. create-api: publica el servicio de autenticación de Discord. Reemplaza los marcadores de posición: puedes obtener tu DISCORD_CLIENT_SECRET desde la página oauth de la App de Discord. Esto creará un nuevo despliegue de API de Wonderland Cloud.
5. create-api-path: vinculará el despliegue de la API a tu dominio de página en la ruta ‘/api’.

Finalmente, agreguemos el dominio del proyecto que obtuvimos del despliegue en Wonderland Cloud al mapeo de URL de la App de Discord.

Si no conoces el dominio, puedes encontrarlo dentro del archivo deployment.json, que se crea después de un despliegue exitoso en Wonderland Cloud.

Si has seguido todos los pasos correctamente, deberías poder iniciar tu Actividad de Discord. Al unirte, deberías obtener una ventana de confirmación de autorización y, al hacer clic en ella, el mensaje de bienvenida debería cambiar e incluir tu nombre.

De lo contrario, ¡únete a nuestro Servidor de Discord y estaremos encantados de ayudarte!