User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11

Thread: Facebook Instant Games - Official thread

  1. #1
    Clicker Fusion 2.5 MaciOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    TGeorgeMihai's Avatar
    Join Date
    Nov 2015
    Posts
    118
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Smile Facebook Instant Games - Official thread

    Hello community

    I created this thread in order to work together and get our games on Facebook Instant Games platform.

    chocoBreak1.jpg chocoBreak2.jpg chocoBreak3.jpg

    It would be nice to have a plugin, but I would not hold may breath since Clickteam is busy with Fusion 3 and until now nobody made a Facebook plugin
    Yes, Fusion's HTML5 games work on this platform, but is kind of a mess since there is no Fusion object that can execute JS code, only the HTML5 Object that can run a JS function from the index.html file.

    You need some knowledge about JavaScript, you can learn the basics of JS here:
    https://www.w3schools.com/js
    https://www.w3schools.com/html/html_scripts.asp

    Also, you need to understand how Facebook's API work:
    https://developers.facebook.com/docs.../instant-games
    https://developers.facebook.com/docs...ted/quickstart


    Here are the steps:

    1. Save your game as HTML5
    (and uncheck "Generate HTML file" to avoid overwriting)

    2. Open the index.html file and find the folloving lines:
    Code:
    <!-- EXTRASOURCES -->
    <!-- Loads the Javascript code...-->
    <script src="src/Runtime.js"></script>
    Add the following lines:
    Code:
    <script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
    <script src="src/FBInstant.js"></script>
    3. Inside your "src" folder create the file "FBInstant.js" (you can name it however you want, just make sure it has the same name as the one from the line you just added)
    Open it in a text editor and write the following:
    Code:
    FBInstant.initializeAsync()
      .then(function() {        
         // Start loading game assets here
      });
    
    
    // Here would be Facebook's loading script, but needs to be adapted for Fusion's loading
    
    
    // Once all assets are loaded, tells the SDK 
    // to end loading view and start the game
    FBInstant.startGameAsync()
      .then(function() {
        // Retrieving context and player information can only be done
        // once startGameAsync() resolves
        var contextId = FBInstant.context.getID();
        var contextType = FBInstant.context.getType();
    
        var playerName = FBInstant.player.getName();
        var playerPic = FBInstant.player.getPhoto();
        var playerId = FBInstant.player.getID();
    
        // Once startGameAsync() resolves it also means the loading view has 
        // been removed and the user can see the game viewport
    
        game.start();
      });
    4. Select the index.html, resource folders and archive them as .zip or .7z .

    This is just to make your game ready and working. To upload and test your game, read this:
    https://developers.facebook.com/docs...ted/quickstart


    This should be the basics. I would like that everybody to contribute with something if they know, to update the FBInstant.js and make it more Fusion-friendly


    Loading script (Experimental script - Not tested !!)

    This code makes the Instant games loading bar works.
    Code:
    var images = ['sprite1', 'sprite2', ...];
    for (var i=0; i < images.length; i++) {
      var assetName = images[i];  
      var progress = ((i+1)/images.length) * 100;  
      game.load.image(assetName);
    
      // Informs the SDK of loading progress
      FBInstant.setLoadingProgress(progress);
    }
    Since CF loads the resources in other way, this must be skipped or replaced.
    I'm new to javascript, but the code should be something like this:
    Code:
    var progress = 0;
    do {
      var progress = NUMBER;
      FBInstant.setLoadingProgress(progress);
    }
    while (progress < 100);
    This NUMBER should be from 0 to 100 and be the value of the start loading of the game; I don't know from where to take it.


    How to read variables (like player's name) from JavaScript inside Fusion (Experimental script - Not tested !!)

    Inside "FBInstant.js" write the function:
    Code:
    function getVariableContent(tempVar) {
        return eval(tempVar);
    }
    Sorry, I don't know an alternative to "eval()"

    In Fusion the code should be something like:
    Code:
    On action (button press or something)
         - HTML5 -> Javascript -> Reset parameter list
         - HTML5 -> Javascript -> Add integer/float/string parameter -> Add the JS variable name that you want to know it's value 
         - HTML5 -> Javascript -> Call function "getVariableContent"
         - Random active -> Set alterable Value/String to "HTML5 - Get integer result"

    A simple trick to make Fusion HTML5 games load faster:
    https://community.clickteam.com/threads/96360-A-simple-trick-to-make-Fusion-HTML5-games-load-faster

  2. #2
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Koji_Kabuto's Avatar
    Join Date
    Jul 2006
    Location
    Venezuela
    Posts
    2,851
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Excellent work @TGeorgeMihai , tonight I'm going to try this to see how it goes.

    One question, will you know how to implement the game score with other people on Facebook?

  3. #3
    Clicker Fusion 2.5 MaciOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    TGeorgeMihai's Avatar
    Join Date
    Nov 2015
    Posts
    118
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @Koji_Kabuto It doesn't look that hard to implement scores, but I will be very busy next month, so no promises.

  4. #4
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    wpd's Avatar
    Join Date
    Nov 2015
    Location
    SE Asia
    Posts
    384
    Mentioned
    11 Post(s)
    Tagged
    1 Thread(s)
    Any update on this?
    Is this workaround been tested?
    Did the ads work? Please make updated tutorials, thanks

  5. #5
    Clicker Fusion 2.5 MaciOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    TGeorgeMihai's Avatar
    Join Date
    Nov 2015
    Posts
    118
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hello, I paused this project a little because of lack of time. I plan to release a video tutorial if everything works fine, but it will be in at least 2-3 months.

  6. #6
    Clicker Fusion 2.5 MaciOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    TGeorgeMihai's Avatar
    Join Date
    Nov 2015
    Posts
    118
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I've got it working.

    Only the following code needs to be added inside index.html
    HTML Code:
    <script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
    Everything else is made using the official HTML5 Object
    You can get the player name, picture and more other info.

    First release will be soon.

    To do:
    • Try to make the FB Instant loading work with the preloading of Fusion game (at the moment it stays at 0 while is loading, and jumps to 100 when finished)
    • Implementing Ads


    fusion2.5_facebook_instant_test.png

  7. #7
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Nov 2010
    Posts
    75
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've managed to get a Clickteam game running on Facebook Instant Games and get preloading and ads working after enough work and some of the details in this thread, but on iOS devices(where Facebook runs it through some kind of gecko webview), the game tends to crash to a white screen and restart whenever an ad is displayed(and sometimes even after enough frame changes) while on Android(which I believe Facebook runs it through using Chrome), it works mostly fine but the touch input seems to have issues with brief touches... would you happen to know if these are due to Facebook or general current HTML5 issues that might have a fix?

  8. #8
    Clicker Fusion 2.5 MaciOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    TGeorgeMihai's Avatar
    Join Date
    Nov 2015
    Posts
    118
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @DinnerSonic Unfortunately, I don't have an iOS device to test. Can you test the game without ads ? Also can you make a blank app, only with ads to see if the ads were the problem ?
    From what I know, MacOS has a Profiler application that you can monitor the device while running an app. Maybe it exceeds the RAM memory or something ?

    I managed to get Interstitial Ads working in Construct 2. I will try later with Fusion.

  9. #9
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Nov 2010
    Posts
    75
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I haven't gotten around to testing a totally blank app yet, but the game does eventually have the same issues even without ads(when running through Facebook Messenger on iOS), even outside of the normal problem area. If I go back and forth from title screen to level select and back, where ads would never show up, it still can eventually mess up. I'll try and look into profiler things, assuming it lets me profile Facebook, it's been hard for me to figure out how to debug it when it is inside of Facebook's own app.

  10. #10
    Clicker Fusion 2.5HTML5 Export Module
    no7mac's Avatar
    Join Date
    Nov 2018
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you think that you will make this an official object?
    and if not do you think someone else will?

Page 1 of 2 1 2 LastLast

Similar Threads

  1. Game Launcher Creator - Official Thread
    By Danny in forum Fusion 2.5
    Replies: 15
    Last Post: 20th March 2019, 08:08 PM
  2. The OFFICIAL "MOO" Thread
    By TDA in forum Extension Development
    Replies: 85
    Last Post: 25th July 2008, 12:27 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •