How to turn a Phaser web game into Facebook instant game? - facebook

Question

I made a simple web game using Phaser.io and I now I would like to turn it into a facebook instant game. I've tried following some articles but it didn't work.
Do you know any good source (article, youtube tutorial...) about the process of making a facebook instant game from a web game?

Answer 1

To host a Phaser Web Game to Facebook Instant Games, follow these steps:
First, you need to create a new Facebook app.
You will now land on the app dashboard, now you will select “Settings”, then “Basic”.
Now in the category select “Games”, then choose the category which fits best to your game.
Back to the dashboard, let’s select “Instant Games”.
Now you have to fill in some information, be sure “Use Instant Games” is set to “Yes”.
Now you have to upload a zipped file with the game. You can do this operation under “Web Hosting” panel, selecting “Upload Version”,
then pushing it to production by clicking on the star icon.
After, you have to include the Facebook Instant Games API in your index file:
<script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>;
Then, in your game file, when you normally create the game itself on window.onload function, you will have to create it this way:
FBInstant.initializeAsync().then(function() {
FBInstant.setLoadingProgress(100);
FBInstant.startGameAsync().then(function() {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
if(windowWidth > windowHeight){
windowWidth = windowHeight / 1.8;
}
var gameWidth = windowWidth * gameOptions.gameHeight / windowHeight;
game = new Phaser.Game(gameWidth, gameOptions.gameHeight, Phaser.CANVAS);
game.state.add("Boot", boot);
game.state.add("Preload", preload);
game.state.add("TitleScreen", titleScreen);
game.state.add("PlayGame", playGame);
game.state.start("Boot");
})
})
You can check this tutorial for more details & visual instructions.