resources

How to use Babylon.js in a Facebook Instant Game


Table of contents

BabylonJS in a Facebook Instant Games.

An Instant Game is a game that can be played directly in the Facebook Messenger application, and from Babylon.js version 3.1 you can use your favorite framework to create a game that can be deployed on this platform.

This documentation will explain how to transform an existing Babylon.js game to an Instant Game.

Useful links

The process

1) Create an Instant Game app : Facebook Dashboard

2) Include the Facebook SDK URL in your game HTML page:

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

3) Then you have to initialize the instant game with the method FBInstant.initializeAsync. In the game example, I created a file main.ts that will create the game once the framework is initalized:

FBInstant.initializeAsync().then(() => {
    // Many properties will be null until the initialization completes.
    // This is a good place to fetch them:
    let locale = FBInstant.getLocale(); // 'en_US' 'fr_FR'...
    let platform = FBInstant.getPlatform(); // 'IOS', 'ANDROID' or 'WEB'
    let sdkVersion = FBInstant.getSDKVersion(); // '3.0'
    let playerID = FBInstant.player.getID();

    console.log(locale, platform, sdkVersion, playerID);

    // The game is created here
    new Game('gameCanvas');

}).catch((e) => {
    console.log(e);
});

Then you can load your assets and start your game.

4) Update the Facebook loading screen : by using an Asset Manager, you can use the exposed property 'onProgress' to update the loading screen

loader.onProgress = (remaining: number, totalCount: number) => {
    FBInstant.setLoadingProgress(100 - remaining / totalCount);
};

5) Remove the loading screen and start the game : once your scene is ready, use FBInstant.startGameAsync to start your instant game.

this.scene.executeWhenReady(() => {
    FBInstant.startGameAsync().then(() => {
        // Game initialization
        this._initGame();

        // Run render loop
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    });
});

6) Once your game is ready, you can upload it via Facebook Instant Games Dashboard, and run it. The configuration is done!

Example

An example game can be found here: SIMON3D

This game is not finished at all, but show how to configure a very simple Babylon.js demo-game and make it run as an Instant Game.