Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Facebook Instant Games Support - HTML5

Discussion in 'WebGL' started by ina, Oct 8, 2017.

  1. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    799
  2. Schubkraft

    Schubkraft

    Unity Technologies

    Joined:
    Dec 3, 2012
    Posts:
    906
    Sadly this is not supported at the moment from our end.
     
    ina likes this.
  3. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    799
    That is quite sad indeed - missed platform potential

    Is this anywhere in the roadmap
     
  4. summerian

    summerian

    Joined:
    Jul 6, 2014
    Posts:
    122
    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.
     
    Last edited: Nov 8, 2017
  5. Kiori

    Kiori

    Joined:
    Jun 25, 2014
    Posts:
    159
    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.
     
  6. summerian

    summerian

    Joined:
    Jul 6, 2014
    Posts:
    122
    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.
     
  7. Kiori

    Kiori

    Joined:
    Jun 25, 2014
    Posts:
    159
    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!
     
  8. summerian

    summerian

    Joined:
    Jul 6, 2014
    Posts:
    122
    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.
     
    Kiori likes this.
  9. benjiveee

    benjiveee

    Joined:
    Jan 5, 2018
    Posts:
    2
    Anyone play the soccer game Golden Boot? It's definitely a 3D game and loads super fast. Is it made with Unity?
     
    akashganga7 likes this.
  10. yuliyF

    yuliyF

    Joined:
    Nov 15, 2012
    Posts:
    136
    yes, It's on Unity3d, trying: https://apps.facebook.com/goldenbootgame
    and it loads so so
     
  11. benjiveee

    benjiveee

    Joined:
    Jan 5, 2018
    Posts:
    2
    i don't think itis the same the same game. also the play button doesn't work and is greyed out.
     
  12. nemo10

    nemo10

    Joined:
    Jul 25, 2017
    Posts:
    3
    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?
     
  13. Schubkraft

    Schubkraft

    Unity Technologies

    Joined:
    Dec 3, 2012
    Posts:
    906
    There is nothing you can currently use and if you are starting a project don't bet all of it on some "future" that might never come.

    But we know that this is something a lot of you want and we're working on it right now. See


    There will be more info later this year as we make progress and have more to share.
     
    marval and Aladine like this.
  14. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    799
    any particular timepoint in highlight here

    also will this be unity 2D only or fully unity 3D support in fb instant games
     
    akashganga7 likes this.
  15. shader13

    shader13

    Joined:
    Aug 31, 2012
    Posts:
    15
    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?
     
  16. KaffeSumpen

    KaffeSumpen

    Joined:
    Aug 12, 2013
    Posts:
    11
    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.
     
  17. greaneagle

    greaneagle

    Joined:
    Nov 11, 2013
    Posts:
    17
    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 :)
     
  18. KaffeSumpen

    KaffeSumpen

    Joined:
    Aug 12, 2013
    Posts:
    11
    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.
     
    Last edited: Apr 1, 2018
  19. Aladine

    Aladine

    Joined:
    Jul 31, 2013
    Posts:
    138
    at what time in the video is webGl/Fb instant games are mentioned please ?

    thanks
     
  20. Schubkraft

    Schubkraft

    Unity Technologies

    Joined:
    Dec 3, 2012
    Posts:
    906
    the link above is set to where that part starts (01:30h)
     
    Aladine likes this.
  21. SweatyChair

    SweatyChair

    Joined:
    Feb 15, 2016
    Posts:
    111
    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)
     
  22. ShantuApps

    ShantuApps

    Joined:
    Apr 25, 2016
    Posts:
    14
    So, final words, webgL will not work on FB instant game ?
     
  23. Marco-Trivellato

    Marco-Trivellato

    Unity Technologies

    Joined:
    Jul 9, 2013
    Posts:
    1,653
    As mentioned previously in this forum, Unity WebGL is not officially supported on mobile browsers. Having said that, you can try to use it if you want as it might work depending on device/browser/content.

    There is also no short term plan to make a FB Instant Games build target based on Unity WebGL.
     
    ShantuApps likes this.
  24. ShantuApps

    ShantuApps

    Joined:
    Apr 25, 2016
    Posts:
    14
    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 :)
     
  25. kaixazero

    kaixazero

    Joined:
    Jun 11, 2018
    Posts:
    1
    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.
     
  26. shader13

    shader13

    Joined:
    Aug 31, 2012
    Posts:
    15
    Unity based game can work on Facebook Instant Games now! ;)
    WX20180613-152025@2x.png
     
  27. kobyle

    kobyle

    Joined:
    Feb 23, 2015
    Posts:
    89
    How?
     
  28. shader13

    shader13

    Joined:
    Aug 31, 2012
    Posts:
    15
     

    Attached Files:

    Inspeinre, Smalfy, zephybite0 and 2 others like this.
  29. Dunk86

    Dunk86

    Joined:
    May 10, 2015
    Posts:
    50
    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...
     
  30. drorriov

    drorriov

    Joined:
    Jun 7, 2014
    Posts:
    33
    Thanks, shader13, interesting to see more developers managing to port to fb instant games..
     
  31. yahyaidrees

    yahyaidrees

    Joined:
    Mar 1, 2018
    Posts:
    4
    i had followed these steps but situation is similar,the game stucks at 0% loading
     
  32. copyado123

    copyado123

    Joined:
    May 23, 2017
    Posts:
    1
    Did you implement facebook's api?
     
  33. DesigningKnight

    DesigningKnight

    Joined:
    Aug 21, 2018
    Posts:
    18
    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.
     
  34. Shaheer_Tahir

    Shaheer_Tahir

    Joined:
    Aug 14, 2014
    Posts:
    5
    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
     
  35. ducbot88

    ducbot88

    Joined:
    Jan 16, 2018
    Posts:
    1
    Could you share more coupon codes ?
     
  36. makaqo

    makaqo

    Joined:
    Sep 16, 2015
    Posts:
    14
    zephybite0 likes this.
  37. DesigningKnight

    DesigningKnight

    Joined:
    Aug 21, 2018
    Posts:
    18
    $65 for your course is way out of my price range, as in impossible.
     
  38. DesigningKnight

    DesigningKnight

    Joined:
    Aug 21, 2018
    Posts:
    18
    Can you share how you did it?
     
  39. yahyaidrees

    yahyaidrees

    Joined:
    Mar 1, 2018
    Posts:
    4
    can you share more coupon codes?
     
  40. yahyaidrees

    yahyaidrees

    Joined:
    Mar 1, 2018
    Posts:
    4
    no, i just followed these steps which are in documentation,and export it in webgl.
     
  41. yahyaidrees

    yahyaidrees

    Joined:
    Mar 1, 2018
    Posts:
    4
    did you implement facebook api, if yes , then how?
     
  42. Shaheer_Tahir

    Shaheer_Tahir

    Joined:
    Aug 14, 2014
    Posts:
    5
    Last edited: Sep 25, 2018
  43. tummygames

    tummygames

    Joined:
    Dec 12, 2017
    Posts:
    2
    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..
     
  44. MarieScala

    MarieScala

    Joined:
    Dec 5, 2017
    Posts:
    16
    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 !
     
    Last edited: Nov 15, 2018
  45. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    799
    Did you get your InstantGame approved?

     
  46. kumarKS

    kumarKS

    Joined:
    Aug 10, 2018
    Posts:
    2
    Have you implemented the FB login with this code ??
     
  47. plugin_alan

    plugin_alan

    Joined:
    Nov 21, 2012
    Posts:
    6
    Anyone wanting decent HTML5 output should check out PlayCanvas - very very Unity-like, but built with mobile web browser usage at the forefront.
     
  48. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    799
    ... completely defeats the purpose of Unity for facebook games
     
  49. adhi

    adhi

    Joined:
    Aug 20, 2014
    Posts:
    1
    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?
     
    shavez94 likes this.
  50. shavez94

    shavez94

    Joined:
    Apr 17, 2018
    Posts:
    2
    actually cant wait for the tiny unity to be officially released