How do I use JavaScript functions and variables inside events ?

  • Hello, I'm trying to include the Facebook Instant Games SDK inside a C2 project.

    I know basic Html/JavaScript and managed to get it work by editing the index.html file using the following code:

    <!-- in head -->
    <script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script> 
    
    <!-- in body -->
    <script>
    FBInstant.initializeAsync().then(function() {
    	FBInstant.setLoadingProgress(100);
    	FBInstant.startGameAsync().then(function() {
    		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();
    
    })
    </script>
    

    How can I call these functions and variables as "playerName" using events ?

    I've noticed that examples use the "window" object when calling functions

    I've tried with:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • If you use the browser object you can load the js library with

    $.getScript(url, callback)

    Callback is called when the library is loaded.

    I like to have it call a construct function when it’s done. So you’d place this instead of callback:

    function(){c2_callFunction('c2functionname')}

    So then when that function was called you can run basically the js you have in the script tag. Instead of the vars just call a different c2 function.

    In that c2 function you now know that everything should be loaded and you can access the stuff the vars in your events did.

    Set text to browser.execjs("FBInstant.player.getName()"

  • TGeorgeMihai If you get it working, could you please write a small tutorial and post the source files? (here or in the tutorials section)

    There is no good plugin for FB Instant Games and your experience can help many people.

  • R0J0hound Thank you, I just realized (after 5 years) that Construct has jQuery included. I've seen it included in export folder, but didn't think that I can call functions from Browser.ExecJS .

    So I have:

    System - On start of layout
    	Browser - Execute Javascript "$.getScript( 'https://connect.facebook.net/en_US/fbinstant.6.2.js' , function(){c2_callFunction('apiloaded')} );"
    	Or "$.getScript(" & """https://connect.facebook.net/en_US/fbinstant.6.2.js""" & " , function(){c2_callFunction(" & """apiloaded""" & ")} );"
    (both versions work, It's just how you want to work with the quote marks inside strings. The good part is that JavaScript also accepts single ' )
    
    Function - On function "apiloaded"
    	do stuff here
    

    Also, I've realized why I couldn't get the value from variable "playerName". It was because it was inside a function, not global.

    dop2000 I can try, at least to show how to get the game running. The information about Facebook Instant Games is very little, few tutorials ... etc.

  • Yup, got it to load profile data. Thanks again R0J0hound for explaining the function(){c2_callFunction('c2functionname')}. It really helps

    The runned script after the Api is loaded is:

    "FBInstant.initializeAsync().then(function() {
    	FBInstant.setLoadingProgress(100);
    	// Finished loading. Start the game
    	FBInstant.startGameAsync().then(function() {
    		c2_callFunction('getuserdata');
    	});
    //and after this I can successfully access player's name or photo
    //I still need to understand what is with "contextId" and "contextType". Until now I get "SOLO" (it works as intended)
    });"

    I would like to link somehow FBInstant.setLoadingProgress(progress); to round(loadingprogress * 100).

    Also, not sure if the startGameAsync() should start only after setLoadingProgress() is finished, something like this:

    FBInstant.initializeAsync().then(function() {
    	FBInstant.setLoadingProgress(100).then(function() {
    		// Finished loading. Start the game
    		FBInstant.startGameAsync().then(function() {
    			c2_callFunction('getuserdata');
    		});
    	});
    });
  • Best I can tell you just need initializeAsync to finish before calling any other functions.

    So in the “then” you could call a c2function and enable a group of events there. In that group you’d update the progress and when it’s 100% call startGameAsync. Only caveat to consider is if your game finishes loading before you enable that group. Probably a trigger once condition in the group comparing loading progress to 100 should do it.

    I don’t know if it is it’s own progress bar or what. It doesn’t seem to be a requirement before calling startGameAsync, but its pretty painless to just set progress to 100 before calling that.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)