Following the Guides given at
and
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??
Managed to fix the issue and 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
Well, Here is a solution tu run your WebGl Game for FB Instant Game properly.
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 if you tried to upload a simple Webgl build.
<!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>
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 !
Yes , it’s work on the web but while I open with cellphone app message it not loading stay in 0.
Is there any solution?
tried this and keep getting told it needs one of these Bundle Configuration Reference - Facebook Games - Documentation - Meta for Developers, what is this?
as5405as I am having the same issue.
any suggestion
This isn’t working… still stuck on 0%
any solution ?? my Instant Game work only on android and on Web.but it stuck on IOs
same issue here ,it works fine on web but on mobile it is getting struck at 0% .did you got the solution?
Finally after weeks i managed to get it sorted…looks like there were a few tiny things i missed and one stupid thing i missed in the unity progress which is the line : game.start(); …which would help! For those who also had this issue here is the working fix:
<!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 | INSERT GAME TITLE HERE</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.3.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>FBInstant.initializeAsync().then(function() {
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/INSERT GAME TITLE HERE.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">INSERT GAME TITLE HERE</div>
</div>
</div>
</body>
</html>
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 () {
game.start();
console.log("Game Started");
});
gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
}
}
same here, did you find the solution?
There is a way to solve this problem but you should follow it on your own risk and it’s not recommended. Here are several steps to run your Unity WebGL project as Facebook Instant Game on iOS.
compatibilityCheck: function(e, t, r) {
UnityLoader.SystemInfo.hasWebGL
? t()
: e.popup("Your browser does not support WebGL", [{text: "OK", callback: r}])
},
This will allow you to pass to loading stage.
2. Then you will potentially find that your loading stucks on 89%.
This it because unity spawn “failed to asynchronously prepare wasm: Error: Out of executable memory” exception. Possible solution is to switch webGLLinkerTarget from webassembly to asm.js. You’ll find clues how to do it here .
3. You have troubles with debugging on iOS
There is no easy way to get console logs for iOS Facebook Instant Games so you have to find your own solution. Possible solution is to redirect console logs to your div. Follow next link to implement this in your index.html.
4. Bonus!
To test loading issues you can temporary move call of FBInstant.startGameAsync immediatelly after FBInstant.initializeAsync and before UnityLoader.instantiate call. This way you’ll be able to log all loading dependent issues.
Good luck!
I have the same problem. But I can’t find a solution anywhere. I have found the answer in many places. But I have failed. Can anyone tell me where to go and I will find the right solution.