Sign In Register

How can we help you today?

Start a new topic
Answered

Leaderboard with profile pictures

Hello again to everyone,


I want to show the leaderboard with the users facebook profile picture on the list, how would you recommend to do it? Is there any way to query through the API for the profile picture or should I query the externalIds collection directly?


Thank you very much,

Jorge Aldao


Best Answer

Hi Ayyappa,


First thing you'd do is get an upload URL using GetUploadUrlRequest


{
 "@class": ".GetUploadUrlRequest"
}


which should return something similar to this GetUploadUrlResponse:


 

{
 "@class": ".GetUploadUrlResponse",
 "scriptData": null,
 "url": "https://gsbeta-preview5.gamesparks.net/upload/285339B8e08R/c76a06d2-5406-436f-95c4-0a489967d7bb/0165cd2229244ebabefb61f2ba3aff02"
}

 

You then use that URL to upload your file using POST.


One your file is uploaded you will receive an UploadCompleteMessage looking something like:

 

{
 "@class": ".UploadCompleteMessage",
 "messageId": "54b78ccfe4b0ebe653e681b7",
 "notification": true,
 "summary": "Your upload is complete",
 "playerId": "54ae55e1e4b05c5f261e2e31",
 "uploadData": {
  "fileSize": 55812,
  "playerId": "54ae55e1e4b05c5f261e2e31",
  "uploadId": "0165cd2229244ebabefb61f2ba3aff02",
  "origFileName": "1.PNG",
  "fileName": "0165cd2229244ebabefb61f2ba3aff02-1.PNG"
 },
 "uploadId": "0165cd2229244ebabefb61f2ba3aff02"
}

 

The key bit of information here is the uploadId, for a user's profile picture you could store some data on a user's player scriptData which contains this uploadId, something like:


  

Spark.getPlayer().setScriptData("profilePicture", 0165cd2229244ebabefb61f2ba3aff02);

  

whenever the players data is returned you will receive their information with the uploadId stored in scriptData like:


  

{
 "@class": ".AccountDetailsResponse",
 "currency1": 0,
 "currency2": 0,
 "currency3": 0,
 "currency4": 0,
 "currency5": 0,
 "currency6": 0,
 "displayName": "Shane",
 "location": {
  "latitide": 53.202805,
  "longditute": -6.098297,
  "city": "Bray",
  "country": "IE"
 },
 "scriptData": {
  "profilePic": "0165cd2229244ebabefb61f2ba3aff02"
 },
 "userId": "54ae55e1e4b05c5f261e2e31"
}

  

Then every time the log on you can use that uploadId in combination with a GetUploadedRequest like so:


  

{
 "@class": ".GetUploadedRequest",
 "uploadId": "0165cd2229244ebabefb61f2ba3aff02"
}

 

and it will return the URL to acquire the file in a GetUploadedResponse:

 

{
 "@class": ".GetUploadedResponse",
 "scriptData": null,
 "size": 55812,
 "url": "https://gamesparksbetabinaries.blob.core.windows.net/upload-285339/0165cd2229244ebabefb61f2ba3aff02-1.PNG?sp=r&sr=b&sv=2012-02-12&se=2015-01-15T10%3A05%3A45Z&st=2015-01-15T09%3A50%3A45Z&sig=xpcmSous09bOICf%2s%2BFD4aKU1YfqVdkGMSouukvlqNH0%3D"
}

 


Of course this method can be used for the profile picture or any other files.


If you are using Unity check out this topic where we take a screenshot of our game and upload it to GameSparks: https://support.gamesparks.net/discussions/topics/1000050374


Shane


Hi Jorge


To get the FB profile picture you need the facebook id of the player, I'm assuming you already have this, so an approach we have seen taken is to add this value as an additional unsorted attribute on the score event. You can then add it to your leaderboard as an unsorted value.


When you post your score, you also post the facebook id, this mean when you get the leaderboard data the results already have the id's you need in and you can construct your image using the http://graph.facebook.com/<facebookId>/picture?type=square


Hope thats useful!


Gabriel



1 person likes this

Great solution! I think I'd never take that approach if you didn't tell me, thank you!

