Facebook Instant Games Support - HTML5

Is there a way to export Unity WebGL for use via Facebook Messenger Instant Games?

https://developers.facebook.com/blog/post/2016/11/30/instant-games-closed-beta/

 

That is quite sad indeed - missed platform potential

Is this anywhere in the roadmap

 

Any updates on this? The instant games now have millions of players.

I'd like to use unity for this but I have to use Cocos Creator since the output actually works on mobile.

 

They could remove the mobile block, it works on my mobile tests. Performance doesnt compare with a pure-JS engine, but it works. I think as it's stated elsewhere, the real culprit is loading them atm. It would be cool if they gave users a direction.

Personally unity should have done what YYG did, and like IL2CPP, created a translator that would output into a real JS engine, that they would build internally. GameMaker outputs to JS like any reasonable html5 solution should.
Even if this meant having less features or whatnot, performance gains would be worth it for these scenarios.

 

What do you do to make it work? It feels like it's a bit hit and miss whether a build will work or not. Often the game will start but the webview will crash and reload after some time. I try to keep memory usage below 150 mb but there must be something else I have to watch out for.

 

That I recall, last time i tried, I think it required 256mb to get it right. Not sure if i did get at least one of the demos to run on 128mb. I usually keep them on 2^x(128,256,512, etc).

In my tests, and this was on a more modern tablet and a samsung galaxy s3 mini(old), the asm.js build was at times more performant, but it seems the wasm build was more stable. I really don't like having to remove the mobile warning, that warning really should exist.
This guy goes into detail on creating your own template:

It took quite a while to load either way, certainly loading is the biggest issue. All of this was a few months back, so not sure how things are right now. Oh, i also turn off exceptions.

Not sure what else i can say, good luck!

 

Thanks for the input though I think things are just too uncertain right now. Until Unity officially supports mobile browsers I'll use something else.

 

Anyone play the soccer game Golden Boot? It's definitely a 3D game and loads super fast. Is it made with Unity?

 

yes, It's on Unity3d, trying: https://apps.facebook.com/goldenbootgame
and it loads so so

 

i don't think itis the same the same game. also the play button doesn't work and is greyed out.

 

This may be inappropriate, but I'd like to bump this thread since it's been a while - is there any news on Unity supporting Facebook Instant Games? Or would it be possible to jury-rig a facebook instant games app when exporting to html5?

 

any particular timepoint in highlight here

also will this be unity 2D only or fully unity 3D support in fb instant games

 

FB instant games are totally based on system webview, if Unity wants to use micro runtime to adapt to IG, I think it should be a runtime is embedded in messenger, I am curious how Apple think about it, whether it will violate Apple's policy?

 

I am really looking forward to this, I just made a super simple Flappybird and ported to WebGL web assembly and it's just to bloated and slow.
Hope to get my hands on a beta of the "fast and small" Unity pipeline as soon as possible, love your work Guys and girls keep it up.

 

Yeah, this would help a lot if implemented somehow. Other engines already have it and it is supposedly quite easy to use (Cocos2D). So any info about FB instant games and Unity would be awesome

 

To be fair, to write a simple FB instant game ( just a regular HTML5 game that uses the FB API) is not to hard, it's the tooling one want from Unity to be productive.

 

at what time in the video is webGl/Fb instant games are mentioned please ?

thanks

 

We are also in situation that wanting to switch to HTML5 from mobile, because the hits in FB instant game and WeChat mini game this yr.

