Welcome to the Facebook Instant Games SDK Tutorials. This series of tutorials covers many aspects of using the Facebook Instant Games SDK.

In this tutorial we will walk through the basic set up steps needed to get a Facebook Instant Game up and running. The basic steps consist of initialise, load and start.

Initialising the Facebook Instant Games SDK

The first step is to link in the FBInstant SDK via Facebook’s CDN. This is done by adding the following to the head of your index.hrml:
[sourcecode language=”html”]
<script src=’https://connect.facebook.net/en_US/fbinstant.6.2.js’></script>
[/sourcecode]
The SDK creates a new object called FBInstant which provides all of the IG specific behaviour that we will need.

The next step is to set up the IG SDK when the window has finished loading:
[sourcecode language=”js”]
window.onload = function()
{
// Initialise the Facebook Instants SDK
FBInstant.initializeAsync().then(function()
{
FBInit = true;
});

// TODO: Start loading your games resources
}
[/sourcecode]

The call to initializeAsync begins the initialisation of the Facebook Instants SDK. Note that many areas of the IG SDK cannot be used until the promise returns successfully. In our example above we set a flag to let us know that the initialisation has completed allowing us to continue doing other things (such as loading assets) whilst the SDK initialises.

Sending Load Progress to the Facebook Instant Games SDK

Whilst loading game resources its good to let the user that would be sat looking at your games loading screen how much progress has been made. We can do this by calling:
[sourcecode language=”js”]
FBInstant.setLoadingProgress(percentage_complete)
[/sourcecode]
passing in a value between 0 and 100. This will update the loading indicator which is shown during the loading of your game.

TIP: When loading game assets its best to load as little as possible up front to ensure that the player can get into the game as quickly as possible. You can late load other assets later on.

Starting the Game

Once all resources have loaded and initializeAsync() returns without error we can start the game going by calling FBInstant.startGameAsync():
[sourcecode language=”js”]
FBInstant.startGameAsync().then(function()
{
// Start your game code
}).catch(function(e) {
// Display an error
});
[/sourcecode]

When the above promise returns successfully you can begin running your game. If there is an exception then something went terribly wrong and if possible you should display an error message to the user.

Now that this is pretty much all you need to do for basic integration. From here it is up to you what features you want to integrate. I will be covering many of those features and how to implement them over the coming tutorials.