Create Your Facebook Instant Game – Game Maker Studio 2

Summary - Part 1
This tutorial shows you how you can create a Facebook Instant Game.

GM Version : Game Maker Studio 2 – Web Export(Html5)
Target Platform : Html5

Facebook Instant Games

Facebook Instant Games platform lets Facebook users to play “instant” games with their messenger application(Facebook Messenger) as well as on Facebook application and desktop web version. Since the Instant Games are supported with Facebook APIs, developers have the opportunities to interact with players more socially. Some of these are;

  • Leaderboards (Global and within context[i.e. competing with people in a Facebook chat group.])
  • In-App Purchases : Yes, you can sell virtual items on Facebook(Both consumable and non-consumable)
  • Using Facebook Audience Network, means that you can display Facebook Ads to monetize your games(Works only on mobile devices though)
  • Using some cool Facebook loading screen stuff(It’s just a requirement, but looks really awesome)
  • Not to forget that your game gets to be seen by millions of people, billions of people use Facebook!

To develop a Facebook Instant Game, you must be registered to Facebook Developers.

Setting Up Your Game’s Page on Facebook

First thing you’d do is to head over to Facebook Developers page and Create a New App. As soon as you create a new app, you’ll be able to add Products from the left menu. Choose Instant Games. For now we only need this tool, but later on we will use other tools to support our game with different features(such as Messenger Bots & Advertisements)

After choosing Instant Games, you’ll be greeted with a details page(The image given below). For now, just fill the basic information and make sure to Switch On Use Instant Games option. At the same page, you can set the orientation to Portrait or Landscape mode depending on your game’s style. Tagline and Publisher information fields are also need to be filled. You’ll see more information at that page.

For now, we’re done with Facebook side of it. Don’t close the tab yet, because we will soon return to the Web Hosting section where we will upload our game files to Facebook. Let’s move onto Game Maker Studio side.

Let’s Start Your First Facebook Instant Game

Note 1 : It is very important that initial loading size of your game must be around 1 MB(recommended by Facebook). Instant Game means to be instantly opened. This means that you must reduce the file size of your game as much as possible. You can later load resources from an external source (downloading .zip file that contains your HD sprites and audios into the game etc.)

Note 2 : Here’s the link to Yoyo blog’s post about Facebook Instant Games, please check it.

I will provide another post for scaling and basic Html5 tips.

Importing Extension Files Into Game Maker Studio 2 Project

First of all, we need to include an Extension into our project. First one is Facebook Loading Bar, which is used for loading screen and the other is for Facebook functions. Download the extension from here and include it in your project (This extension is written by Yoyogames, over time I’ll edit it with the new features and update it here)

Download Facebook Instant Games Extension

How head over to the Options > Html5 > General tab and change the Loading bar extension with FBInstantGames_LoadingBar. Be noticed that you must leave Included file as index.html part to Use Default. We will do one more trick in another part.

Also you must disable built-in particle effects since they make some file size on our game. Head over to Html5 > Graphics > Options part and untick Use built-in particles.

Now, we’ve integrated Facebook Instant Games into our app, we can move onto the coding part.

Initiating Facebook Instant Games SDK

Before any other Instant Game functions, we must initialize the SDK. Here’s the 3 main functions for doing so.

  • FBInstantGames_Initialise is used for starting the Instant Games SDK. Before calling anything else, you must put this script preferably in some Game Started Event.
  • FBInstantGames_SetLoadProgress is used for the loading bar that Facebook provides. This is provided to you to indicate the loading progress of your game’s files. For example, let’s say you have 4 MB of sprites that you are getting from another server(Instant Games must be small sized, so you are downloading from; let’s say Dropbox..). You can increase the LoadProgress as you download each file.
    FBInstantGames_SetLoadProgress(10) or FBInstantGames_SetLoadProgress(50) etc.
  • FBInstantGames_StartGame is the function that checks whether the player is playing your game or not. Imagine the player receives a phone call and she must be away from your game for a while. In this case, SDK runs the script you defined in the second argument(“gmcallback_pausegame”). When she returns back to your game, “gmcallback_startgame” script will be called. You can therefore make a pause system with this function.
    When creating a callback script on Web platform, you must begin the name of the script with gmcallback_ due to fact that GMS obfuscates all the scripts, and the SDK wouldn’t find your callback script. Starting with gmcallback_ means GMS will not obfuscate this script. Also when using Facebook Instant Games, use double quotes to indicate callback scripts in arguments. “gmcallback_pausegame”

Now our application is ready to be sent to Instant Games. We literally made an Instant Game this fast, however we will look onto some cool details and monetisation techniques with the next tutorials.

Creating Your Facebook Instant Game Package
Everytime you build your game, you must do the following procedure to build your package. Then you may upload it to Facebook.

To build an Instant Game Package, simply run the game on Game Maker Studio 2 IDE. After running, Game Maker Studio will open up a micro web server window and we will copy our game’s folder from there.

From the copy index.html and html5game folder and paste it into your desktop. We will need to adjust it a little bit to include Facebook SDK Javascript file.

Now you’ve pasted index.html and html5game folder in your Desktop, open the index.html file with any text editor(Notepad for example). Scroll down to bottom and you will see a part that starts with <!– Run the game code –>. We will add one line below that one to include Facebook Instant Games SDK.

You must not change anything else here! Now save and close the file. You may now create a zip file with index.html and html5game folder.

And a one final step, is to upload the game on Facebook. On your game’s Facebook Developers App page, head over the Web Hosting from left menu and click Upload Version button.

Facebook will scan your files and the Status will be changed to Standby. It’ll take some 10 seconds. After then, you can make your game ready for testing.

Now, your game is on testing, you can gladly check it on your phone or PC. Just head over the Details page and share your game to your profile. Yeap, you can play it from there

You now have an Instant Game, congratulations. In the next tutorial, I will show how you can put leaderboards and compete with Facebook friends. Tutorial roadmap for Instant Games are;

  1. Create Your Instant Game(Part 1)
  2. Leaderboards and Scoring System(Coming soon)
  3. Monetisation and In App Purchases(I’ll write)
  4. To be decided

Post Author: Marty

I think I'm a game developer, I think... :(

Leave a Reply

Your email address will not be published.