Trying to integrate PlayFab Facebook instant game services

Hi,

I’m trying to integrate PlayFab Facebook instant game services into my Instant game but cant seem to get it to work! I’ve edited the Index.html file of my exported game to include the PlayFab SDK and what i think is the necessary code for it to work but nothing happens. My game runs fine but it’s not connecting to PlayFab. Any help and advice would be appreciated.

My edited Index.html file is posted below.

Thanks
Ryan

<!DOCTYPE html>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="theme-color" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style>
	body {
		margin: 0;
		padding: 0;
		background-color: #000000;
        overflow: hidden;
	}
    #canvasArea {
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    @font-face{ font-family : "gdjs_font_Kenney Future Narrow.ttf"; src : url('Kenney Future Narrow.ttf') format('truetype'); }
@font-face{ font-family : "gdjs_font_Knockout-69.otf"; src : url('Knockout-69.otf') format('truetype'); }

</style>

<!-- Facebook Instant Games SDK (see https://developers.facebook.com/docs/games/instant-games/getting-started/quickstart) -->
<script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
<!-- Load PlayFab SDK -->    
<script src="https://download.playfab.com/PlayFabClientApi.js"></script>
<!-- Libs and GDJS core files : -->
	<script src="libs\jshashtable.js"></script>
<script src="gd.js"></script>
<script src="gd-splash-image.js"></script>
<script src="libs\hshg.js"></script>
<script src="libs\rbush.js"></script>
<script src="inputmanager.js"></script>
<script src="timemanager.js"></script>
<script src="runtimeobject.js"></script>
<script src="profiler.js"></script>
<script src="runtimescene.js"></script>
<script src="scenestack.js"></script>
<script src="polygon.js"></script>
<script src="force.js"></script>
<script src="layer.js"></script>
<script src="timer.js"></script>
<script src="runtimegame.js"></script>
<script src="variable.js"></script>
<script src="variablescontainer.js"></script>
<script src="oncetriggers.js"></script>
<script src="runtimebehavior.js"></script>
<script src="spriteruntimeobject.js"></script>
<script src="events-tools\commontools.js"></script>
<script src="events-tools\runtimescenetools.js"></script>
<script src="events-tools\inputtools.js"></script>
<script src="events-tools\objecttools.js"></script>
<script src="events-tools\cameratools.js"></script>
<script src="events-tools\soundtools.js"></script>
<script src="events-tools\storagetools.js"></script>
<script src="events-tools\stringtools.js"></script>
<script src="events-tools\windowtools.js"></script>
<script src="events-tools\networktools.js"></script>
<script src="pixi-renderers\pixi.js"></script>
<script src="pixi-renderers\pixi-filters-tools.js"></script>
<script src="pixi-renderers\runtimegame-pixi-renderer.js"></script>
<script src="pixi-renderers\runtimescene-pixi-renderer.js"></script>
<script src="pixi-renderers\layer-pixi-renderer.js"></script>
<script src="pixi-renderers\pixi-image-manager.js"></script>
<script src="pixi-renderers\spriteruntimeobject-pixi-renderer.js"></script>
<script src="pixi-renderers\loadingscreen-pixi-renderer.js"></script>
<script src="howler-sound-manager\howler.min.js"></script>
<script src="howler-sound-manager\howler-sound-manager.js"></script>
<script src="fontfaceobserver-font-manager\fontfaceobserver.js"></script>
<script src="fontfaceobserver-font-manager\fontfaceobserver-font-manager.js"></script>
<script src="Extensions\FacebookInstantGames\facebookinstantgamestools.js"></script>
<script src="Extensions\TextObject\textruntimeobject-pixi-renderer.js"></script>
<script src="Extensions\TextObject\textruntimeobject.js"></script>
<script src="code0.js"></script>
<script src="Extensions\DestroyOutsideBehavior\destroyoutsideruntimebehavior.js"></script>
<script src="Extensions\SystemInfo\systeminfotools.js"></script>
<script src="code1.js"></script>
<script src="data.js"></script>
<script>

//(function() 
//{
    //Initialization
    gdjs.registerObjects();
    gdjs.registerBehaviors();
    gdjs.registerGlobalCallbacks();

    var game = new gdjs.RuntimeGame(gdjs.projectData, {});

    //Create a renderer
    var canvasArea = document.getElementById("canvasArea");
    game.getRenderer().createStandardCanvas(canvasArea);

    //Bind keyboards/mouse/touch events
    game.getRenderer().bindStandardEvents(game.getInputManager(), window, document);
	 
	PlayFab.settings.TitleId = "my_Title_Id";
   	PlayFab.settings.titleId = "my_Title_Id";     
     FBInstant.initializeAsync()
    .then(function() {        
        //Load all assets and start the game
		game.loadAllAssets(function() 
		{
            FBInstant.startGameAsync()
			.then(function() 
			{
				var playerId = FBInstant.player.getID();

				// get the Player Signature for the current player

				FBInstant.player.getSignedPlayerInfoAsync(playerId).then(function (result) 
				{
                            var playerSignature = result.getSignature();
                            
							loginWithPlayfab(playerSignature);
							
                });
                game.startGameLoop();
            });
		}, function(percent) 
		{
            FBInstant.setLoadingProgress(percent);
        });
	}); 
	
	 function loginWithPlayfab(playerSignature) 
	{
		
		PlayFabClientSDK.LoginWithFacebookInstantGamesId({
			FacebookInstantGamesSignature: playerSignature,
			TitleId: "my_Title_Id",
			CreateAccount: true
			}, onPlayFabLoginResponse);            
	} 

	function onPlayFabLoginResponse(result) 
	{
		
		var playerName = FBInstant.player.getName();
		          
		PlayFabClientSDK.UpdateUserTitleDisplayName({
			DisplayName: playerName
		}, onPlayFabResponse);

		var playerAvatar = FBInstant.player.getPhoto();
		
		PlayFabClientSDK.UpdateAvatarUrl({
			ImageUrl: playerAvatar
		}, onPlayFabResponse);
		

	}

	// Handles response from playfab.
	function onPlayFabResponse(response, error) 
	{            
		if (response) 
		{               
			//logLine("Response: " + JSON.stringify(response));                
		}
		if (error)
		{
			//logLine("Error: " + JSON.stringify(error));
		}
	}

	

</script>

Figured it out! The code works fine I was using my Playfab title name instead of the titleId found in the settings api! My bad.

Thanks

1 Like

Thank you for asking the question and taking the time to put up your solution. I’m going to check out PlayFab. It may be just what I need.
Cheers

No Problem. I’ve update the index file code in the second post to work with the latest build of Gdevelop.

2 Likes