Prologue
Updated to support Modules. The 'v2' sample files have been updated to support Modules, as 'Classic' mode has been removed.
Introduction
The following is a tutorial and template for implementing the PlayFab cloud storage (instead of LocalStorage), and a Leaderboard. This is in no way meant to compete with the plugin offered for sale elsewhere for PlayFab connectivity. I just want to present a quick way to get your feet wet with PlayFab, which has dozens of API calls. I'll be taking advantage of the 'async' mechanism recently supported by C3's new Function support. Part 1 will use the simplest login mechanism PlayFab supports, designed just to get things rolling quickly - no prior user account is required. We will implement a login, logout, submit high score, submit and retrieve cloud/remote data, and load up the leaderboard.
Part 2 will add registering an account, and an email and a username login.
The tutorial shows how to add these features to the default Ghost Shooter Tutorial project.
Make a PlayFab account and setup game
Making a PlayFab account is simple. Head on over to https://playfab.com/ and sign up. Fill in your studio details, and you'll end up with a default game, and ID. In this case, the default game is "My Game", and the ID is 11C71.
Click on "My Game", and you'll see screen similar to this. Click on Leaderboards to get to the leaderboard screen. Click "New Leaderboard", and you'll end up here:
I've named the Leaderboard "HighScore", left the Reset frequency alone, and set the Aggregation method to Maximum, so that the scores rank highest to lowest. Click Save.
Now from the little cog next to the title name, select Title settings, and click the API Features tab. Click the "Allow the client to post player statistics". This sets up everything for the game to submit scores to the leaderboard, and retrieve the leaderboard itself, for display.
Copy the template code to your own game
Layout
Before we get started, open the Layout 1 and add the Browser object. I have a lot of logging for debugging purposes, so we need this added first.
Now add an Array, and name it ArrayLeaderboard. This is a helper for the leaderboard data.
Since we are going to be copying events from one project to another, the names must match exactly.
Add LocalStorage.
Add a Dictionary and name it DictionaryPlayFab. Add another Dictionary and name it DictionaryData.
Scripts
Since I have to provide the C3 event files, they are already embedded in the sample project, but for the sake the tutorial, first open the sample project in one browser tab, and in a second browser tab, run C3 again and open the Ghost Shooter tutorial.
In the Project tab, right-click Scripts and add a sub-folder. Name it PlayFabSDK. Right-click this folder and Import scripts. Find the PlayFabClientApi.js file and import it. From the Scripts folder itself, Import scripts, and import the PlayFab.js file.
The PlayFabClientApi.js is a copy from the official PlayFab site, and has not been touched. The PlayFab.js a script file I wrote to interface between C3 and the official JavaScript API. This allows us to update the official file as needed, without affecting the C3 interface, and vice versa, the C3 version can be added to or changed, as needed, without affecting the official version. This makes future maintenance fairly bullet proof. (And I put the official file in it's own folder to really emphasize that it is separate from the C3 scripts).
Event sheets
In the Project tab, add a new Event sheet and name it ePlayFab. ePlayFab will be yet another interface between the C3 event sheets and the PlayFab scripts. This again just makes the interface that much easier, as all PlayFab calls are just normal C3 function calls, rather than having to embed script code throughout the C3 code.
Open the ePlayFab event sheet in the sample project, select all, and Copy. Now go to the ePlayFab event sheet in your new Ghost Shooter project, and paste. If all went well, all the code should be there.
Note that at the top of the file is a kPlayFabTitleID global constant variable - you must replace this value with your own game ID! I'm leaving my ID there so that you can actually run the template itself to try it out, but if the tutorial is abused, I may have to shutdown the game, as it will affect my account, which I have made specifically for the tutorial, but still don't want to see it abused.
At this point, technically you can start using the interface in the ePlayFab event sheet, but for the sake of the tutorial, we need to copy the Login layout and eLogin code as well.
Login sample
For your own game, you wouldn't do this, but to make the tutorial work, we need to copy everything for the Login mechanism.
In the sample project again, open the Login layout, select all, and Copy. In your Ghost Shooter project, add a new Layout and name it Login. Paste. Drag immediately so that the background is aligned with the top-left corner. It doesn't have to be precise, but other code does move things around to a specific position.
Rename the new event sheet to eLogin. Now copy all events from the eLogin event sheet.
To finish all of the connections, change the Project's First layout to Login.
Plumbing the game
At this point you can preview the Login layout and the CustomID login should pop up. The default name is Getting Started Guide, which comes from the PlayFab tutorial itself. You can login and see it succeed (hopefully). If you haven't changed the TitleID yet, you should see my demo leaderboard also, otherwise, all entries are 0. You can press Play, but since we haven't told the game about PlayFab yet, it will just run as the regular Ghost Shooter demo.
At this point we need to add a small amount of code to the original Ghost Shooter game to link it to the PlayFab code. Go to the Event sheet 1 layout and go to event 5. Add an action for DictionaryData, with key "MonstersKilled", and value int(DictionaryData.Get("MonstersKilled")) + 1
This is just adding some extra statistics that we will save to the cloud, to read back later.
Now, in event 9, we add the final score to DictionaryData, call SubmitHighScoreToPlayFab, passing in the Score, call SubmitUserDataToPLayFab, passing in our key store in a global constant (RemoteStorage), with the data of the DictionaryData as a JSON string. (You can actually view this JSON string nicely formatted in PlayFab as they support direct reading of JSON data)! Now, because all PlayFab commands are asynchronous, we Wait for these two calls to finish.
Finally, we change the Go to Layout action in event 10 to Go to Login, so that we restart on the login screen again (mainly to see that the leaderboard has been updated with any new high scores).
eLogin explained
On start of layout sets up the GUI elements, and then near the end checks if we have a PlayFabID yet. If so, we've already logged in and we are restarting the layout. In this case, we alter the GUI and the call RetrieveUserData to get back any previous statistics/data we saved from the last game play, and then call DisplayLeaderboard to get the leaderboard data, fill in an array with the data, and then parse the data for display.
If we haven't logged in yet, we just move the login GUI elements on screen.
When the Login button is pressed, we cleanup the user CustomID and call LoginWithCustomIDToPlayFab, passing in the CustomID, and WAIT for the response. If there is no error, we cache the PlayFabID and CustomID, and enable our Play button.
If there is an error, we display the error.
When the Logout button is pressed, we clear our cached values, and restart the layout.
When the Play button is pressed, we run the Ghost Shooter layout.
Conclusion
If you go back to the PlayFab site, and look at your game data, you can see each Player's data, and look at the Leaderboard. There's lots of data there to see now.
Part 2 adds to what's been done here, with both email and user logins, and also store the login details in local storage, so that the user doesn't have to always log in each time, unless they logout, or the local storage is lost.