Integrare il CrazyGames SDK

Wonderland Engine è una scelta eccellente per creare giochi web 3D ad alte prestazioni, perché è ottimizzato per un caricamento veloce e funziona bene anche su Safari di iOS.

Questo tutorial coprirà come integrare i servizi della piattaforma CrazyGames (trova la loro Documentazione qui):

Prerequisiti 

Installa il nostro Universal Platform SDK (UPSDK) tramite npm insieme al fournitore CrazyGames e al fournitore di local storage come fallback per i salvataggi di gioco nel caso un utente non sia loggato:

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

Crea un account sviluppatore CrazyGames sul loro Developer Portal.

Configurazione 

Per assicurarti che i provider siano configurati, è necessario registrarli una volta nel tuo file app.js (punto di ingresso del pacchetto dell’applicazione) il più presto possibile:

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

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


/* Registra CrazyGames come provider per tutti i servizi che vuoi utilizzare */
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());


/* Registra il local storage come provider di fallback per i salvataggi, 
 * per quando CrazyGames non può fornire il servizio di salvataggio (es. utente non loggato). */
saveGame.registerProvider(new LocalStorageProvider());

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

Non sono richieste configurazioni aggiuntive, poiché il contesto è fornito all’SDK dal sito web CrazyGames stesso una volta che lo hai pubblicato lì.

Utilizzare i Servizi 

CrazyGames offre analitiche di base, salvataggi di gioco, un effetto “celebration” interessante, pubblicità premiate e midroll, nomi utente e foto profilo.

Per pubblicare su CrazyGames, è necessario implementare almeno le analitiche per i tempi di caricamento e di gioco.

Analytics 

In app.js, traccia il caricamento della scena principale.

 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);
 }

Nota: l’inizio del caricamento è tracciato nello snippet di codice che abbiamo aggiunto per la configurazione.

Pubblicità 

Per eseguire un’annuncio video, devi reagire a un gesto dell’utente (un clic, un tocco, una pressione di tasto ecc.) e passare l’evento all’SDK, come dimostrato con un target del cursore qui:

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

const cursorTarget = this.object.getComponent(CursorTarget);
cursorTarget.onClick.add((object, cursor, event) => {
    ads.showRewardedAd(event).then(() => {
        /* All'ottenimento della ricompensa */
    }).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('Utente ha annullato la visione dell'annuncio');
        }
    })
});

Per mostrare un annuncio midroll invece, usa ads.showMidgameAd(event).

Gli eventi sono inoltrati dal sistema Cursor e CursorTarget, wonderland-react-ui e eventi DOM vaniglia dagli elementi HTML.

Testare con lo Strumento QA 

Vai al CrazyGames Developer Portal e registrati.

Inizia a inviare il tuo gioco:

• Imposta un nome per il gioco
• Seleziona Externally hosted (iframe) come tuo “Game engine”.
• Usa http://localhost:<port>, lo stesso URL usato dall’Editor di Wonderland.
• Se usi CrazyGamesProvider per il servizio di salvataggio, seleziona “Sì, usando il modulo dati dal CrazyGames SDK”.
• Se intendi supportare dispositivi mobili, seleziona “Il gioco supporta i dispositivi mobili”.

Ora clicca su Preview, che mostrerà una versione incorporata di localhost con tutti i servizi CrazyGames disponibili. Qui puoi testare se i tuoi annunci si attivano e se tutti gli altri servizi funzionano correttamente.

Pubblicare 

Puoi quindi inviare il tuo gioco come iframe o un zip dei file web. Ti suggeriamo di contattarci tramite la nostra Comunità Discord in anticipo, poiché possiamo esserti di supporto nel tuo lancio.