Game Center Tutorial for iOS: How To Make A Simple Multiplayer Game: Part 1/2

Create a multiplayer racing game with Cocos2D and Game Center!

Create a multiplayer racing game with Cocos2D and Game Center!

I’m experimenting with a new way of writing tutorials – by taking suggestions by you guys!

In the sidebar to the right (scroll down a bit), you’ll find a new section where you can vote for which tutorial comes next.

In the first vote, a bunch of you guys said you wanted a tutorial about making a simple multiplayer game (88 of you to be exact!) – so here you go! :]

In this 2-part Game Center tutorial series, you’ll make a simple 2-player networked game with Cocos2D and Game Center matchmaking.

The game you’ll be working with is very simple. It’s a racing game with a dog vs. a kid – tap as fast as you can to win!

This Game Center tutorial assumes you are already familiar with the basics of using Cocos2D. If you are new to Cocos2D, you might want to check out some of the other Cocos2D tutorials on this site first.

Note: To fully get through this tutorial series, you must be a registered member of the iOS developer program so you can enable your app to use Game Center. Also, you will need at least one physical device (so that you can run one copy on the simulator and one on your device). Finally, you will need at least two different Game Center accounts for testing (don’t worry, you can create more than one for free, you just need another email address).

Ready? On your mark, get set, GO!

Getting Started

This Game Center tutorial show you how to add matchmaking and multiplayer capabilities into a simple game.

Since making the game logic itself isn’t the point of this tutorial, I’ve prepared some starter code for you that has the game without any network code.

Download the code and run the project, and you should see a screen like this:

The game is very simple and well commented – go ahead and browse through the code and make sure you understand everything.

If you guys are interested, I could do a separate tutorial sometime on how to make this game from scratch. If you would like this, please suggest this tutorial in the forums!

Enabling Game Center: Overview

At this point, you have a simple playable game, except it’s pretty boring since you’re playing all by yourself!

It would be a lot more fun to use Game Center, so you can invite friends to play with you, or use matchmaking to play with random people online.

But before you can start writing any Game Center code, you need to do two things:

1. Create and set an App ID
2. Register your app in iTunes Connect

Let’s go through each of these in turn.

Create and Set an App ID

The first step is to create and set an App ID. To do this, log onto the iOS Dev Center, and from there log onto the iOS Provisioning Portal.

From there, select the App IDs tab, and create a new App ID for your app, similar to the following (except you’ll be choosing different values):

The most important part is the Bundle Identifier – you need to set this to a unique string (so it can’t be the same as the one I used!) It’s usually good practice to use a domain name you control followed by a unique string to avoid name collisions.

Once you’re done, click Submit. Then open the Cat Race Xcode project, select Resources\Info.plist, and set your Bundle identifier to whatever you entered in the iOS Provisioning portal, as shown below (except you’ll be entering a different value):

One last thing. Xcode sometimes gets confused when you change your bundle identifier mid-project, so to make sure everything’s dandy take the following steps:

• Delete any copies of Cat Race currently on your simulator or device
• Quit your simulator if it’s running
• Do a clean build with Project\Clean

Congrats – now you have an App ID for your app, and your app is set up to use it! Next you can register your app with iTunes Connect and enable Game Center.

Register your app in iTunes Connect

The next step is to log on to iTunes Connect and create a new entry for your app.

Once you’re logged onto iTunes Connect, select Manage Your Applications, and then click the blue “Add New App” button in the upper left.

On the first screen, enter Cat Race for the App Name, CR1 for SKU Number, and select the bundle ID you created earlier, similar to the screenshot below:

Click continue, and follow the prompts to set up some basic information about your app.

Don’t worry about the exact values to put in, since it doesn’t really matter and you can change any of this later – you just need to put something (including a dummy icon and screenshot) in to make iTunes Connect happy.

When you’re done, click Save, and if all works well you should be in the “Prepare for Upload” stage and will see a screen like this:

Click the blue “Manage Game Center” button to the upper right, click the big blue “Enable” button, and click “Done”. That’s it – Game Center is enabled for your app, and you’re ready to write some code!

By the way – inside the “Manage Game Center” section, you might have noticed some options to set up Leaderboards or Achievments.

We won’t be covering Leaderboards or Achievements in this tutorial, but if you are interested Rod and I cover this in our upcoming Cocos2D book.

Authenticate the Local Player: Strategy

When your game starts up, the first thing you need to do is authenticate the local player.

You can think of this as “logging the player into Game Center.” If he’s already logged in, it will say “Welcome back!” Otherwise, it will ask for the player’s username and password.

Authenticating the local user is easy – you just call authenticateWithCompletionHandler. You can optionally pass in a block of code that will be called once the user is authenticated.

But there’s a trick. There’s another way for the user to log in (or log out!). He can be using your app, switch to the Game Center app, log or out from there, and switch back to your app.

So your app needs to know whenever the authentication status changes. You can find out about these by registering for an “authentication changed” notification.

So, our strategy to authenticate the player will be as follows:

• Create a singleton object to keep all the Game Center code in one spot.
• When the singleton object starts up, it will register for the “authentication changed” notification.
• The game will call a method on the singleton object to authenticate the user.
• Whenever the user is authentiated (or logs out), the “authentication changed” callback will be called.
• The callback will keep track of whether the user is currently authenticated, for use later.

Now that you’re armed with this plan, let’s try it out!