Integración del SDK de CrazyGames

Wonderland Engine es una excelente elección para desarrollar juegos web 3D de alto rendimiento, porque está optimizado para cargar rápido e incluso funciona bien en iOS Safari.

Este tutorial cubrirá cómo integrar los servicios de la plataforma CrazyGames (encuentra su documentación aquí):

Requisitos previos 

Instala nuestro SDK de Plataforma Universal (UPSDK) mediante npm junto con el proveedor CrazyGames y el proveedor de almacenamiento local como alternativa para guardar juegos en caso de que un usuario no esté logueado:

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

Crea una cuenta de desarrollador en CrazyGames en su Portal para Desarrolladores.

Configuración 

Para asegurarte de que los proveedores estén configurados, necesitas registrarlos una vez en tu archivo app.js (punto de entrada del paquete de la aplicación) tan pronto como sea posible:

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 como proveedor para todos los servicios que deseas utilizar */
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 el guardado de juegos en almacenamiento local como proveedor alternativo,
 * para cuando CrazyGames no pueda proporcionar el servicio de guardado (por ejemplo, usuario no logueado). */
saveGame.registerProvider(new LocalStorageProvider());

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

No se requiere configuración adicional, ya que el contexto es proporcionado al SDK por el propio sitio web de CrazyGames una vez que lo hayas publicado allí.

Uso de Servicios 

CrazyGames ofrece análisis básicos, guardado de juegos, un efecto de “celebración” genial, anuncios recompensados y durante el juego, nombres de usuario y fotos de perfil.

Para publicar en CrazyGames, estás obligado a implementar al menos los análisis de los tiempos de carga y de juego.

Análisis 

En app.js, sigue el proceso de carga de la escena principal.

 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: el inicio de carga está registrado en el fragmento de código que agregamos para la configuración.

Anuncios 

Para ejecutar un anuncio en video, debes reaccionar a un gesto del usuario (un clic, toque, pulsación de tecla, etc.) y pasar el evento al SDK, como se demuestra aquí con un objetivo de cursor:

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

const cursorTarget = this.object.getComponent(CursorTarget);
cursorTarget.onClick.add((object, cursor, event) => {
    ads.showRewardedAd(event).then(() => {
        /* Al recibir la recompensa */
    }).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('El usuario canceló la visualización del anuncio');
        }
    })
});

Para mostrar un anuncio durante el juego en su lugar, usa ads.showMidgameAd(event).

Los eventos son reenviados por el sistema Cursor y CursorTarget, wonderland-react-ui y eventos DOM estándar desde elementos HTML.

Prueba con la Herramienta de QA 

Ve al Portal para Desarrolladores de CrazyGames e inscríbete.

Comienza a enviar tu juego:

• Establece un nombre para el juego.
• Selecciona Externally hosted (iframe) como tu “Motor de juego”.
• Usa http://localhost:<port>, la misma URL utilizada por Wonderland Editor.
• Si usas CrazyGamesProvider para el servicio de guardado, selecciona “Sí, usando el Módulo de Datos del SDK de CrazyGames”.
• Si planeas dar soporte a dispositivos móviles, selecciona “El juego soporta dispositivos móviles”.

Ahora haz clic en Preview, lo que mostrará una versión embebida de localhost con todos los servicios CrazyGames disponibles. Aquí puedes verificar si tus anuncios se activan y si todos los demás servicios funcionan correctamente.

Publicar 

Puedes luego enviar tu juego como un iframe o un zip de los archivos web. Te sugerimos contactar a través de nuestra Comunidad en Discord antes de lanzar, ya que podríamos apoyarte en tu lanzamiento.