Design for Game Center

Hello and welcome to WWDC.

-Hey, everyone. I'm Joe. -And I'm Michael. And we're both designers on the Game Center design team. We're here today to talk to you about the new Game Center experience and a whole lot of enhancements we've made to make it more engaging and beautiful for players. This session will give you an overview of how to design your game to make the most of Game Center's features.

There are a number of reasons to add Game Center to your game, including social features, where players can add friends and manage their gaming identity. Achievements and leaderboards to encourage competition within your game and keep your players coming back for more. And a rich multiplayer experience for real time and turn-based games. To help you take advantage of all of this, we'll be talking in detail about a number of things, starting with the access point, a consistent and recognizable way for players to access Game Center from within your game.

Let's take a look at this feature by launching a game. This is The Coast, an indie game where you have to carefully direct ships away from the shore so they don't crash and lose their precious cargo.

When your game launches, the first thing you'll see is the Game Center welcome banner. When this goes away, you'll notice a new UI element appear. This is the access point, a clear and easy way for players to access their Game Center information on any game.

The player's avatar serves as the access point for Game Center. Tapping or clicking it at any point will launch the new Game Center dashboard. It's where players can check out their profile, achievements, leaderboards and other useful information related to your game. But we'll get to that in a minute.

You can choose to present just the player's avatar or pair it with bits of helpful information we call "highlights." These highlights surface a player's Game Center data, like achievement progress and leaderboard positions.

The access point is pretty flexible. You can place it in any corner of the screen that works for your game's UI. However, we'd recommend placing it at top left, if possible.

And it works with how your game's designed in both landscape and portrait.

You'll just want to make sure none of your game's UI encroaches upon the area the access point takes at its maximum size.

On iPhone 11 Pro, the access point on portrait games is 62 by 335 points. We'd recommend leaving a safe area of 114 points from the top or bottom of the screen that spans the full width.

And for landscape games, it's 62 by 280 points.

It's best to leave a safe area of 91 points from the top or bottom of the screen that spans the full width.

The access point is available across other platforms. You can find full details on safe areas for other devices in the Human Interface Guidelines.

Whenever possible, display your access point at your game's main menu. Placing it here gives players quick access before they dive into your game. Just be sure it appears at the right moment within your game's launch sequence. Let any splash screens or cinematics finish before displaying the access point, along with your game's main menu.

If you can't place the access point on your main menu, you could find another place for it that players return to in your game, like on a level select screen or in Settings. As you can see, the access point is designed to adapt to your game, but think about how to design your game's UI to feel complementary and fit naturally into the experience.

When the game starts, it's a good idea to hide the access point so players can focus on game play and allow space for any critical in-game controls.

The access point is the best, most consistent way for users to access Game Center from within your game. However, you can also link to Game Center using your own custom UI. We've provided different icon options to be used within your game-- full color, white and black variants in a variety of formats, all of which you can find in the Apple Design Resources. Please use the iconography as provided and don't alter it in any way.

If your custom deep link includes text, please use the correct terminology, Game Center, and don't localize this term. And that's the new access point. Just a few things to remember: Place the access point on your main menu where possible.

Find the best corner to display your access point.

Surface player information with highlights. And ensure safe areas around your access point.

Joe, you're up. Thanks, Michael. Now let's move on to the dashboard and profile.

Tapping the access point will reveal the dashboard, a jumping-off point into each of the key areas that make up the new Game Center experience. The dashboard is presented as a transparent layer on top of your game, and it shows through the color of the screen behind it. We recommend that you pause your game or minimize any overly distracting animations when the dashboard is presented. The dashboard, along with the rest of the Game Center UI, supports both landscape and portrait orientation, to respect the way your game has been designed.

It has also been designed to feel consistent across iOS, iPadOS, macOS and tvOS.

On tvOS, you can also optionally display artwork on the dashboard. This really helps brand the experience and makes it feel more integrated into your game. When choosing the artwork to display here, please make sure that it comfortably contrasts with the Game Center UI. Consider using transparency to let the background show through.

Make sure that the artwork is simple, clear and reads well at a distance. The artwork you use here shouldn't be your app icon. Instead, use something different. For example, your game's logo or word mark. Dashboard artwork is not focusable. Here are the specifications for uploading your dashboard artwork.

It must be a TIFF or a PNG file to support transparency.

The image size should be 923 by 150 pixels at 1x...

1846 by 300 pixels at 2x, at least 72 DPI and in the sRGB color space.

The first section of the dashboard provides access to the profile.

Tapping on this shows players a holistic overview of their Game Center profile-- their friends, friend suggestions and the ability to access their achievements across all of the games they have played.

The profile is always accessible from the dashboard. However, you can also optionally provide a button inside your game to link players directly to the profile page.

This could be useful if you want to encourage players to add more friends so that they can better enjoy your game's leaderboard or multiplayer experience.

If you want to provide a link directly to the profile, please use this icon. You can style it to work with your game, but do not alter the shape in any way. To avoid confusion with the design of the access point, please don't use the player's Game Center avatar for this purpose.

If pairing the link with text, please use the correct language-- Game Center Profile and not "profile" on its own, "account" or anything else. And as mentioned before, the term Game Center should not be localized.

However, you can localize the term "profile." The accompanying tech session for Game Center will go into detail about how to link to the profile.

And that's the new dashboard and profile.

Let's review what we just talked about.

Remember to pause your game when the Game Center user interface is open. You can optionally provide dashboard artwork for tvOS.

And if needed, you can link directly to the Game Center profile from your game.

Now over to Michael for the next section. And now on to my personal favorite update to Game Center, achievements, which you'll find in the second section of the dashboard.

I used to love collecting trading cards. You just want to get them all, and there's nothing like getting the ones that are hard to find. That's exactly why we've redesigned achievements as a collectible card format.

Here, in the redesigned achievements section, players will see a lineup of these cards, representing your game's achievements, which are now grouped by "completed" and "locked." There are different kinds of achievements. Standard, which are earned straightaway once the requirements are met.

Progressive, which give players a sense of how far away they are from unlocking an achievement. And hidden, in which the details remain a mystery