Pages: 1 2

Facebook instant games?

SomeT

  • *
  • Posts: 143
December 29, 2016, 08:23:36 am
As per : https://developers.facebook.com/blog/post/2016/11/30/instant-games-closed-beta/ and

https://www.facebook.com/help/contact/173350173135692

Will stencyl require a plugin to publish to this platform or anything like that?

gurigraphics

  • Posts: 688
December 29, 2016, 09:06:57 am
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.

SomeT

  • *
  • Posts: 143
December 29, 2016, 10:54:03 am
Thanks

ceosol

  • *
  • Posts: 2274
October 01, 2018, 07:25:59 pm
I know this is an old topic resurrection... I was wondering if anybody moved forward with doing FB instant games.

colburt187

  • *
  • Posts: 2412
October 02, 2018, 12:29:46 am
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: 1605
October 02, 2018, 05:56:02 pm
I also have been reading into this... seems like some extension may be needed

ceosol

  • *
  • Posts: 2274
October 03, 2018, 12:22:14 pm
From what I read, Haxe-flixel and openFL are both accepted API for FB.

ceosol

  • *
  • Posts: 2274
October 16, 2018, 07:38:01 pm
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: 2412
October 16, 2018, 11:17:03 pm
Nice! What scaling mode did you use?

ceosol

  • *
  • Posts: 2274
October 17, 2018, 07:22:43 pm
Quote from: colburt187 on October 16, 2018, 11:17:03 pm
Nice! What scaling mode did you use?

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

ceosol

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

ceosol

  • *
  • Posts: 2274
October 19, 2018, 09:05:38 pm
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: 2412
October 20, 2018, 03:15:25 am
Nice good work! So you solved the scaling issues?

ceosol

  • *
  • Posts: 2274
October 21, 2018, 10:52:16 am
I do not have an iPhone to test on. I could probably borrow a device to check android.

ceosol

  • *
  • Posts: 2274
October 22, 2018, 06:56:39 pm
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.
Pages: 1 2