Facebook instant games?


gurigraphics

  • Posts: 688
Quote
Will stencyl require a plugin to publish to this platform or anything like that?

To get images profile, friends, birthday, age and etc., yes.
And to monetize games with Facebook ads you must have a company.


ceosol

  • *
  • Posts: 2225
I know this is an old topic resurrection... I was wondering if anybody moved forward with doing FB instant games.

colburt187

  • *
  • Posts: 2270
Would be interesting to know more if stencyl was capable of this. I think work would need done on the HTML5 export, it doesn't currently scale properly on mobile devices, then we would probably need an extension for all the instant game stuff, ads, logging in etc.

squeeb

  • Posts: 1418
I also have been reading into this... seems like some extension may be needed

ceosol

  • *
  • Posts: 2225
From what I read, Haxe-flixel and openFL are both accepted API for FB.

ceosol

  • *
  • Posts: 2225
I tested it out, the stencyl-made games do work with FB Instant Games. They just need some minor tweaking to be optimized for phones. I have Guri's FB extension enabled, but not of the blocks used. I'll start working on that side of it.

I am creating a list of some edits you have to add into the index.html file. I'll post those when I'm done :)

colburt187

  • *
  • Posts: 2270
Nice! What scaling mode did you use?

ceosol

  • *
  • Posts: 2225
Nice! What scaling mode did you use?

That's the part I'm trying to figure out hahaha :)

ceosol

  • *
  • Posts: 2225
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>

ceosol

  • *
  • Posts: 2225
Here's a screenshot from my iPad with the game working on FBinstant.

I blurred out the conversation, but you can see that I was chatting with someone in messenger and the game comes up on top.

colburt187

  • *
  • Posts: 2270
Nice good work! So you solved the scaling issues?

ceosol

  • *
  • Posts: 2225
I do not have an iPhone to test on. I could probably borrow a device to check android.

ceosol

  • *
  • Posts: 2225
I read something saying that you can take out the "width=device-width" from the meta content at the top. With that removed, it still rescaled perfectly fine on my iPad. It worked on FB Messenger on an android tablet, as well. I tried to get messenger on my phone but it said the Rest API is deprecated.