How to Integrate Game Center into a PhoneGap Build App

PhoneGap isn’t the most popular choice for mobile game development, but with the ever increasing power of JavaScript it’s certainly possible to create games powered by a browser and PhoneGap. If you’ve played a few games on the iOS platform you will have likely run into Game Center by now. Game Center provides a method of maintaining centralised leaderboards and achievements, so players can see all their accomplishments in one place.

This is great news for developers because instead of having to create your own leader boards you can just hook into Apple’s Game Center. A simple leader board can do a lot to boost the replay-ability and longevity of your game as it allows players to not only compete against themselves, but also their friends and the entire world.

Integrating Game Center sounds like something that might be a little bit tricky to do. At first it’s not, it’s actually quite straight forward, and then it’s really hard because you will likely get all sorts of weird errors and “nothings” thrown at you (by “nothings” I mean everything seems like it should work, there’s no errors but just… _nothing _happens). If you can’t tell already, I had quite a rough time getting Game Center to work with PhoneGap Build so I wanted to document exactly how I did it for anyone else who might be trying.

In this tutorial I will show you how to set up Game Center in your PhoneGap Build application and set up a leaderboard. Let’s get into the tutorial, we’ll start out with the easy stuff.

1. Set up your application in iTunes Connect

Before you can use Game Center you will need to be registered for the iOS Developer Program and have an application set up. I’ll walk you through what to do in iTunes Connect now, but you will also need to set up an App ID in the member center – you can read this tutorial for more information on setting up app ids, devices, certificates and provisioning profiles for iOS.

Once you have your app ID created in the member center, you can create a new application by doing the following:

• Log in to iTunes Connect
• Go to My Apps
• Click the ’+’ icon to create a new app
• Fill out your applications details

2. Create a leaderboard

Once your app has been created in iTunes Connect you will also need to create your leaderboard in iTunes Connect. To do that follow these steps:

• Go to the Game Center section of your application in iTunes Connect
• Choose Single Game

Single game will have one set of leader boards and achievements, and Group of Games will share leaderboards and achievements across multiple apps.

• Under leaderboards click Add Leaderboard
• Choose Single Leaderboard
• Complete the details of your leaderboard
• Hit Save and then Done

3. Integrate Game Center into your application

Now that we’ve created the application in iTunes Connect and set up the leaderboard, we need to add the code within our application to support this functionality. To do this we will be using the the Game Center Plugin that’s available through PhoneGap Build.

• Add the following to your config.xml file to include the plugin:

<gap:plugin name="uk.co.ilee.gamecenter" version="0.3.0" />

• Add the following code to authenticate the user with Game Center at the start of your application (this should be triggered as soon as the ‘deviceready’ event is received)

var successCallback = function (result) {
  console.log(result);
};

var failureCallback = function (result) {
  console.log(result);
};

gamecenter.auth(successCallback, failureCallback);

This will cause the following native dialog to appear on the screen:

WARNING: Although I didn’t run into this issue myself, I’ve read that dismissing the log in dialog three times will block this dialog from every appearing again in the application on your device (without jumping through some hoops).

The user will either be automatically be logged into game center, or be asked to log in. Once the player is signed in, you can now submit scores to the leaderboard.

• Use the following code to submit the users score

var data = {
  score: userScore,
  leaderboardId: 'insert_leaderboard_id',
};

gamecenter.submitScore(successCallback, failureCallback, data);

This code should be called when your user finishes the game or dies. It will send whatever score is contained in userScore off to the Game Center. Make sure to replace the leaderboardId with the id of your leaderboard from iTunes Connect.

• Use the following code to open the leaderboard

var data = {
  leaderboardId: 'insert_leaderboard_id',
};

gamecenter.showLeaderboard(successCallback, failureCallback, data);

Finally, we want users to be able to view the leaderboard to see where they rank. This code will trigger a native popup that shows the leaderboard and challeneges.

Now for the tricky stuff…

I was banging my head against the wall for days trying to get this to work but it just wouldn’t. I was almost convinced that it simply was not possible to get Game Center working with the current version of PhoneGap (we’ve all been there).

There was a few things I needed to do outside of the application to get everything working properly (the last one I mention here was particularly frustrating). So, to hopefully save you hours of frustration, here’s what I had to do.

1. Make sure your applications bundle id matches the one in iTunes Connect

In the tutorial above we had to create an application id and assign it to our leader board. You need to make sure you use that same app id when you are creating your provisioning profile, and that it matches the bundle id in your config.xml file.

2. Create a sandbox tester account

Game Center will not work if you are using your normal Apple ID. You need to create a Sandbox Tester account to test it in the Sandbox environment. Take a look at my iOS In App Purchase tutorial for details on how to create a Sandbox Tester.

3. Download Test Flight and enable the Sandbox and Logging options in the Game Center

This was the one that really made me go “WTF?!“. You may be surprised that even after logging into your Sandbox Tester account in Game Center (go to Settings > Game Center to do that) it still won’t work. First you need to go to Settings > Game Center and go to the bottom to enable the Sandbox and Logging options under the Developer section.

The only problem is that those options aren’t there. For those options to show up in Game Center you must first download the Test Flight application, and once it is installed they will appear (you don’t have to use Test Flight at all to do this, you just need to download the application).

Hopefully your experience of getting Game Center up and running is a little smoother than mine, but if you have any problems or comments feel free to leave them below.