Sadly Unity still not yet support it and we have to consider Cocos Creator (We don't want to coz we have 5+ yrs exp in Unity but none in Cocos)

 

So, final words, webgL will not work on FB instant game ?

 

Thanks for the reply, it gives me little hope, my game is simple, "29 Card Online", its a 2d online multiplayer card game, only button like touch input is used to play a card or other interaction, should be simple enough to render. I will give it a try today.

Thanks again

 

if you want to make FB Instant Games, you can use "Construct 3" game engine.
it has widely support for Instant games, such us leaderboard and challenging or inviting friends, etc.
you can export your game project to native HTML5 game that support FB Instant Games.

note that it is only support 2D game.

 

Unity based game can work on Facebook Instant Games now!

 

How?

 

From a little research, it seems they have a custom wrapper that can take a large webGL build and stream it through a smaller proxy game that fits inside the facebook instant games limit. Correct me if I'm wrong...

 

Thanks, shader13, interesting to see more developers managing to port to fb instant games..

 

i had followed these steps but situation is similar,the game stucks at 0% loading

 

Did you implement facebook's api?

 

Unity, PLEASE PLEASE make a way to export to canvas for Facebook Instant Games. The existing solution, Export2Canvas is out of their minds! $2000/per seat/per year, plus 5% revenue share? Impossible for many of us just getting started.

 

I 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

 

Could you share more coupon codes ?

 

Hi, recently I published my first game in Facebook Instant.
I'm from Mexico, for that reason I can not monetize said game.
you can try the game http://m.me/279048599488255?game=jusobasket

 

$65 for your course is way out of my price range, as in impossible.

 

Can you share how you did it?

 

can you share more coupon codes?

 

no, i just followed these steps which are in documentation,and export it in webgl.

 

did you implement facebook api, if yes , then how?

 

you can take the course at 11$ (83% off) using the coupon code BS8AD11D
or using the link
https://www.udemy.com/creating-facebook-instant-games-using-unity/?couponCode=BS8AD11D
(15 coupons left)

 

This wont work with facebook instant games You have to export HTML5 type of game not Index with webgl ..
This is no good since you can't implement Instant games API tools. and game won't run on most devices..

 

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.

Code (JavaScript):

1.  <!DOCTYPE html>
2.         <html lang="en-us">
3.           <head>
4.             <meta charset="utf-8">
5.             <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6.             <title>Unity WebGL Player | FacebookSample</title>
7.             <link rel="shortcut icon" href="TemplateData/favicon.ico">
8.             <link rel="stylesheet" href="TemplateData/style.css">
9.             <script src="TemplateData/UnityProgress.js"></script>
10.            <script src="https://connect.facebook.net/en_US/fbinstant.6.1.js"></script>
11.             <script src="Build/UnityLoader.js"></script>
12.             <script>FBInstant.initializeAsync().then(function() {
13.     var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGl.json", {onProgress: UnityProgress});
14.                });
15.            </script>
16.           </head>
17.           <body>
18.             <div class="webgl-content">
19.               <div id="gameContainer" style="width: 960px; height: 600px"></div>
20.               <div class="footer">
21.                 <div class="webgl-logo"></div>
22.                 <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
23.                 <div class="title">FacebookSample</div>
24.               </div>
25.             </div>
26.           </body>
27.         </html>

- Tell Facebook Your game is loaded. Add the StartAsync in UnityProgress.js to avoid infinite loading.

Code (JavaScript):

1.     function UnityProgress(gameInstance, progress) {
2.       if (!gameInstance.Module)
3.         return;
4.       if (!gameInstance.logo) {
5.         gameInstance.logo = document.createElement("div");
6.         gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
7.         gameInstance.container.appendChild(gameInstance.logo);
8.       }
9.       if (!gameInstance.progress) {
10.         gameInstance.progress = document.createElement("div");
11.         gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
12.         gameInstance.progress.empty = document.createElement("div");
13.         gameInstance.progress.empty.className = "empty";
14.         gameInstance.progress.appendChild(gameInstance.progress.empty);
15.         gameInstance.progress.full = document.createElement("div");
16.         gameInstance.progress.full.className = "full";
17.         gameInstance.progress.appendChild(gameInstance.progress.full);
18.         gameInstance.container.appendChild(gameInstance.progress);
19.       }
20.       gameInstance.progress.full.style.width = (100 * progress) + "%";
21.       gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
22.       FBInstant.setLoadingProgress(100*progress);
23.       if (progress == 1)
24.       {
25.          FBInstant.startGameAsync().then(function(){
26.          });
27.  
28.         gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
29.       }
30.     }

Well done !

 

Did you get your InstantGame approved?

 

Have you implemented the FB login with this code ??

 

Anyone wanting decent HTML5 output should check out PlayCanvas - very very Unity-like, but built with mobile web browser usage at the forefront.

 

... completely defeats the purpose of Unity for facebook games

 

Is Tiny Mode in Unity works perfectly for facebook instant games? Tiny mode is in alpha but they announced that it released within 2019. Is that a good idea to create casual games in this tiny mode for business boosting?

 

actually cant wait for the tiny unity to be officially released