Facebook WebGl Instant game stuck at 0% Loading
Following the Guides given at
https://developers.facebook.com/docs/unity/gettingstarted and https://developers.facebook.com/docs/unity/getting-started/canvas
I built a demo Facebook Instant Game using unity 5.5.2 however whenever I test the game on facebook (both from android messenger and web) the loading is stuck at 0%. The scene however always loads completely behind the loading screen as shown in the image attached. Do i need to call some function from the facebook unity plugin or am i missing something else on the facebook app settings page?? NoLoading.png
Answer by Zotrov · May 02, 2018 at 12:34 PM
I'm also having this problem...
But what I think is going on is: There might not be a place to tell Facebook instant game the percentage loaded, if that makes sense.
First step in this doc: https://developers.facebook.com/docs/games/instant-games/getting-started/quickstart
Answer by UDN_0111454d-2d8c-40da-8c8e-ee284a7f58f7 · Aug 01, 2018 at 08:46 AM
Same here! I menage to publish Facebook Web Game and on Gameroom ,but could not on Instant games. Which in strange since both Facebook web games and Instant games are webgl builds.
Answer by ShaheerTahir · Sep 13, 2018 at 08:14 AM
I managed to solve all the issues and recently released a course on Udemy on how to port your Unity game to Facebook Instant without using external tools like Export2Canvas, and also how to interact with the Facebook instant library from a unity game.
https://www.udemy.com/creating-facebook-instant-games-using-unity/
Also I am working on a plugin to automate the whole process (leaderboards and facebook ads included), which i hope to release this week.
first five can get the course for free using the coupon code INSTANT4UNITY just make sure to leave a review
Answer by Trusty · Nov 16, 2018 at 09:59 PM
Well, all is explain in the doc but I admit it's not very clear if you are not familiar to HTML5. Maybe a bit late but for those who will face same issue :
Build your game for WebGl.
Edit index.html to add FBInstant support and call the inialize function as in the documentation /!\ Remplace the "WebGl.json" by your script name. This resolve the SDK error you should have seen ( don't know how you pass it )
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity WebGL Player | FacebookSample</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <script src="TemplateData/UnityProgress.js"></script> <script src="https://connect.facebook.net/en_US/fbinstant.6.1.js"></script> <script src="Build/UnityLoader.js"></script> <script>FBInstant.initializeAsync().then(function() { var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGl.json", {onProgress: UnityProgress}); }); </script> </head> <body> <div class="webgl-content"> <div id="gameContainer" style="width: 960px; height: 600px"></div> <div class="footer"> <div class="webgl-logo"></div> <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div> <div class="title">FacebookSample</div> </div> </div> </body> </html>
Tell Facebook Your game is loaded. Add the StartAsync
-
function UnityProgress(gameInstance, progress) {
if (!gameInstance.Module)
return;
if (!gameInstance.logo) {
gameInstance.logo = document.createElement("div");
gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
gameInstance.container.appendChild(gameInstance.logo);
}
if (!gameInstance.progress) {
gameInstance.progress = document.createElement("div");
gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
gameInstance.progress.empty = document.createElement("div");
gameInstance.progress.empty.className = "empty";
gameInstance.progress.appendChild(gameInstance.progress.empty);
gameInstance.progress.full = document.createElement("div");
gameInstance.progress.full.className = "full";
gameInstance.progress.appendChild(gameInstance.progress.full);
gameInstance.container.appendChild(gameInstance.progress);
}
gameInstance.progress.full.style.width = (100 * progress) + "%";
gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
FBInstant.setLoadingProgress(100*progress);
if (progress == 1)
{
FBInstant.startGameAsync().then(function(){
console.log("Game Started");
});
gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
}
}
Well done !
After doing this its working Only On web but not loading On messenger what should i do to run there as well
Did you solved it? Then please tell me. How?
Answer by dahliaivy006 · Apr 23, 2020 at 05:48 AM
You need to be using the Instant Games API. For example:
FBInstant.intializeAsync().then(() => { // load your game return FBInstant.startGameAsync(); }).then(() => { // your game logic }); You can't use this API directly from C# as it's a JavaScript API. To use JavaScript from Unity see this tutorial
,I’ve been following along with the Defold platformer tutorial, so I thought I’d try to get it to run as a Facebook Instant Game. I added the dependancy to the GitHub master zip, configured the app on Facebook Dashboard, and copy-pasted my App ID into the facebook section of game.project. Then I bundled the project as an HTML5 game, and added the reference to the Facebook Instant Games script in the resulting index.html. However, when I upload the game to Facebook and try to run it on my phone through Facebook Messenger, the loading gets stuck around 80-90%. Has anyone else encountered this?