Integrate the CrazyGames SDK

Wonderland Engine is an excellent choice for building highly performant 3D web games, because it is optimized to load fast and even runs well on iOS Safari.

This tutorial will cover how to integrate CrazyGames platform services (find their Documentation here):

Prerequisites 

Install our Universal Platform SDK (UPSDK) via npm together with the CrazyGames provider and the local storage provider as fallback for save games in case a user is not logged in:

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

Setup 

To make sure the providers are configured, you need to register them once in you app.js file (entrypoint of the application bundle) as early as possible:

 1import {
 2    extra,
 3    ads,
 4    user,
 5    saveGame,
 6    analytics,
 7    leaderboards,
 8} from '@wonderlandengine/upsdk';
 9
10import {CrazyGamesProvider} from '@wonderlandengine/upsdk-provider-crazygames';
11import {LocalStorageProvider} from '@wonderlandengine/upsdk-provider-localstorage';
12
13
14/* Register CrazyGames as provider for all the services you want to use */
15const cg = new CrazyGamesProvider();
16ads.registerProvider(cg);
17analytics.registerProvider(cg);
18saveGame.registerProvider(cg);
19extra.registerProvider(cg);
20user.registerProvider(cg);
21extra.registerProvider(cg);
22cg.onReady.then(() => analytics.trackLoadingStart());
23
24
25/* Register local storage save game as fallback provider for savegame,
26 * for when CrazyGames can't provide savegame service (e.g. user not logged in). */
27saveGame.registerProvider(new LocalStorageProvider());
28
29/* wle:auto-constants:start */
30// ...

No additional configuration is required, as the context is provided to the SDK by the CrazyGames website itself once you published it there.

Use Services 

CrazyGames offers basic analytics, save games, a cool “celebration” effect, rewarded and midroll ads, usernames and profile pictures.

To publish to CrazyGames, you are required to at least implement the analytics for loading and gameplay times.

Analytics 

In app.js, track loading of the main scene.

 1 try {
 2     await engine.loadMainScene(`${Constants.ProjectName}.bin`);
 3+    analytics.trackLoadingStop();
 4 } catch (e) {
 5     console.error(e);
 6+    analytics.trackLoadingStop();
 7     window.GameAnalytics.addErrorEvent(
 8         ErrorSeverity.Critical,
 9         `Failed to load ${Constants.ProjectName}.bin: ${e.message}\n${e.stack || ''}`
10     );
11     window.alert(`Failed to load ${Constants.ProjectName}.bin:`, e);
12 }

Note: loading start is tracked in the code snippet that we added for setup.

Ads 

To run a video ad, you must react to a user gesture (a click, touch, key press etc) and pass the event to the SDK, as demonstrated with a cursor target here:

 1import {ads} from `@wonderlandengine/upsdk`;
 2
 3const cursorTarget = this.object.getComponent(CursorTarget);
 4cursorTarget.onClick.add((object, cursor, event) => {
 5    ads.showRewardedAd(event).then(() => {
 6        /* On reward */
 7    }).catch(e => {
 8        switch (e.status) {
 9            case 'unfilled':
10            case 'ads-unavailable':
11            case 'network-error':
12            case 'no-zoneid':
13            case 'ad-maximum':
14            case 'ad-blocker':
15            case 'ad-violation':
16            case 'cors-error':
17                console.error(e.status);
18            default:
19                console.log('User canceled watching the ad');
20        }
21    })
22});

To show a midroll ad instead, use ads.showMidgameAd(event).

Events are forwarded by the Cursor and CursorTarget system, wonderland-react-ui and vanilla DOM events from HTML elements.

Testing with QA Tool 

Go to the CrazyGames Developer Portal and sign up.

Start submitting your game:

• Set a game name
• Select Externally hosted (iframe) as your “Game engine”.
• Use http://localhost:<port>, the same URL used by Wonderland Editor.
• If you use CrazyGamesProvider for the savegame service, select “Yes, using the Data Module from the CrazyGames SDK”.
• If you intend to support mobile devices, select “The game supports mobile devices”.

Now click Preview, which will show an embedded version of localhost with all CrazyGames services available. Here you can test if your ads trigger and all other services work correcly.

Publish 

You can then submit your game as an iframe or a zip of the web files. We suggest to reach out via our Discord Community beforehand as we may be able to support you on your launch.