Babylon.js and 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

• Instant Games documentation

• Instant Games SDK documentation

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.