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
The process
-
Create an Instant Game app : Facebook Dashboard
-
Include the Facebook SDK URL in your game HTML page:
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
- Then you have to initialize the instant game with the method
FBInstant.initializeAsync
. In the game example, I created a filemain.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.
- 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);};
- 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(); }); });});
- 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.