Game Center and Leaderboards for Your iOS App

Introduction

Game Center is Apple's social gaming network. It enables users to track their high scores on a leaderboard, compare achievements, invite friends to play a game, and to start a multiplayer game through auto-matching. So if you have built an iOS game and want users to be able to post their scores to a Game Center leaderboard, this is the right tutorial for you!

For more info about apps and the Game Center, visit its Apple Developer page.

The Xcode Project

For the sake of this tutorial, I've created a basic Xcode project that you can download from GitHub. I'll explain all the necessary steps to create a leaderboard on iTunes Connect and the needed code to submit a score to it, along with a button to open the leaderboard from within the app. 

Here's how the app's Storyboard looks:

Demo Xcode project

This project has a UILabel with red text I've called scoreLabel and a couple of UIButtons. The red one will add 10 points to the score and submit it to a Game Center leaderboard, and the blue one will open the GKGameCenterViewController and show that leaderboard.

The very first thing to do is to enable Game Center in the Capabilities tab in Xcode.

Enable Game Center in the Capabilities tab

Then you must import GameKit at the top of your ViewController.swift file and add the GKGameCenterControllerDelegate protocol to the class declaration.

Let's add a few variables now. You can paste this code right into your ViewController class:

The first variable indicates if you have Game Center enabled, and the second one will be used later by the local player authentication code to enable GameKit to identify the default leaderboard.

score will initially be 0, of course.

LEADERBOARD_ID is a String  that you must set in order to make Game Center submit your score to the server through the default leaderboard identifier. Choose the name you want, but keep in mind that it has to have a web-reversed syntax. That's why I've identified this leaderboard as com.score.mygamename, where mygamename should be replaced by your app's name in lowercase characters, with no spaces.

Before enabling Game Center in the iTunes Connect page of your app, let's finish the basic code. Add this line into viewDidLoad():

And add the following function right below viewDidLoad():

In case a user has not logged into Game Center from Settings on their device, the method above will show the Game Center login screen as soon as it connects to the GC server. Once the player is logged in, the app gets the default leaderboard id. 

In the next method we'll make the app grab the LEADERBOARD_ID string you've previously created and pass it as the default leaderboard id of the Game Center server.

The code above also adds 10 points to the current score, so every time you click the Add Score and Submit To GC button, you'll see the red score label changing, and the app will submit that updated score to your GC leaderboard.

You need now to add a GameKit delegate method that will dismiss the GC Controller.

There's only one method left to code before creating your leaderboard on iTunes Connect, which is the action for the button that will open the Game Center ViewController.

As you can see above, this code instantiates the GC controller, assigns its delegate to that controller, sets the controller's view state to show leaderboards, and passes along your LEADERBOARD_ID before presenting the controller. 

Now we're done coding, but you can't run the app yet. If you do, you'll get an error from Xcode since you haven't created your own leaderboard in the iTunes Connect page of your app.

Set Up Game Center on iTunes Connect

You should already have created an iOS app in iTunes Connect with your own Bundle Identifier. Now enter your App from your iTunes Connect dashboard, and click Features and then Game Center.

Then click the + icon next to Leaderboards.

App Features page on iTunes Connect

Choose Single Leaderboard on the next screen.

Add a leaderboard

Here you have to type the name you want to give your leaderboard. In the screenshot below, I've used My Leaderboard Name just as an example. You may call yours Best Score Leaderboard or anything you wish.

In the Leaderboard ID field, paste the string of the LEADERBOARD_ID we've previously created in the Xcode project.

Since the score is a number, select Integer in the Score Format Type field. You may choose the option you want for Submission Type and Sort Order. Leave Score Range (Optional) blank.

Lastly, click the Add Language button.

Set leaderboards details

In the popup window, you must select the language of your leaderboard. The default is always English. Type the English name of your leaderboard again, and select a Score Format (I chose commas to separate groups of digits). 

The Score Format Suffix fields are optional; you can leave both fields blank or type the desired suffix. For instance, if your game has score points, you can type "point" and "points" for plural, so the Game Center controller will add that suffix to the end of scores displayed on your leaderboard, like "1 point" or "100 points".

You can also add an icon. The image must be a .jpeg, .jpg, or .png file that is 512x512 or 1024x1024 pixels, at least 72 DPI, and in the RGB color space without a transparent background. Click Choose File to upload your image.

Lastly click Save, and you're done. You can repeat the steps above to add more languages—just make sure to type the leaderboard names according to the selected language.

Add a leaderboards language

Once you've added a window, you can check over your leaderboard's details. If everything is fine, click Save, and you'll be redirected to the Features page, with your brand new leaderboard. 

Language added for a new leaderboard
Features page

Now it's time to enable Game Center in the App Store section of your app. Click App Store and Prepare for Submission

App Store section

Scroll down until you find Game Center with a switch next to it. Enable this, and it will turn green. Then click on the + sign next to Leaderboards, select your leaderboard from the list, and click Done.

Click Save in the top-right corner of the window, and you'll be all done setting up Game Center on iTunes Connect.

Save your app with Game Centers leaderboard

You can now go back to your Xcode project and run the app on a real device or even on the iOS Simulator. If you're not already logged into Game Center, the Sign In controller will show up. It looks like this:

Game Center Sing In screen

Sign in with your credentials, and you can start testing the app!

In our addScoreAndSubmitToGC() method, we added the following print() call:

So if you tap the red button, the scoreLabel will display "10", and the Xcode console will print Best Score submitted to your Leaderboard!

Score updated and submitted to your leaderboard

Tap the red button three more times, and then tap the blue one to open your leaderboard, and check that the submitted score is 40. You should see something like this:

GC controller for leaderboards

Conclusion

If you want to see Game Center in action with a fully functional game app, you might like to check out my CodeCanyon game template Four Dots. It's a template for a minimal endless game that saves best scores and submits them to the Game Center.

Four Dots iOS app template on CodeCanyon

Game templates like this are a great way to get a head start on your next game. CodeCanyon has hundreds of iOS game templates that you can use to jump-start development—letting you build the next killer game that much faster!

Thanks for reading, and I'll see you next time! Please check out some of our other tutorials on Swift and iOS app development.

Tags:

Comments

Related Articles