Now that we've learnt all about how to create, get and save high scores for Facebook Instant Games, let's incorporate this knowledge into a working highscore table.

We're going to re-create the sort of highscore table you may have seen in an old arcade or console game. Here's a screen shot of what the end result looks like:

With this, you can enter your name using either the mouse or touch events, by pressing on the letters, or on a desktop you can type it in using the keyboard. If we already know the player's name from their Facebook profile, why would we want to let them type something in? The reason is just because it'd be fun and keep the retro aesthetic strong in our title. You may wish to skip this step of the tutorial, and that's perfectly fine, but if you'd like to keep it classic, please read on.

Retro Highscore Tutorial

There are two parts to creating this. First, we need to create the highscore table itself, and secondly, we need to send the scores to Facebook.

To keep things tidy we created a seperate multi-part tutorial on Creating a Retro Highscore Table. This includes the source code and assets you need, plus a guide on how it was built.

Please, read through this tutorial first, and then come back here when you're done.

Done that? Great! Let's integrate it to our Instant Game.

Thankfully, this is pretty easy. In the Highscore Class there is a function called submitName. Here is where we can hook in the call to the API. Replace the current contents from the previous tutorial with the following:

submitName (name)
{
    this.scene.stop('InputPanel');

    scoreData = {
        tableName: name
    };

    this.leaderboard.setScore(this.score, scoreData);
}

For this to work, this.leaderboard must be an instance of a Leaderboard in your game, and this.score must hold the score value as an integer.

When the submitName event is invoked from the Input Panel class, it passes over their choice of name. In the function above this is packaged into an object and sent as the Score Data object to the setScore call.

This means that when we retrieve the scores from the leaderboard, rather than display the player's name, we'll use the tableName property of their Score Data bundle to display that instead. It's up to you how you handle this. Once nice thing about only allowing 3 letter names, like in this tutorial, is you don't have to worry about them being offensive on your leaderboard! But, the more characters you accept for a name, the more this may become an issue.