Hi what to do if we need to upload pictures and retrieve them back if other than facebook?

Answer

Hi Ayyappa,


First thing you'd do is get an upload URL using GetUploadUrlRequest


{
 "@class": ".GetUploadUrlRequest"
}


which should return something similar to this GetUploadUrlResponse:


 

{
 "@class": ".GetUploadUrlResponse",
 "scriptData": null,
 "url": "https://gsbeta-preview5.gamesparks.net/upload/285339B8e08R/c76a06d2-5406-436f-95c4-0a489967d7bb/0165cd2229244ebabefb61f2ba3aff02"
}

 

You then use that URL to upload your file using POST.


One your file is uploaded you will receive an UploadCompleteMessage looking something like:

 

{
 "@class": ".UploadCompleteMessage",
 "messageId": "54b78ccfe4b0ebe653e681b7",
 "notification": true,
 "summary": "Your upload is complete",
 "playerId": "54ae55e1e4b05c5f261e2e31",
 "uploadData": {
  "fileSize": 55812,
  "playerId": "54ae55e1e4b05c5f261e2e31",
  "uploadId": "0165cd2229244ebabefb61f2ba3aff02",
  "origFileName": "1.PNG",
  "fileName": "0165cd2229244ebabefb61f2ba3aff02-1.PNG"
 },
 "uploadId": "0165cd2229244ebabefb61f2ba3aff02"
}

 

The key bit of information here is the uploadId, for a user's profile picture you could store some data on a user's player scriptData which contains this uploadId, something like:


  

Spark.getPlayer().setScriptData("profilePicture", 0165cd2229244ebabefb61f2ba3aff02);

  

whenever the players data is returned you will receive their information with the uploadId stored in scriptData like:


  

{
 "@class": ".AccountDetailsResponse",
 "currency1": 0,
 "currency2": 0,
 "currency3": 0,
 "currency4": 0,
 "currency5": 0,
 "currency6": 0,
 "displayName": "Shane",
 "location": {
  "latitide": 53.202805,
  "longditute": -6.098297,
  "city": "Bray",
  "country": "IE"
 },
 "scriptData": {
  "profilePic": "0165cd2229244ebabefb61f2ba3aff02"
 },
 "userId": "54ae55e1e4b05c5f261e2e31"
}

  

Then every time the log on you can use that uploadId in combination with a GetUploadedRequest like so:


  

{
 "@class": ".GetUploadedRequest",
 "uploadId": "0165cd2229244ebabefb61f2ba3aff02"
}

 

and it will return the URL to acquire the file in a GetUploadedResponse:

 

{
 "@class": ".GetUploadedResponse",
 "scriptData": null,
 "size": 55812,
 "url": "https://gamesparksbetabinaries.blob.core.windows.net/upload-285339/0165cd2229244ebabefb61f2ba3aff02-1.PNG?sp=r&sr=b&sv=2012-02-12&se=2015-01-15T10%3A05%3A45Z&st=2015-01-15T09%3A50%3A45Z&sig=xpcmSous09bOICf%2s%2BFD4aKU1YfqVdkGMSouukvlqNH0%3D"
}

 


Of course this method can be used for the profile picture or any other files.


If you are using Unity check out this topic where we take a screenshot of our game and upload it to GameSparks: https://support.gamesparks.net/discussions/topics/1000050374


Shane

If I'm understanding this correctly, populating a leaderboard of 50 players will now take 51 API calls.  Since it's 1 + numEntries API calls.  1 for the retrieval of the leaderboard data that contains all the player details, then 1 call to request the picture URL for each player.


Is there no permalink for uploadables?  This seems like a lot of overhead for something is normally free (server processing wise)


3 people like this

Seconding Strider´s comment about permalinks.


My experience so far with the recommended procedure is that it's purpose-defeatingly slow and cumbersome.


Please create a better system for storing and retrieving images!


1 person likes this

Yes I too agree with this. I need to load the profile pic of the players in challenges and friends list, so downloading them everytime in all different screens, is not so best practice. Can we get the permanent URL from GetUploadedRequest api, instead of time sensitive URL. 


Any updates on this ? Facing similar problem here too

Login to post a comment