Compatible Game Engines

1. Open your project in Construct 3.
2. Go to Menu > Project Settings.
3. Under Advanced, find the Facebook Instant Games section and enable it.
4. Set your Facebook App ID.
5. Go to Menu > Export > Facebook Instant Games.
6. Construct will generate a ready-to-upload .zip bundle.

1. Install the Instant Games plugin from the addon exchange.
2. In your project, add the Facebook Instant Games object.
3. Export using File > Export project > Facebook Instant Games.

• Construct handles the SDK lifecycle (initializeAsync, startGameAsync) automatically.
• Construct provides event-based access to player info, leaderboards, context, and ads -- no JavaScript coding required.
• Construct 3 offers the best Instant Games support. Construct 2 support is more limited.

1. Open your project in Cocos Creator.
2. Go to Project > Build.
3. Select Facebook Instant Games as the build platform.
4. Enter your Facebook App ID.
5. Click Build.
6. Cocos Creator generates a build folder. Zip the contents (not the folder itself) for upload.

• Cocos Creator automatically injects the FBInstant SDK script and handles initialization.
• You can access FBInstant APIs directly from your game scripts after the platform initializes.
• Make sure your build output has index.html at the root of the zip.
• Cocos Creator’s built-in asset pipeline can help keep bundle sizes small.

1. In the PlayCanvas Editor, go to your project settings.
2. Add the FBInstant SDK as an external script: https://connect.facebook.net/en_US/fbinstant.8.0.js
3. Modify your game’s loading sequence to call FBInstant.initializeAsync() before starting the PlayCanvas app.
4. Use FBInstant.setLoadingProgress() during asset preloading.
5. Call FBInstant.startGameAsync() after all assets are loaded.
6. Download the project build and zip it for upload.

• PlayCanvas projects are well suited for Instant Games because they are already web-based.
• PlayCanvas has published official tutorials for Instant Games integration.
• The engine’s asset compression and lazy loading features help meet size requirements.

1. Add the FBInstant SDK script to your index.html:

   <script src="https://connect.facebook.net/en_US/fbinstant.8.0.js"></script>
2. Wrap your Phaser game creation in the SDK lifecycle:

   FBInstant.initializeAsync()
     .then(function() {
       // Create the Phaser game instance
       var config = {
         type: Phaser.AUTO,
         width: 800,
         height: 600,
         scene: {
           preload: preload,
           create: create,
           update: update
         }
       };
   
       var game = new Phaser.Game(config);
     });
   
   function preload() {
     // Load assets and report progress
     this.load.on('progress', function(value) {
       FBInstant.setLoadingProgress(Math.floor(value * 100));
     });
   
     this.load.image('logo', 'assets/logo.png');
   }
   
   function create() {
     // Start the game once assets are loaded
     FBInstant.startGameAsync().then(function() {
       // Game is now visible to the player
       var playerName = FBInstant.player.getName();
       console.log('Welcome, ' + playerName);
     });
   }
   
   function update() {
     // Game loop
   }
3. Bundle your project files (including the Phaser library) into a zip.

• Phaser 3 (also called Phaser 3.x or Phaser 4) is recommended over Phaser 2/CE.
• Use the minified version of Phaser (phaser.min.js) to reduce bundle size.
• Phaser’s built-in loader provides progress events that map directly to setLoadingProgress.

1. Add the FBInstant SDK to your index.html:

   <script src="https://connect.facebook.net/en_US/fbinstant.8.0.js"></script>
2. Initialize the SDK before creating your PixiJS application:

   FBInstant.initializeAsync()
     .then(function() {
       FBInstant.setLoadingProgress(100);
       return FBInstant.startGameAsync();
     })
     .then(function() {
       // Create the PixiJS app
       var app = new PIXI.Application({
         width: 800,
         height: 600
       });
       document.body.appendChild(app.view);
   
       // Your game code here
     });
3. Zip your project files for upload.

• PixiJS is a rendering library, not a full game framework. You will need to handle game logic, input, audio, and other systems yourself (or use additional libraries).
• PixiJS is very lightweight, making it a good choice when bundle size is a concern.
• Consider using a PixiJS-based framework like PixiJS Game or a custom setup for more complex games.

1. Install the plugin:
   • Download or clone the plugin from the GitHub repository⁠.
   • Import it into your Unity project under Assets/Meta.InstantGames/.
2. Configure your project:
   • Open Window > Instant Games > Project Optimiser to apply recommended WebGL build settings.
   • The plugin installs a WebGL template at Assets/WebGLTemplates/FB/ that handles SDK initialization automatically.
3. Use the plugin API:

   using Meta.InstantGames;
   
   // Initialize the SDK
   await FBInstant.InitializeAsync();
   await FBInstant.StartGameAsync();
   
   // Get player info
   string playerId = await FBInstant.Player.GetID();
   
   // Post a score
   await FBInstant.PostSessionScore(100);
   
