Erstelle eine Discord-Aktivität mit Wonderland Engine

Möchtest Du eine Discord-Aktivität erstellen? Da Discord-Aktivitäten webbasiert sind, ist Wonderland Engine eine großartige Option, wenn Du in Deinem Spiel eine hochleistungsfähige 3D-Darstellung möchtest.

Hier ist eine Schritt-für-Schritt-Anleitung, um Dir den Einstieg zu erleichtern!

Beispielprojekt für Wonderland Engine 

Lass uns mit dem Klonen des Discord Activity Beispiel-Repositorys auf Deinen lokalen Computer beginnen.

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

Als nächstes müssen wir unsere neue Discord-Aktivität im Discord Developer Portal erstellen und einrichten, um den Beispielcode auszuführen.

Neue Discord-Anwendung erstellen 

Beginne damit, eine neue Anwendung im Discord Developer Portal zu erstellen. Sobald Du dies getan hast, kopiere und speichere die APPLICATION_ID als DISCORD_CLIENT_ID in der index.js Datei des Beispielcodes.

Erstelle nun eine Kopie der Datei example.env und speichere sie als .env. Ersetze darin DISCORD_CLIENT_ID mit Deiner APPLICATION_ID.

Richten wir nun den OAuth-Fluss ein, um unserer Discord-Aktivität zu ermöglichen, den Benutzer zu authentifizieren und Benutzerinformationen abzurufen:

Öffne das OAuth2-Menü Deiner Discord-Aktivität. Gib http://127.0.0.1 als Redirect-URI ein. Klicke als nächstes auf Reset Secret, um ein neues DISCORD_CLIENT_SECRET zu generieren. Ersetze das DISCORD_CLIENT_SECRET in Deiner lokalen .env Datei mit dem gerade generierten Geheimnis.

Schließlich aktiviere die Aktivität, damit sie aus Kanälen gestartet werden kann.

Um die Aktivität starten zu können, musst Du sie zu den Apps Deines Discord-Kontos hinzufügen.

Dies machst Du, indem Du den Abschnitt Installation Deiner Aktivität findest und den Installationslink in Deinem Browser öffnest. Nach dem Öffnen klicke auf Zu meinen Apps hinzufügen.

Du findest die vollständige Anleitung, wie Du eine Discord-Aktivität einrichtest und ausführst, in den Discord-Dokumenten.

Lokal ausführen 

Wir sind kurz davor, unser Spiel in Discord zu sehen! Öffne ein Terminal und wechsle in Deinen server-Ordner. Führe hier npm install aus, um alle Abhängigkeiten zu installieren. Folge dann den folgenden Schritten, um Dich lokal mit Deiner Aktivität zu verbinden.

1. (Innerhalb des server-Ordners) Starte den Server mit npm run dev und npm run tunnel:

1Anforderung eines neuen schnellen Tunnels auf trycloudflare.com...
2+--------------------------------------------------------------------------------------------+
3|  Dein schneller Tunnel wurde erstellt! Besuche ihn unter (er kann einige Zeit brauchen, um  |
4|  erreichbar zu sein):                                                                      |
5|  https://alice-in-wonderland.trycloudflare.com                                             |
6+--------------------------------------------------------------------------------------------+

2. Aktualisiere im Discord Developer Portal das URL-Mapping Deiner Discord-App, um / auf die durch den Cloudflare-Tunnel bereitgestellte URL zu mappen.

   

3. Öffne DiscordActivityExample.wlp im Wonderland Editor.
4. Aktiviere den Entwicklermodus in Deinem Discord-Client.

Der mit npm run dev gestartete npm-Server wirft den Webserver und die Websockets des Wonderland Editors durch den cloudflare tunnel zurück.

Die Aktivität starten 

Navigiere zu Deinem Discord-Testserver und öffne in einem beliebigen Sprach- oder Textkanal den App-Launcher, in dem Deine in Entwicklung befindliche Aktivität angezeigt werden sollte. Falls Du Deine Aktivität nicht siehst, solltest Du nach ihrem Namen suchen.

Durch Klicken auf Deine App wird Deine lokal laufende App direkt aus Discord gestartet!

Bereitstellung auf Wonderland Cloud 

Lass uns das Wonderland Cloud CLI installieren, um unser Wonderland Engine-Projekt in Wonderland Cloud bereitzustellen und auch den Discord-Authentifizierungsdienst bereitzustellen und zu verknüpfen.

1npm install -g @wonderlandcloud/cli

Erstelle ein Wonderland API-Token auf Deiner Wonderland Engine-Kontoseite und speichere es als wle-apitoken.json im Stammverzeichnis Deines Projekts.

Gehen wir nun Schritt für Schritt die notwendigen Anpassungen an den Bereitstellungsskripten durch, die wir später ausführen werden, um den Frontend- und den Backend-Code in Wonderland Cloud bereitzustellen:

1. create-activity-page: Erstellt eine neue Projektbereitstellung. Notiere den vollständigen Namen Deines erstellten Projekts.
2. build-server: Baut das Docker-Image. Ersetze <ImageTag> durch einen Docker-Image-Tag-Namen Deiner Wahl.
3. push-server: Veröffentlicht Dein Docker-Image.
4. create-api: Veröffentlicht den Discord-Authentifizierungsservice. Ersetze die Platzhalter: Du kannst Dein DISCORD_CLIENT_SECRET von der OAuth-Seite der Discord-App erhalten. Dies wird eine neue API-Bereitstellung in Wonderland Cloud erstellen.
5. create-api-path: Verknüpft die API-Bereitstellung mit Deiner Seiten-Domain über den ‘/api’-Pfad.

Fügen wir schließlich die Projektdomain, die wir aus der Bereitstellung in Wonderland Cloud erhalten haben, der URL-Zuordnung der Discord-App hinzu.

Falls Du die Domain nicht kennst, kannst Du sie in der deployment.json Datei finden, die nach einer erfolgreichen Bereitstellung auf Wonderland Cloud erstellt wird.

Wenn Du alle Schritte korrekt befolgst, solltest Du in der Lage sein, Deine Discord-Aktivität zu starten. Nach dem Beitreten solltest Du ein Autorisierungsbestätigungsfenster erhalten und nach dem Klicken darauf sollte sich die Willkommensnachricht ändern und Deinen Namen enthalten.

Wenn nicht, tritt unserem Discord-Server bei, und wir helfen Dir gerne weiter!