Интеграция SDK CrazyGames

Wonderland Engine является отличным выбором для создания высокопроизводительных 3D веб-игр, так как она оптимизирована для быстрой загрузки и даже хорошо работает на iOS Safari.

В этом руководстве рассказывается, как интегрировать сервисы платформы CrazyGames (найдите их документацию здесь):

Предварительные требования 

Установите наш Universal Platform SDK (UPSDK) через npm вместе с провайдером CrazyGames и провайдером локального хранилища как резерв для сохранений, если пользователь не вошел в систему:

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

Создайте учетную запись разработчика CrazyGames на их Портале разработчика.

Настройка 

Чтобы убедиться, что провайдеры настроены, зарегистрируйте их один раз в вашем файле app.js (точка входа в пакет приложения) как можно раньше:

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

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

/* Зарегистрируйте CrazyGames как провайдера для всех услуг, которые вы хотите использовать */
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());

/* Зарегистрируйте локальное хранилище как резервный провайдер для сохранений,
 * на случай, когда CrazyGames не может предоставить сервис сохранений (например, пользователь не вошел в систему). */
saveGame.registerProvider(new LocalStorageProvider());

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

Дополнительной конфигурации не требуется, так как контекст предоставляется SDK самим сайтом CrazyGames после того, как вы опубликовали его там.

Использование услуг 

CrazyGames предлагает базовую аналитику, сохранение игр, классный эффект “празднования”, вознаграждаемую и промежуточную рекламу, имена пользователей и изображения профилей.

Для публикации на CrazyGames вы обязаны как минимум реализовать аналитику для времени загрузки и игрового процесса.

Аналитика 

В app.js отслеживайте загрузку основной сцены.

 try {
     await engine.loadMainScene(`${Constants.ProjectName}.bin`);
+    analytics.trackLoadingStop();
 } catch (e) {
     console.error(e);
+    analytics.trackLoadingStop();
     window.GameAnalytics.addErrorEvent(
         ErrorSeverity.Critical,
         `Не удалось загрузить ${Constants.ProjectName}.bin: ${e.message}\n${e.stack || ''}`
     );
     window.alert(`Не удалось загрузить ${Constants.ProjectName}.bin:`, e);
 }

Примечание: начало загрузки отслеживается в коде, который мы добавили для настройки.

Реклама 

Чтобы запустить видеорекламу, необходимо отреагировать на жест пользователя (щелчок, касание, нажатие клавиши и т.д.) и передать событие в SDK, как показано здесь с целевым курсором:

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

const cursorTarget = this.object.getComponent(CursorTarget);
cursorTarget.onClick.add((object, cursor, event) => {
    ads.showRewardedAd(event).then(() => {
        /* При вознаграждении */
    }).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('Пользователь отменил просмотр рекламы');
        }
    })
});

Чтобы показать промежуточную рекламу, используйте ads.showMidgameAd(event).

События передаются системой Cursor и CursorTarget, wonderland-react-ui и обычными событиями DOM из HTML элементов.

Тестирование с QA Tool 

Перейдите на Портал разработчика CrazyGames и зарегистрируйтесь.

Начните процесс подачи вашей игры:

• Задайте имя игры
• Выберите Externally hosted (iframe) в качестве вашего “Игрового движка”.
• Используйте http://localhost:<port>, тот же URL, который используется редактором Wonderland.
• Если вы используете CrazyGamesProvider для службы сохранения игр, выберите “Да, с использованием Data Module из SDK CrazyGames”.
• Если вы планируете поддерживать мобильные устройства, выберите “Игра поддерживает мобильные устройства”.

Теперь нажмите Preview, что покажет встроенную версию localhost со всеми доступными сервисами CrazyGames. Здесь вы можете протестировать, срабатывает ли ваша реклама и работают ли все другие сервисы корректно.

Публикация 

Вы можете отправить вашу игру как iframe или zip файл веб-файлов. Мы рекомендуем связаться с нами через наше сообщество в Discord заранее, так как мы можем поддержать вас во время вашего запуска.