Integration des CrazyGames SDK

Wonderland Engine ist eine ausgezeichnete Wahl für den Bau hochleistungsfähiger 3D-Webspiele, da sie optimiert ist, schnell zu laden und sogar auf iOS Safari gut läuft.

Dieses Tutorial behandelt die Integration der CrazyGames-Plattformdienste (finde ihre Dokumentation hier):

Voraussetzungen 

Installiere unser Universal Platform SDK (UPSDK) über npm zusammen mit dem CrazyGames Provider und dem local storage provider als Fallback für Spielstände, falls ein Benutzer nicht eingeloggt ist:

npm i --save @wonderlandengine/upsdk \
    @wonderlandengine/upsdk-provider-crazygames \
    @wonderlandengine/upsdk-provider-localstorage

Erstelle ein CrazyGames-Entwicklerkonto im Developer Portal.

Einrichtung 

Um sicherzustellen, dass die Provider konfiguriert sind, musst du sie einmal in deiner app.js-Datei (Einstiegspunkt des Application-Bundles) registrieren, so früh wie möglich:

import {
    extra,
    ads,
    user,
    saveGame,
    analytics,
    leaderboards,
} from '@wonderlandengine/upsdk';

import {CrazyGamesProvider} from '@wonderlandengine/upsdk-provider-crazygames';
import {LocalStorageProvider} from '@wonderlandengine/upsdk-provider-localstorage';


/* Registriere CrazyGames als Provider für alle Dienste, die du verwenden möchtest */
const cg = new CrazyGamesProvider();
ads.registerProvider(cg);
analytics.registerProvider(cg);
saveGame.registerProvider(cg);
extra.registerProvider(cg);
user.registerProvider(cg);
extra.registerProvider(cg);
cg.onReady.then(() => analytics.trackLoadingStart());


/* Registriere lokalen Speicher als Fallback-Provider für Spielstände,
 * falls CrazyGames den Speicherdienst nicht bereitstellen kann (z.B. Benutzer ist nicht eingeloggt). */
saveGame.registerProvider(new LocalStorageProvider());

/* wle:auto-constants:start */
// ...

Keine zusätzliche Konfiguration ist erforderlich, da der Kontext dem SDK von der CrazyGames-Website selbst bereitgestellt wird, sobald du es dort veröffentlicht hast.

Dienste nutzen 

CrazyGames bietet grundlegende Analysen, Spielstände, einen coolen “Feier”-Effekt, belohnte und Midroll-Anzeigen, Benutzernamen und Profilbilder.

Um auf CrazyGames zu veröffentlichen, ist es erforderlich, mindestens die Analysen für Lade- und Spielzeiten zu implementieren.

Analytik 

In app.js, verfolge das Laden der Hauptszene.

 try {
     await engine.loadMainScene(`${Constants.ProjectName}.bin`);
+    analytics.trackLoadingStop();
 } catch (e) {
     console.error(e);
+    analytics.trackLoadingStop();
     window.GameAnalytics.addErrorEvent(
         ErrorSeverity.Critical,
         `Failed to load ${Constants.ProjectName}.bin: ${e.message}\n${e.stack || ''}`
     );
     window.alert(`Failed to load ${Constants.ProjectName}.bin:`, e);
 }

Hinweis: Der Start des Ladens wird im Code-Snippet verfolgt, das wir für die Einrichtung hinzugefügt haben.

Anzeigen 

Um ein Video-Werbung anzuzeigen, musst du auf eine Benutzeraktion reagieren (ein Klick, Berührung, Tastendruck usw.) und das Ereignis an das SDK weitergeben, wie hier mit einem Cursorziel demonstriert:

import {ads} from `@wonderlandengine/upsdk`;

const cursorTarget = this.object.getComponent(CursorTarget);
cursorTarget.onClick.add((object, cursor, event) => {
    ads.showRewardedAd(event).then(() => {
        /* Bei Belohnung */
    }).catch(e => {
        switch (e.status) {
            case 'unfilled':
            case 'ads-unavailable':
            case 'network-error':
            case 'no-zoneid':
            case 'ad-maximum':
            case 'ad-blocker':
            case 'ad-violation':
            case 'cors-error':
                console.error(e.status);
            default:
                console.log('Benutzer hat das Ansehen der Werbung abgebrochen');
        }
    })
});

Um stattdessen eine Midroll-Anzeige zu zeigen, verwende ads.showMidgameAd(event).

Ereignisse werden vom Cursor und dem CursorTarget-System weitergeleitet, wonderland-react-ui und von Vanilla-DOM-Ereignissen von HTML-Elementen.

Testen mit dem QA-Tool 

Gehe zum CrazyGames Developer Portal und melde dich an.

Beginne mit der Einreichung deines Spiels:

• Lege einen Spielnamen fest
• Wähle Externally hosted (iframe) als deine “Spiel-Engine”.
• Verwende http://localhost:<port>, dieselbe URL, die vom Wonderland Editor verwendet wird.
• Wenn du den CrazyGamesProvider für den Spielständedienst verwendest, wähle “Ja, unter Verwendung des Datenmoduls aus dem CrazyGames SDK”.
• Wenn du mobile Geräte unterstützen möchtest, wähle “Das Spiel unterstützt mobile Geräte”.

Klicke nun auf Vorschau, was eine eingebettete Version von localhost mit allen verfügbaren CrazyGames-Diensten anzeigt. Hier kannst du testen, ob deine Anzeigen triggern und ob alle anderen Dienste ordnungsgemäß funktionieren.

Veröffentlichung 

Du kannst dann dein Spiel als iframe oder als Zip der Web-Dateien einreichen. Wir schlagen vor, über unsere Discord-Community Kontakt aufzunehmen, bevor du startest, da wir dich bei deinem Launch eventuell unterstützen können.