Design for Game Center

Access Point

It is a UI element that helps the user access their Game Center information from within the game. You can place the access point in any corner regarding the context of your UI's game but Apple recommends that if possible, place it in the top left corner.

Access Point Layout

In portrait, on the iPhone, the width of the expanded access point is 335 points and the height is 62 points with a safe area of 114. In landscape the width of the expanded access point is 280 points, the height is 62 points with a safe area of 91. You can read more about it in the Human Interface Guidelines.

Game Center Iconography

In case you would like to use your UI to link to Game Center, Apple provides different icon options in full color and black and white. You will find all the variants in Apple's Design Resources.

Dashboard & Profile

Once you tap the access point, it will take you to the dashboard. Make sure to pause your game once the user interface is open. Over there, you will see elements like the player's profile, achievements and the leaderboard. The dashboard supports landscape and portrait mode, and it is consistent among Apple's platforms. Just for Apple TV, you can add some additional artwork to the dashboard, please refer to Apple's human interface Guidelines to learn more about it.

Profile

The first element on the dashboard is the Profile; nevertheless, if you'd prefer not to use the players avatar, Apple optionally provides an icon and you'll be able to add a button inside your game's profile page. The Profile shows the player's overview, friends, friend suggestions and a way to access their achievements across all of the games they have played.

Achievements

Achievements is a great way to keep the player engaged with the game and a good reason for the player to return frequently to the game. Apple created three types of achievements - standard, progressive and hidden. Besides the art for your achievements, make sure to describe the achievement with a title and description. You can find more information in Apple's HIG or on the WWWDC video about designing for Game Center.

Leaderboards

The sense of competitiveness is part of human nature. We want to increase our skills and learn who can be a worthy rival. With the leaderboard, you can show the user the score of their friends playing the same game. Make sure to create great imagery and to follow the format that Apple recommends. To learn more about it and also learn how to optimize your image for tvOS, please refer to the HIG.

Multiplayer

You need to add a specific button to redirect your player to the multiplayer lobby. Once in the lobby, the player will be able to invite friends, add the number of players the player will like to invite and add some other special features that Apple provides. You can learn more about Multiplayer on Apple's Human Interface Guidelines.

Further Reading

If you are planning to design for Game Center, we recommend watching Apple's WWDC video which explains the process in more detail and you can also read more about it in Apple's Human Interface Guidelines. Always refer to Apple's Human Interface Guidelines, since it is the official source and they are always adding updates to the guidelines.

Animate a progress circle

In this exercise I will show you how to animate a progress circle in Principle. I will be using Figma but feel free to use Figma or Sketch. Let’s open our exercise file in Figma so we can set some of the assets.

We will create three more copies of the original frame, so in total we will have four. In the first frame, put the opacity of the dashboard to 1%.

Next, in the frame called Achievements 4, select the oval called progress. You will notice that when we select the circle, a small dot in the right side of the circle appears, so drag the dot to the middle of the circle.

Let's select the progress circle, and give it the following parameters: -90°, 20% and 100%. Then, add an outline pressing Shift+Cmnd+O which will convert the vector into fill. Repeat the same process for the Achievements 2 frame, using these values: -90°, 0.5%, 100%.

Again, repeat the same process for Achievements 3 frame, with the following values: -90°, 10%, 100%. Just like that we can have a full sequence for the circle progress.

Now, we are ready to import the assets from Figma to Principle. To do so, go to Principle and click on import on the tab bar. Select the Figma tab and hit on Import Page.

Next, select Achievements 1 and add the Tap action. For Achievements 2, 3 and 4, add the Auto action.

Now, change the type of animation for all the actions to linear as you can see in the image below.

Finally, to close the animation loop in Achievement 4, select the dashboard asset and add a new tap action that will point to Achievements 1.

Conclusion

When you are building games, make sure to integrate Game Center in your game. It will give you some powerful social features that will help create a strong liaison between the game and the player. Achievements, leaderboards and multiplayer experiences encourage the players to be more committed to the game.