Working with instant games api and playcanvas editor


#1

How do i go about implementing the instant games api in the editor and test it ?

Currently testing it is a long process, have to download a published build and then upload it manually to facebook instant API, and once its uploaded, only then could i test api functionality. I could automate this step sure, but attaching functions to buttons is proving a bit of a headache.

The issue is not being able to test in the editor.

As the Instant Games API requires the sdk to be integrated via script markup directly from a CDN ( and not added in the project), I’ve created a script to append the HTML markup into a document.

Here is a project with my current attempt at integrating the API:
https://playcanvas.com/project/601023/overview/instant-games-api-test

Not able to even log out a console message, what am i doing wrong or is this likely not possible to integrate within the editor?

Update:

It just doesnt seem like the html is being appended to the root of the index.html file, can anyone please comment or take a look maybe im doing something wrong?


#2

Looks like it is added to the HTML?


#3

This would be the way I would handle the ‘loadThisFirst’ callback. It still doesn’t work (FBInstant not defined) but the code does get executed compared to the current state: https://playcanvas.com/project/601453/overview/instant-games-api-test-from-foru


#4

yes ofcourse this makes much more sense, i was going with a shoddy example. thanks @yaustar will try this out


#5

Ah, here we go. I thought the loadAPI event was fired from the FB Instant SDK but then I realised it was from the project.

Here’s the new version that no longer has the ‘FBInstant not defined’ error: https://playcanvas.com/project/601453/overview/instant-games-api-test-from-foru


#6

thank you again.

okay so this technically works but the current problem with this is that playcanvas will load before anything else loads, which means that the instant game loading bar will not progress until playcanvas has finished in the background, ultimately this will not pass review on facebook i fear.
it would have to be the first thing that loads before playcanvas scripts/engine.

would a Loading Screen script help with this?

something like this :

/*jshint esversion:6*/
pc.script.createLoadingScreen(function (app) {
    var showSplash = function () {
       var str =  `<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
        <script type="text/javascript"> 
            window.addEventListener("loadAPI", loadThisFirst);
            function loadThisFirst() {
                FBInstant.initializeAsync().then(function() {
                    FBInstant.setLoadingProgress(100);
                    // Finished loading. Start the game
                    FBInstant.startGameAsync().then(function() {
                        startGame();          
                    });
                });
            }

            function selectContext() {
                FBInstant.context.chooseAsync()
                    .then(function() {
                    startGame();          
                });
            }

            function startGame() {
                // start game
                var game = new gameplayScene(FBInstant);
                game.start();
            }
        </script>`;
        
        var instantApiDiv = document.createElement('div');
        instantApiDiv.id = "fbInstantAPI";
        document.body.appendChild(instantApiDiv);
        instantApiDiv.innerHTML = str;
        // splash wrapper
        var wrapper = document.createElement('div');
        wrapper.id = 'application-splash-wrapper';
        document.body.appendChild(wrapper);

        // splash
        var splash = document.createElement('div');
        splash.id = 'application-splash';
        wrapper.appendChild(splash);
        splash.style.display = 'none';

        var logo = document.createElement('img');
        logo.src = 'https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/images/play_text_252_white.png';
        splash.appendChild(logo);
        logo.onload = function () {
            splash.style.display = 'block';
        };

        var container = document.createElement('div');
        container.id = 'progress-bar-container';
        splash.appendChild(container);

        var bar = document.createElement('div');
        bar.id = 'progress-bar';
        container.appendChild(bar);

    };

    var hideSplash = function () {
        var splash = document.getElementById('application-splash-wrapper');
        splash.parentElement.removeChild(splash);
    };

    var setProgress = function (value) {
        var bar = document.getElementById('progress-bar');
        if(bar) {
            value = Math.min(1, Math.max(0, value));
            bar.style.width = value * 100 + '%';
        }
    };

    var createCss = function () {
        var css = [
            'body {',
            '    background-color: #283538;',
            '}',

            '#application-splash-wrapper {',
            '    position: absolute;',
            '    top: 0;',
            '    left: 0;',
            '    height: 100%;',
            '    width: 100%;',
            '    background-color: #283538;',
            '}',

            '#application-splash {',
            '    position: absolute;',
            '    top: calc(50% - 28px);',
            '    width: 264px;',
            '    left: calc(50% - 132px);',
            '}',

            '#application-splash img {',
            '    width: 100%;',
            '}',

            '#progress-bar-container {',
            '    margin: 20px auto 0 auto;',
            '    height: 2px;',
            '    width: 100%;',
            '    background-color: #1d292c;',
            '}',

            '#progress-bar {',
            '    width: 0%;',
            '    height: 100%;',
            '    background-color: #f60;',
            '}',
            '@media (max-width: 480px) {',
            '    #application-splash {',
            '        width: 170px;',
            '        left: calc(50% - 85px);',
            '    }',
            '}'
        ].join("\n");

        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
          style.styleSheet.cssText = css;
        } else {
          style.appendChild(document.createTextNode(css));
        }

        document.head.appendChild(style);
    };


    createCss();

    showSplash();
        
    app.on('preload:end', function () {
        app.off('preload:progress');
    });
    app.on('preload:progress', setProgress);
    app.on('start', hideSplash);
});

#7

TBH, I think there is a different workflow needed for the FB instant games. @vaios, is it possible to use the FB Instant Games SDK from inside the PlayCanvas editor or is it a separate workflow that has to be done post build?


#8

I think testing in the editor will not be possible for sure, so downloading the build using the playcanvas rest API, will be the best thing to do.

the loading screen script did not work, so i do think there might need to be more happening in the post build script, not sure where to begin, shell scripts or otherwise, but have to download using REST, unzip, add the API script tag in the index html, as well as adding a fbapp-config.json in the root, before zipping back up and posting to fb instant web hosting.

automating this is my current challenge. Doing less in the post-build script is proving problematic, so may have to do it all there.


#9

I found the Phaser tutorial on creating Facebook Instant games and was actually wondering if it was possible to replace the start and preload or even just preload script to use the Facebook loading bar instead. I might give the latter a try when I get some time https://phaser.io/tutorials/getting-started-facebook-instant-games


#10

I’m starting to look into FB integration myself, so am keen to find out more and help out where I can.

I wonder is it possible to upload a version of a launcher to the FB developer area, that would then launch the published game on the PlayCanvas site, and give access to the FBInstant object. In this way, you could still do quick tests and changes in the editor, publish, and then re-launch from FB to see the changes.