Pages: 1 2

Facebook instant games?

colburt187

  • *
  • Posts: 2416
November 09, 2018, 02:13:34 am
Quote from: ceosol on October 19, 2018, 09:02:33 pm
Most of this is in the original html5 index.html. The main things are the script for connect.facebook and the initialization of FBinstant. You can just copy this and replace your index.html with it. Of course, change "yourgamename". This works on my iPad. I've tried to connect on my Window's phone, but I cannot find how to open instant games on it :D

Code: [Select]
<!DOCTYPE html>
<html lang="en">
    <head>
       
        <meta charset="utf-8">
           
            <title>yourgamename</title>
           
            <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta name="apple-mobile-web-app-capable" content="yes">
               
               
                <link rel="shortcut icon" type="image/png" href="./favicon.png">
                   
                   
                    <script type="text/javascript" src="./lib/howler.min.js"></script>
                    <script type="text/javascript" src="./lib/pako.min.js"></script>
                    <script type="text/javascript" src="./lib/FileSaver.min.js"></script>
                    <script type="text/javascript" src="./Flicker.js"></script>
                    <script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
                   
                    <script>
                        FBInstant.initializeAsync().then(function() {
                                                         FBInstant.setLoadingProgress(100);
                                                         setTimeout(function() {
                                                                    var canvases = document.getElementsByTagName("CANVAS");
                                                                    var canvas = canvases[0];
                                                                    canvas.style.width = "100%";
                                                                    canvas.style.height = "100%";
                                                                    console.log("Found canvas: " + canvas);
                                                                    }, 3000);
                                                         FBInstant.startGameAsync().then(function() {
                                                                                         window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, { capture: false, passive: false });
                                                                                         if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
                                                                                         var meta = document.getElementById ("viewport");
                                                                                         meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
                                                                                         }
                                                                                         })
                                                         })
                                                         
                        </script>
                   
                    <script>
                        window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, { capture: false, passive: false });
                        if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
                            var meta = document.getElementById ("viewport");
                            meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
                        }
                    </script>
                   
                    <style>
                        html,body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
                        #openfl-content { background: #000000; width: 100%; height: 100%; }
                        div#openfl-content { width: 100%; height: 100%; }
                       
                        </style>
                   
    </head>
    <body>
       
        <noscript>This webpage makes extensive use of JavaScript. Please enable JavaScript in your web browser to view this page.</noscript>
       
        <div id="openfl-content"></div>
       
        <script type="text/javascript">
            lime.embed ("Flicker", "openfl-content", 640, 960, { parameters: {} });
            </script>
       
    </body>
</html>

Could you explain a bit more about what to do with this code? you then export the game as HTML5 and upload to facebook?

ceosol

  • *
  • Posts: 2279
November 11, 2018, 07:38:35 pm
Could a mod move this to a better forum? Either chitchat, extensions or work in progress might be better

Quote from: colburt187 on November 09, 2018, 02:13:34 am
Could you explain a bit more about what to do with this code? you then export the game as HTML5 and upload to facebook?

Sorry, I've been checking, but haven't seen a response to this.

You put that code into the index.html. Then you zip the "bin" folder and upload it straight like that.

RulezTeam

  • *
  • Posts: 318
January 16, 2019, 02:27:04 am
Hi ceosol,

if I try to upload only the bin folder, there is a problem, because Facebook ask for Bundle Config. This is the error :

You must include a bundle config in your upload. To create a bundle config, please refer to: https://developers.facebook.com/docs/games/instant-games/sdk/bundle-config.

ceosol

  • *
  • Posts: 2279
January 19, 2019, 07:16:02 pm
Duplicate you game-config.json and rename it to fbapp-config.json.

Delete everything inbetween the { at the start and } at the end.

In between the brackets paste in this:
Code: [Select]
"instant_games": {
    "orientation": "PORTRAIT",
    "navigation_menu_version": "NAV_FLOATING",
  }
Save it and place the file in the bin folder (where your index.html is).

Quote from: RulezTeam on January 16, 2019, 02:27:04 am
Hi ceosol,

if I try to upload only the bin folder, there is a problem, because Facebook ask for Bundle Config. This is the error :

You must include a bundle config in your upload. To create a bundle config, please refer to: https://developers.facebook.com/docs/games/instant-games/sdk/bundle-config.



I attached a screenshot showing that the new version was accepted and even pushed to production. I hope this helps :)

RulezTeam

  • *
  • Posts: 318
January 21, 2019, 01:16:16 am
Hi ceosol,
thank you.

ceosol

  • *
  • Posts: 2279
January 21, 2019, 08:45:41 am
I guess a better way to write it would be: delete everything in fbapp-config.json and paste in all of this :)
Code: [Select]
{
    "instant_games": {
        "orientation": "PORTRAIT",
        "navigation_menu_version": "NAV_FLOATING",
    }
}
Of course, if you want your game to be landscape, use LANDSCAPE instead of portrait.

RulezTeam

  • *
  • Posts: 318
