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