Crea un’Attività Discord con Wonderland Engine

Vuoi creare un’Attività Discord? Poiché le Attività Discord sono basate sul web, Wonderland Engine è perfetta se desideri un rendering 3D ad alte prestazioni nel tuo gioco.

Ecco una guida passo-passo per iniziare!

Esempio di progetto Wonderland Engine 

Cominciamo clonando il repository di esempio dell’Attività Discord sul tuo computer locale.

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

Successivamente, dobbiamo creare e configurare la nostra nuova Attività Discord nel Discord Developer Portal per eseguire il codice di esempio.

Crea una Nuova Applicazione Discord 

Inizia creando una nuova Applicazione nel Discord Developer Portal. Una volta fatto, copia e salva l’APPLICATION_ID come DISCORD_CLIENT_ID nel file index.js del codice di esempio.

Ora fai una copia del file example.env e salvala come .env. All’interno, sostituisci il DISCORD_CLIENT_ID con il tuo APPLICATION_ID.

Ora, configuriamo il flusso Oauth per permettere alla nostra Attività Discord di autenticare l’utente e ottenere le informazioni utente:

Apri il menu OAuth2 della tua Attività Discord. Inserisci http://127.0.0.1 come URI di reindirizzo. Successivamente, clicca su Reset Secret per generare un nuovo DISCORD_CLIENT_SECRET. Sostituisci il DISCORD_CLIENT_SECRET nel tuo file locale .env con quello appena generato.

Infine, abilita l’Attività in modo che possa essere lanciata dai canali.

Per poter avviare l’attività, devi aggiungerla alle app del tuo account Discord.

Fai questo trovando la sezione Installation della tua Attività e aprendo il link di installazione nel tuo browser. Una volta aperto, clicca su Add to my Apps.

Puoi trovare la guida completa su come impostare ed eseguire un’Attività Discord nei Documenti Discord

Eseguire Localmente 

Siamo quasi pronti a vedere il nostro gioco all’interno di Discord! Apri un terminale e entra nella cartella server. Qui, esegui npm install per installare tutte le dipendenze. Poi segui i passaggi qui sotto per connetterti alla tua attività localmente.

1. (Dentro la cartella server) Esegui il server con npm run dev e npm run tunnel:

1Richiesta un nuovo quick Tunnel su trycloudflare.com...
2+--------------------------------------------------------------------------------------------+
3|  Il tuo quick Tunnel è stato creato! Visitalo su (potrebbe impiegare un po' di tempo per essere raggiungibile): |
4|  https://alice-in-wonderland.trycloudflare.com                                             |
5+--------------------------------------------------------------------------------------------+

2. Nel Discord Developer portal, aggiorna il mapping URL della tua app Discord per mappare / all’URL fornito dal tunnel cloudflare.

   

3. Apri DiscordActivityExample.wlp nel Wonderland Editor.
4. Abilita la modalità sviluppatore sul tuo client Discord.

Il server npm che abbiamo avviato con npm run dev farà da proxy inverso al webserver e ai websocket di Wonderland Editor attraverso il tunnel cloudflare.

Avvia l’Attività 

Vai al tuo server di test Discord e, in qualsiasi canale vocale o di testo, apri l’App Launcher dove dovrebbe essere presente la tua Attività in sviluppo. Se non vedi la tua Attività, prova a cercare il suo nome.

Cliccando sulla tua app l’avvierai localmente da dentro Discord!

Distribuzione su Wonderland Cloud 

Installiamo il Wonderland Cloud CLI per distribuire il nostro progetto Wonderland Engine su Wonderland Cloud e anche per distribuire e collegare il servizio di autenticazione Discord.

1npm install -g @wonderlandcloud/cli

Crea un token API Wonderland sulla tua pagina Account di Wonderland Engine e salvalo come wle-apitoken.json nella directory radice del tuo progetto.

Ora vediamo passo-passo gli aggiustamenti necessari agli script di distribuzione, che eseguiremo successivamente per distribuire il codice frontend e backend su Wonderland Cloud:

1. create-activity-page: crea una nuova distribuzione del progetto. Nota il nome completo del progetto creato.
2. build-server: crea l’immagine docker. Sostituisci <ImageTag> con un nome di tag d’immagine Docker a tua scelta.
3. push-server: pubblica la tua immagine docker.
4. create-api: pubblica il servizio di autenticazione Discord. Sostituisci i segnaposto: puoi ottenere il tuo DISCORD_CLIENT_SECRET dalla pagina oauth dell’App Discord. Questo creerà una nuova distribuzione API su Wonderland Cloud.
5. create-api-path: collegherà la distribuzione API al dominio della tua pagina sul percorso ‘/api’.

Infine, aggiungiamo il dominio del progetto che abbiamo ottenuto dalla distribuzione su Wonderland Cloud al mapping URL dell’App Discord.

Se non conosci il dominio, puoi trovarlo all’interno del file deployment.json, che viene creato dopo una distribuzione avvenuta con successo su Wonderland Cloud.

Se hai seguito correttamente tutti i passaggi, dovresti essere in grado di avviare la tua Attività Discord. Al momento dell’unione, dovresti ottenere una finestra di conferma dell’autorizzazione e, dopo averci cliccato, il messaggio di benvenuto dovrebbe cambiare e contenere il tuo nome.

In caso contrario, unisciti al nostro Server Discord, saremo felici di aiutarti!