January 22, 2019, 05:30:56 am
Hi ceosol,
the problem with json is resolved, but the game doens't load. It's blocked at 0%. It seems that there are some problems with js. Is it possible that FB have changed its connection (fbinstant.6.2.js) and it doesn't work anymore with Stencyl ?

Update:
with Faceook for smartphone there is no audio. Why ?
Another thing: why the loader bar is so much slow to load ? Is possible to make the Facebook loader bar, compatible with time loader of Stencyl ?

« Last Edit: January 22, 2019, 06:32:56 am by RulezTeam »

ceosol

  • *
  • Posts: 2279
January 22, 2019, 09:55:51 am
Quote from: RulezTeam on January 22, 2019, 05:30:56 am
Hi ceosol,
the problem with json is resolved, but the game doens't load. It's blocked at 0%. It seems that there are some problems with js. Is it possible that FB have changed its connection (fbinstant.6.2.js) and it doesn't work anymore with Stencyl ?

Update:
with Faceook for smartphone there is no audio. Why ?
Another thing: why the loader bar is so much slow to load ? Is possible to make the Facebook loader bar, compatible with time loader of Stencyl ?

1. How big is your file?

2. What are you using to run your program?

RulezTeam

  • *
  • Posts: 318
January 23, 2019, 12:55:33 am
Hi ceosol,
my zip is about 9Mb and my js is about 5Mb.
I'm using Facebook app for Android and the loader bar is loading too much slow. While on computer browser it's a little fast. Moreover, when you see that loader screen of Facebook is arrived at 100% and then you see another loader bar (from Stencyl) and this bar is so slow, you stop the game and move on to something else. Also when you see two loader screen (FB and Stencyl) it is strange as well as boring

ceosol

  • *
  • Posts: 2279
January 23, 2019, 10:16:47 am
For one, instant games are ideally <1 Mb. At max, make them 3 Mb  - otherwise they are no longer instant. Get rid of you unnecessary files and shrink it or remove it from instant apps and go with a regular FB game.

I've never seen two loader bars with my test game and and it comes up within 1-2 seconds.

For two: Instant games are meant to be used with the messenger app. Try that instead of the facebook app. I have used the android messenger, ipad safari with facebook website logged into messenger, and Mac safari with facebook website logged into messenger. If I remember correctly, I tried it on my window's phone and had trouble with the facebook app itself because messenger was not working correctly.

Quote
Overview. Instant Games users can find and play games directly in the News Feed or Messenger conversations, on both desktop and on their mobile devices.

Quote
Have an initial download size of no more than 3MB (or 1MB for lightweight games)

Both quotes taken from facebook developer pages.

RulezTeam

  • *
  • Posts: 318
January 24, 2019, 06:24:29 am
Hi ceosol,
I've tried with messenger, but no sound.
For size, I've tried to clean unused actors or scenes, but I'm still on 4Mb of js. So I don't know how to have a size of no more then 3Mb.
Moreover, I've seen some game that have (and that I think are) a lot of graphic, multiple scene and connection to services, so I'm sure that that instant game are much bigger than mine. Anyway, FB have a limit of 200MB for instant game, so my project of 4MB shouldn't be so heavy. So I think that it's something about lime/haxe/openfl and Stencyl that have some problem with export for html5 and loader optimization.

ceosol

  • *
  • Posts: 2279
January 25, 2019, 12:36:54 pm
Quote from: RulezTeam on January 24, 2019, 06:24:29 am

Moreover, I've seen some game that have (and that I think are) a lot of graphic, multiple scene and connection to services, so I'm sure that that instant game are much bigger than mine.

Initial download size is different than total size. You need to take some of your graphics out and download them are runtime.

html5 is hit or miss on sounds to begin with. Actually, it seems to be hit or miss in general. Try different sound files and bit rates. Maybe look up the best way to optimize audio for html5 games in browsers, etc.

RulezTeam

  • *
  • Posts: 318
January 25, 2019, 02:21:57 pm
Hi ceosol,
thank you for your suggestions. But I have a question: I've seen that the loader is fast for the first half of bar, than when it's about at three-quarters, the loader "stop" and the second goes on. What is Stencyl doing at 70/80% ?

JeffreyDriver

  • Posts: 2262
January 25, 2019, 02:28:11 pm
Quote from: RulezTeam on January 25, 2019, 02:21:57 pm
Hi ceosol,
thank you for your suggestions. But I have a question: I've seen that the loader is fast for the first half of bar, than when it's about at three-quarters, the loader "stop" and the second goes on. What is Stencyl doing at 70/80% ?

I haven't really been following this thread that closely, but the "What is Stencyl doing at 70/80% ?" strikes a chord because I've seen other engines, Unity for one, do exactly the same thing, It's almost at the end, and then it takes ages for the last 20%.

So I don't think this is Stencyl specific, but it would still be interesting to know what's going on. Is it coincidence?

RulezTeam

  • *
  • Posts: 318
January 26, 2019, 02:07:43 am
Hi Jeffrey,
yes, it's interesting to know about it. Is it coincidence ? No.
I hope that some dev (Justin or Rob) can give us an answer.
Pages: 1 2