Erstelle eine Discord Activity mit Wonderland Engine

Erstelle eine Discord Activity mit Wonderland Engine

Willst Du eine Discord Activity erstellen? Da Discord Activities webbasiert sind, eignet sich die Wonderland Engine hervorragend, wenn Du eine leistungsstarke 3D-Darstellung in Deinem Spiel haben möchtest.

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

Kostenlos anmelden.

Wonderland Engine Projekt Beispielprojekt 

Lass uns damit beginnen, das Discord Activity Beispiel-Repository auf Deinen lokalen Rechner zu klonen.

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

Als Nächstes müssen wir unsere neue Discord Activity im Discord Developer Portal erstellen und einrichten, um den Beispielcode auszuführen.

Erstelle eine neue Discord-Anwendung 

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 example.env Datei und speichere sie als .env. Ersetze darin die DISCORD_CLIENT_ID durch Deine APPLICATION_ID.

Screenshot: Create an activity

Nun richten wir den Oauth-Flow ein, damit unsere Discord Activity den Benutzer authentifizieren und Benutzerdaten abrufen kann:

Öffne das OAuth2 Menü Deiner Discord Activity. Gib http://127.0.0.1 als Redirect-URI ein. Klicke anschließend 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 Secret.

Screenshot: Activity OAuth Settings

Aktiviere schließlich die Activity, damit sie aus Kanälen gestartet werden kann.

Screenshot: Enable Activity

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

Dies machst Du, indem Du den Installation Bereich Deiner Activity aufsuchst und den Installationslink in Deinem Browser öffnest. Sobald er geöffnet ist, klicke auf Zu meinen Apps hinzufügen.

Screenshot: Install Activity

Du findest die vollständige Anleitung zur Einrichtung und Ausführung einer Discord Activity in den Discord Docs.

Lokal ausführen 

Wir sind kurz davor, unser Spiel in Discord zu sehen! Öffne ein Terminal und gehe in Deinen server Ordner. Führe dort npm install aus, um alle Abhängigkeiten zu installieren. Folge dann den untenstehenden Schritten, um lokal mit Deiner Activity zu verbinden.

  1. (Im server-Ordner) Starte den Server mit npm run dev und npm run tunnel:
Requesting new quick Tunnel on trycloudflare.com...
+--------------------------------------------------------------------------------------------+
|  Dein schneller Tunnel wurde erstellt! Besuche ihn unter (es kann einige Zeit dauern, bis er erreichbar ist): |
|  https://alice-in-wonderland.trycloudflare.com                                             |
+--------------------------------------------------------------------------------------------+
  1. Aktualisiere im Discord Developer Portal die URL-Zuordnung Deiner Discord-App, um / auf die von Cloudflare bereitgestellte URL abzubilden.
    Screenshot: Activity URL Mapping
  2. Öffne DiscordActivityExample.wlp im Wonderland Editor.
  3. Aktiviere den Entwicklermodus in Deinem Discord-Client.

Der mit npm run dev gestartete npm-Server wird den Webserver und die Websockets des Wonderland Editors durch den Cloudflare-Tunnel rückwärts weiterleiten.

Start der Activity 

Gehe zu Deinem Discord-Testserver und öffne im Sprach- oder Textkanal den App Launcher, in dem Deine in Entwicklung befindliche Activity angezeigt werden sollte. Wenn Du Deine Activity nicht siehst, solltest Du versuchen, nach ihrem Namen zu suchen.

Ein Klick auf Deine App wird Deine lokal laufende App innerhalb von Discord starten!

Screenshot: Launch Activity

Bereitstellung in Wonderland Cloud 

Lass uns die Wonderland Cloud CLI installieren, um unser Wonderland Engine-Projekt zu Wonderland Cloud bereitzustellen und den Discord-Authentifizierungsdienst ebenfalls zu deployen und zu verlinken.

npm install -g @wonderlandcloud/cli

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

Gehen wir nun die notwendigen Anpassungen der Bereitstellungsskripte Schritt für Schritt durch, die wir später ausführen werden, um den Frontend- und 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: Erzeugt das Docker-Image. Ersetze <ImageTag> mit einem Docker-Image-Tag Deiner Wahl.
  3. push-server: Veröffentlicht Dein Docker-Image.
  4. create-api: Veröffentlicht den Discord-Authentifizierungsdienst. Ersetze die Platzhalter: Du kannst Dein DISCORD_CLIENT_SECRET von der OAuth-Seite der Discord App erhalten. Dies wird eine neue Wonderland Cloud API-Bereitstellung erstellen.
  5. create-api-path: Verknüpft die API-Bereitstellung mit Deiner Seiten-Domain auf dem ‘/api’ Pfad.

Zum Schluss füge die von der Bereitstellung in Wonderland Cloud erhaltene Projekt-Domain zur URL-Zuordnung der Discord-App hinzu.

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

Wenn Du alle Schritte korrekt befolgt hast, solltest Du Deine Discord Activity starten können. Beim Beitritt solltest Du ein Bestätigungsfenster zur Autorisierung sehen und nach dem Klick darauf sollte sich die Willkommensnachricht ändern und Deinen Namen enthalten.

Andernfalls trete unserem Discord-Server bei, und wir helfen Dir gerne weiter!

Tritt unserer Discord-Community bei.
Last Update: September 9, 2025

Bleib auf dem Laufenden.