4. Build and upload:
   • Use the built-in Bundle Uploader (Window > Instant Games > Bundle Uploader) to build, zip, and upload your WebGL bundle directly to the Instant Games platform.

• The plugin includes editor mocking — API calls return mock data in the Unity Editor for testing without a browser.
• The plugin supports overlay views (NEZP) for displaying player names and photos under the Zero Permissions privacy model.
• Unity WebGL builds tend to be larger than builds from 2D-specific engines. Pay close attention to the Game Performance guide.
• Strip unused engine features to reduce build size. Go to Player Settings > Other Settings and set Managed Stripping Level to High.
• Disable unnecessary Unity modules (for example, Physics, or Audio) if your game does not use them.
• Unity WebGL builds may have longer initial load times. Use FBInstant.setLoadingProgress() to keep players informed.
• Test thoroughly on mobile devices. Unity WebGL can be resource-intensive on low-end phones.

1. In the Defold Editor, open your game.project file.
2. Under Project, set the Title to your game name.
3. Go to HTML5 settings and configure the canvas and display settings.
4. Add the FBInstant SDK integration:
   • Defold has a community-maintained Facebook Instant Games extension. Add it as a dependency in your game.project file.
   • Alternatively, manually modify the exported HTML to include the SDK script.
5. Build for HTML5 via Project > Bundle > HTML5 Application.
6. Zip the output folder contents for upload.

• Defold produces very small builds, often well under 5 MB for 2D games, making it an excellent choice for Instant Games.
• The Defold community maintains Instant Games extensions on the Defold Asset Portal.
• Defold’s Lua scripting is straightforward and performs well in the browser.

1. In GameMaker, go to Build > Create Executable and select HTML5 as the target platform.
2. Configure your HTML5 export settings under Game Options > HTML5.
3. Build the project. GameMaker generates an HTML5 folder with your game.
4. Modify the generated index.html to include the FBInstant SDK:

   <script src="https://connect.facebook.net/en_US/fbinstant.8.0.js"></script>
5. Add SDK initialization calls to your game code. You can use GameMaker’s JavaScript extension system to call FBInstant APIs.
6. Zip the output for upload.

• GameMaker does not have built-in Instant Games support, so SDK integration requires some manual work.
• Community extensions for Instant Games are available on the GameMaker Marketplace.
• GameMaker’s HTML5 builds can sometimes be large. Use texture page settings and audio compression to reduce size.
• Test the HTML5 build in a browser before uploading to make sure everything works outside of the GameMaker IDE.

1. In the Godot Editor, go to Project > Export.
2. Add an HTML5 export preset.
3. Configure the export settings:
   • Set the export path.
   • Enable Experimental Virtual Keyboard if your game needs text input on mobile.
4. Click Export Project to generate the HTML5 build.
5. Modify the generated index.html to include the FBInstant SDK script:

   <script src="https://connect.facebook.net/en_US/fbinstant.8.0.js"></script>
6. Add SDK calls using Godot’s JavaScript interface:

   # In your main scene's _ready() function
   func _ready():
       if OS.has_feature("JavaScript"):
           # Call FBInstant.initializeAsync() via JavaScript
           JavaScriptBridge.eval("""
               FBInstant.initializeAsync().then(function() {
                   FBInstant.setLoadingProgress(100);
                   return FBInstant.startGameAsync();
               }).then(function() {
                   console.log('Game started!');
               });
           """)
   
7. Zip all exported files for upload.

• Godot 4.x has improved HTML5 export compared to Godot 3.x, but builds can still be sizeable. Monitor your bundle size.
• Godot uses WebAssembly for its HTML5 export, which provides good performance but may increase initial load time.
• The Godot community has created Instant Games plugins and templates that simplify integration.
• Make sure your export template is configured for the smallest possible build. Disable unused modules if you are compiling from source.

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

FBInstant.initializeAsync()
  .then(function() {
    // Load your game assets here
    // Report progress as assets load
    FBInstant.setLoadingProgress(100);
    return FBInstant.startGameAsync();
  })
  .then(function() {
    // Game is now playable
    startYourGame();
  });

• Minimize bundle size: The smaller your initial download, the more likely players are to keep playing. Aim for under 5 MB for the initial bundle. See Game Performance for detailed guidance.
• Test on mobile: Most Instant Games players are on mobile. Test on real devices, especially lower-end Android phones.
• Use the loading progress bar: Always report accurate loading progress via FBInstant.setLoadingProgress(). A frozen loading bar causes players to leave.
• Handle the pause event: Listen for FBInstant.onPause() to handle the game being backgrounded (e.g., pause the game, mute audio).
• Avoid engine-specific URLs: Some engines generate absolute file paths or localhost URLs during development. Make sure all paths are relative in your final build.