CrazyGames SDKを統合する

Wonderland Engineは、高性能な3Dウェブゲームを構築するのに最適な選択であり、高速な読み込みとiOS Safariでの優れたパフォーマンスを発揮します。このチュートリアルでは、CrazyGamesプラットフォームサービスの統合方法を説明します。

Wonderland Engine x CrazyGames Integration Banner

Wonderland Engineは、高性能な3Dウェブゲームを構築するのに最適な選択であり、高速な読み込みとiOS Safariでの優れたパフォーマンスを発揮します。

このチュートリアルでは、CrazyGamesプラットフォームサービスの統合方法について説明します（ドキュメントはこちら）。

前提条件

npmを介してUniversal Platform SDK (UPSDK)と CrazyGamesプロバイダー、およびユーザーがログインしていない場合のセーブゲームのフォールバックとして local storageプロバイダーをインストールします。

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

Developer Portalで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 */
// ...

追加の設定は必要ありません。一旦CrazyGamesのウェブサイトで公開すると、SDKにコンテキストが提供されます。

サービスの使用

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,
         `Failed to load ${Constants.ProjectName}.bin: ${e.message}\n${e.stack || ''}`
     );
     window.alert(`Failed to load ${Constants.ProjectName}.bin:`, e);
 }

注意: ロードの開始は、セットアップで追加したコードスニペットで追跡されています。

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

const cursorTarget = this.object.getComponent(CursorTarget);
cursorTarget.onClick.add((object, cursor, event) => {
    ads.showRewardedAd(event).then(() => {
        /* On reward */
    }).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('User canceled watching the ad');
        }
    })
});

中間広告を表示するには、ads.showMidgameAd(event)を使用してください。

イベントは、カーソルとカーソルターゲットシステム、wonderland-react-ui、およびHTML要素からのバニラDOMイベントによって転送されます。

QAツールでのテスト

CrazyGames Developer Portalにアクセスしてサインアップします。

ゲームの提出を開始します:

ゲーム名を設定します
“Game engine”にExternally hosted (iframe)を選択します。
Wonderland Editorで使用されるhttp://localhost:<port>を使用します。
保存ゲームサービスにCrazyGamesProviderを使用する場合、“Yes, using the Data Module from the CrazyGames SDK”を選択します。
モバイルデバイスをサポートする予定がある場合は、“The game supports mobile devices”を選択します。

次にPreviewをクリックすると、CrazyGamesのすべてのサービスが利用できるlocalhostの埋め込みバージョンが表示されます。ここで広告がトリガーされ、他のすべてのサービスが正しく機能するかテストできます。

公開

ゲームをiframeまたはウェブファイルのzipとして提出できます。リリース前に Discord Communityを通じてご相談いただくことをお勧めします。場合によっては、立ち上げに関してサポートできるかもしれません。