Game Technologies for Apple Watch 

Session 612 WWDC 2016

watchOS 3 adds a lineup of technologies for developing games that are responsive, lightweight, and fun. Gain insights into techniques for creating great games for Apple Watch. Discover how to take advantage of gesture recognizers and the Digital Crown for gameplay, SpriteKit and SceneKit for 2D and 3D graphics, and Game Center for turn-based multiplayer games.

[ Music ]

[ Applause ]

Good afternoon and welcome to Game Technologies for Apple Watch.

I hope you’ve had a great WWDC and are as excited as I am about all the great new technologies.

Gaming in iOS has captured the imagination of users.

As a longtime gamer, I’ve marveled at the vast array of games created by developers like you.

We’ve heard that you’re intrigued by the potential for games on Apple Watch so today we’re pleased to present gaming for watchOS 3.

This session covers everything you need to create a great game on this most personal device.

We will first show you how to use various inputs on Apple Watch and provide feedback to your users.

We will then introduce you to our graphics frameworks that allow you to create vibrant 2D and 3D visuals.

In addition we will show you how to integrate social gaming and multiplayer into your app.

And finally, we will show you all the tools available to use during development, as well as some of the best practices.

watchOS provides a rich set of tools to help you get started.

This includes some things you may be familiar with such as WatchKit and rich notification.

Today, however, we will focus on what’s new.

In WatchKit we offer new interfaces that allow you to create your game in Xcode using Interface Builder.

You can now use just your recognizers in the Digital Crown for precise control over your game.

There’s also haptic feedback which we think is a good way to make your experience much more personal and immersive.

SpriteKit and SceneKit are frameworks that let you create rich visuals to delight your users.

They provide good places to add audio and form a simple foundation on which you can build your game.

Game Center provides API’s for adding social features to your game including achievements, leaderboards, and multiplayer.

But now let me show an example of what’s possible.

This is a game built with SceneKit which is our 3D framework.

You start out with a collection of blocks of various shapes.

Your goal is to rotate them until they form a familiar silhouette.

Now let’s watch this for a moment.

When the player, and now that the player has won, we’re going to play another round and I’ll talk a little bit about what’s happening here.

We use pan gestures to control the left and right rotation.

And when it is in the same plane we’ll use the Digital Crown to rotate it into place for the win.

So now that we’ve introduced gaming on Apple Watch and showed a demo, let’s dive into how we can make your game interact with a user in a much more natural way.

Apple Watch is our most intimate device.

We use it up close, usually with one finger touching the screen or rotating the crown.

You can read motion from the accelerometer or you can even make it vibrate with a haptic engine.

When used together this creates the sensation that you’re using a physical device that operates and responds in an almost tangible way.

Let’s start with touch.

On watchOS 3 we offer four types of gestures that work well for different kinds of interactions in your game.

And I’d like to go through those one by one.

Tap is the simplest.

You touch the screen and you can select a target or a position to move to.

Pan is nice scrolling or for, you know, movement in a given direction.

Swipe is good when you want to navigate to another screen such as your inventory menu, and you can swipe back to exit.

Long press is a recommended way to access your game’s main menu.

And here you can provide options such as quit, resume, or even show Game Center stats.

Now that we’ve showed you some examples of the four gesture types, let’s talk about the classes we offer for you to adopt these.

So for tap, we give you WKTap Gesture Recognizer.

For pan, WKPan Gesture Recognizer.

And similarly for swipe and for long press.

Now these gestures are available from Interface Builder.

When you go into the Object Library and search for Gesture you’ll find the ones available.

If you select one, you can add it to your scene.

And in our example we’ve added tap, swipe, and pan.

These gestures are various options you can configure such making it a right swipe, or a left, or up or down.

These other options configure various behavior.

Now if you’re using multiple gestures, you should look at this last option because it is important to specify the priority.

And this is because gestures can conflict.

And what do I mean by a conflict?

Well, a right swipe could also be interpreted as a tap followed by a pan.

So you, as the developer, have to decide which of these takes priority.

And in a game a tap and a pan represent interactions directly with your game world.

And we’d rather have that take priority over a swipe that would take you to your inventory.

So going back to Interface Builder you configure this Must Fail First field for in the swipe gesture.

And you set tap and pan.

And this reflects our priority.

Now that we’ve added gestures to our storyboard you need to implement an action method.

This action method takes the corresponding class and there are various properties you can read, for example, location In Object and Bounds.

And this last one, state.

And I think state is best shown in a code example.

So from that puzzle app I demoed we have a handle pan action.

And the first thing we do is we get the location and the bounds.

And then we look at the state and if we’ve begun the pan, we’re going to set up our rotation.

If we’re in the middle of a pan, it’s either change, ended, or cancelled, we will update it.

So I’d like to finish up with the gestures with some considerations.

Since the user is wearing Apple Watch each of these gestures require both arms so it’s a good idea to keep them short.

It’s also important to note that in comparison to our other devices, your finger is relatively large compared to the screen.

So please take this into account and make sure that content remains visible as you’re interacting with it.

And finally, you know, our user interface guidelines, it recommends that we make our gestures discoverable so you should follow them.

Now many of you are probably familiar with gestures but now let’s talk about something that is unique to Apple Watch and that is the Digital Crown.

The interface guidelines say this is good for selection and scrolling.

But as a gamer, this harkens back to arcade machines with a physical dial that can turn to rotate a spaceship or move a paddle.

Or in this example we can move a ball back and forth until we decide where we want to put it.

And when we’re ready we can tap to drop it into position.

Adopting the crown is really easy.

You access this Crown Sequencer which is available on your main interface class and there are properties you can read, such as rotation per second or whether we’re idle.

Or you can define a delegate.

And this delegate provides two methods.

crownDidRotate which takes a rotationalDelta.

This rotational Delta represents the change in the crown since the last time this method was called.

And it is positive if it’s moving away from the user and negative if it’s moving towards you.

And this is true whether Apple Watch is on the left wrist or the right wrist.

When the crown stops rotating crownDidBecomeIdle gets called.

So to recap, we think Digital Crown is great for games.

It’s also really easy to adopt.

And I can’t wait to see what kind of games you make with this new kind of control.

Now the accelerometer provides a means to enhance other interactions, for example, adding tilt on a game of pinball, or to add spin to a pool shot.

You access the accelerometer through the CMMotionManager.

And there are some considerations here.

As you probably know, when you hold your watch up here the screen is visible.

But when you lower your arm to the side it goes blank.

When this happens it’s going to put the app in the background.

So as you move your wrist the screen may go blank so you should account for that in your game playing.

And a recommendation here is to use background processing.

You can call the method in NSProcessInfo performExpiring ActivityWithReason to give your game loop some time to continue and give your user a smooth experience.

Now let’s show an example of how to use this in code.

The first thing we need to do is access the CMMotionManager singleton so we set it as a property here to use later.

Then in willActivate in our main interface we ask if the accelerometer is visible.

If it is, we configure things like the Update Interval.

And then we ask the motionManager to start sending us update events.

We provide a block that receives these events and we can send it to our game to give the user feedback.

When we are done we should tell the motion Manager to stop sending us updates so we can conserve battery life.

Now to recap, we feel the accelerometer is a good place to enhance other interactions.

Be aware that the screen may blank so consider using background processing.

And also make sure that you use it when it’s needed and you stop listening when you’re done.

Now let’s consider haptics.

On iOS you could only make your device vibrate.

On Apple Watch you can create a much more personal experience through the use of distinct haptic patterns.

Each haptic consists of a vibration accompanied by a brief audio tone.

By using the sense of touch and sound, in addition to visual cues on the screen, you can create a much more immersive, interesting game experience.

We offer nine types of haptic feedback.

I’d like to go through a few examples of how they might be used in your game.

This is the notification haptic.

These magenta triangles represent the time when the haptic is vibrating.

The waveform represents the audio sound that’s played along with it.

Let’s hear how this sounds.

[ Audio Tone ]

As this example shows, the notification haptic is good for alerting people when something important has happened that requires their attention.

Now you get this for free if you adopt rich notifications.

But when you’re in a game and you’re exploring the world you might use it tell the player, “Your village is under attack.”

The direction haptics, up and down, are used to alert people when an important value has increased or decreased significantly.

So in this example, [ Audio Tone ]

Your health is low.

Or when you drink a health potion, [ Audio Tone ]

You feel better.

There’s also a tone for starting an activity such as beginning a race.

Or when you wish to pause.

[ Audio Tone ]

The success haptic provides a confirmation tone.

And this is good for something like [ Audio Tone ]

You won. Or if you didn’t make it, please try again.

And as a final example, there’s a very subtle click haptic.

This haptic is a bit special.

As you can see, it’s much quieter and shorter than the others.

In fact, I’m not sure if you’ll be able to hear the audio but let’s give it a shot.

This haptic provides the sensation of a dial clicking at defined increments or intervals.

In a game this might be nice for picking a lock on a chest or giving the user feedback that they have bumped into an obstacle.

Now that I’ve given some examples I want to just point out that it’s really easy to adopt these haptic events.

You call play and you pass in the constant for the type that you desire and the feeling you wish to evoke.

And let me finish up with haptics with some considerations.

The Taptic Engine differs from conventional audio in that you can only play one haptic at a time.

Also note that these effects serve to draw attention to important events.

And their effectiveness diminishes if you have to make the watch vibrate constantly.

So please exercise restraint and I think you’ll have a really awesome experience here.

So to recap, we discussed gesture recognizers and some ideas for using them in the game.

We showed how you can incorporate the crown for compelling game play.

We described how to incorporate the accelerometer into your app.

And finally, we discussed using haptic feedback to make your game more immersive.

And now I’d like to hand it off to Fatima to talk about our graphics frameworks.

Thank you.

[ Applause ]

Thank you, Christy.

Hi, everyone.

My name is Fatima and in this section we’re going to talk about our graphics frameworks, SpriteKit, and SceneKit that you can use to make really cool games on Apple Watch.

So what are SpriteKit and SceneKit?

SpriteKit and SceneKit are Apple’s 2D and 3D frameworks for games and graphics.

You can use either framework in your game or you can even combine them together.

They are easy to use and they come with great integrated tools and editors in Xcode.

They are available on macOS, iOS, tvOS, and this year they are available on watchOS.

On Apple Watch SpriteKit and SceneKit are bringing you for the first time GPU accelerated, real-time rendering.

And this will enable you to make really dynamic content and also make your games really interactive.

So now let’s look at some of the cool features that you can use on Apple Watch.

And we’re going to start with animations.

You can create 2D animations in SpriteKit with SKAction.

And you can create 3D animations in SceneKit with SDNAction to make your games interactive.

You can use actions to move, rotate, and scale your objects by either applying a single action or applying a sequence of actions to make more complex animations.

Next we have particles.

You can create particle simulations in both SpriteKit and SceneKit to add interesting effects to your game.

Using particle simulations you can simulate fire, snow, rain, and many, many other interesting effects.

Next we have physics.

Both SpriteKit and SceneKit have integrated physics to make your game even more interesting.

You can turn on physics for your object and then define properties on them like mass, velocity, and friction.

These properties will then define how your objects move, how they respond to collisions, and how they react to forces in your simulation.

Next we have lighting.

You can also add light sources to your game.

And lights is just another node in your scene.

So now you can apply actions on it to move it around.

And one cool feature here that we have for lighting is that you can automatically generate your normal maps using SKTextures.

Next we have camera.

Both SpriteKit and SceneKit have a camera that you can use.

And if you decide to use a camera, then we will render the scene from the camera’s position.

So the camera is really the center of your viewport.

And the camera is also just like any other node in your scene.

So now you can move it around by applying actions on it.

Next we have shapes and text.

Text can be added as a node to your game.

So now it is really easy to display text and also apply actions and physics on it.

We also have shape nodes so now you can also create dynamic and geometric shapes in your game.

And we also have programmable shaders in both SpriteKit and SceneKit.

You can create shaders in SpriteKit and you can create shader modifiers in SceneKit to achieve most custom looks to your game elements.

So now that we have seen some of the cool features that you can use, let’s see how exactly SpriteKit and SceneKit are different on Apple Watch.

And I’m going to start with SpriteKit.

So in SpriteKit we have an SKView that we use to present our scene.

And our scene can contain many nodes.

For example, we have SKSprite Node to add sprites.

We have SKLight Node to add lighting.

And we have SKEmitter Node to create particle systems.

On watchOS a few things are different.

First, we don’t have an SKView but now we have to use WKInterface SKScene to present our scene.

We also don’t have CIFilters but we can achieve the same effects with using an SKShader.

We don’t have positional audio but we can play sounds just like any other platform using SKAction playSound.

And finally, we don’t have SKVideo Node but we can use WKInterface Movie to play a video.

And this table summarizes the differences for SpriteKit.

For SceneKit we almost have the same differences.

Instead of SCNView now we have to use WKInterface SCNScene.

We don’t have positional audio but we do have standard audio.

And we don’t have access to CIFilters but we can use Shader Modifiers to achieve the same effects.

So now let’s walk through an example of creating a game target on Apple Watch for an already existing iOS game.

And here I am using the SpriteKit template on iOS.

On the left we can see our project files and we can take a look at our game scene.

And we can see here that we are using a really simple scene.

We can also take a look at our GameView Controller.

And we can see here that we are using an SKView to present our scene.

Now to create a game target on Apple Watch all we have to do is to click File, New Target.

Choose the Game App template under watchOS.

Give it a name and then press Finish.

Now this template created two folders for us: The app folder which contains our storyboard and our extension folder which contains our Interface Controller and our game scenes.

So now let’s take a look at our storyboard.

And this is our storyboard and we can see that we have our interface object in the middle.

And our interface object was selected from our object library.

And here we can see that we have the options between choosing a SceneKit Scene to display SceneKit content and a SpriteKit Scene to display SpriteKit content.

Also our interface object has an outlet defined in our Interface Controller so we can use it to present our scenes.

So let’s take a look at that.

And this is that Interface Controller.

And now let’s take a closer look at this code.

And here we see that we have our interface object and in awake(withContext we can see that we are loading the scene just like the way we do within iOS.

And finally we are using the interface object to present our scene just like the way we did within an SKView in iOS.

And these are all the steps that you need to create a game target on Apple Watch for an already existing iOS game.

And now I’m going to hand it over to Christy to go over social gaming.

[ Applause ]

Christy Warren: Thank you, Fatima.

Now let’s talk about Game Center.

Today games are a lot about encouraging engagement and competition with friends.

Game Center makes it easy to share achievements and scores or even play a game together.

For multiplayer on Apple Watch we’ll focus on turn-based gaming.

Turn-based gaming is something that we think is a really excellent match for Apple Watch.

It supports brief interactions and there’s no need for both players to be present.

I can take a turn and when I’m done I can pass it to you.

You’ll get a rich notification and you may take the turn at your leisure.

There are various details on how to implement a turn-based game that we’ve talked about in past years.

But today we’ll highlight what is unique to Apple Watch.

For other details please review our documentation or view past sessions.

I’d also like to call out some great new features for Game Center in iOS 10 that were covered this morning.

And if you didn’t catch that, I’d encourage you to watch it on video.

To get started on making a turn-based game let’s talk authentication.

It is simpler than iOS in that you do not need to enter a password on the Apple Watch.

When you sign in on the phone you’re automatically signed in on Apple Watch.

Also if you’re familiar with Game Center for iOS, you may be aware of a View Controller that you get and you have to present under some circumstances.

On iOS I mean on Watch OS that is not necessary.

Now let’s show this in code.

For those of you not familiar with Game Center, there is the GKLocal Player singleton which is sort of the focus of our API’s.

In this case we sent an authentication Handler and this gets called when authentication completes either successfully or with an error.

If you succeed, you can give the user feedback if they have signed in and you can start game play.

Now that we’ve authenticated you can create a turn-based match.

An important decision here is how to match up with other players.

Now the easiest way here is to let Game Center pick the other player for you and this is called Automatch.

Alternatively, you can load a list of recent players and invite one programmatically.

So let’s start with Automatch.

Here you create a GKMatchRequest.

You pass it to the method find, the class method find on GKTurnBasedMatch.

And when this returns it gives you a new turn-based match instance that you can use to store your data and play your game.

Now please be aware that this may be a new match or, if Norman created a game and took his turn, I may be joining his game in an open slot.

So your game needs to take into account both cases.

So let’s show this in code.

You create your Match Request and you set parameters such as the maximum number of players and you call a find.

When that succeeds you can start your game.

It’s really that easy.

And programmatic invites are almost identical.

You just set another parameter here which is recipients and that is from a list of players that you’ve chosen.

However, to do this you need to access a list of players who you can play with.

So I’ll show you some sample code for this.

This shows you how to access the recent players list.

And a good place to and let’s suppose you have a class.

There’s a player picker that will let you pick from this list.

So in awake we can call on the Local Player singleton loadRecentPlayers.

And this assumes that you’ve previously authenticated in your main interface.

And we call loadRecentPlayers and you receive a list of players that you, you know, you have played with recently on phone, or pad, or on watch through Automatch.

Now it’s important to mention that once we’ve loaded this and saved it away you need to pick it, pick your opponent.

So in order to help you present this list of players and give you a head start on building a turn-based game, we’ve created a sample app, HelloGameKit, that implements the basics of a turn-based game.

It’s also built on the new SpriteKit template.

And as a bonus it will demonstrate how to use gesture recognizers.

So I’d like to walk you through a brief, briefly walk through this example.

When you launch the app it brings up a screen like this and it says, “Authenticating.”

When the authenticate completes it shows your display name on the top and gives you a place to pick your opponent on the bottom.

This counter in the middle counts the various taps that you’ve made and records them and saves them into the game model.

This is just a simple thing that will save an error in turn-based match.

Now if you’ve tapped Pick an Opponent on the bottom, it’ll bring up a player picker that loads the list of recent players and lets you pick one.

It also gives you the option to Automatch but in this case I want to play with Alan.

So now he’s playing with me.

If I want to access the list of matches, I can swipe left and I’ll get the Match Browser.

Here I can create a new match with Alan or I can pick an existing game.

So I’m going to go back to that game.

And finally, I can end my turn with a long press and that will pass it to Alan and he can take his turn.

So that’s HelloGameKit.

You can download it under the developers’ site under Session 612.

Click on the Resources tab to find that sample.

So to recap, Game Center in watchOS gives you streamlined authentication.

It is a programmatic API but we give you the sample app that has UI for all the things that you need to do.

So we hope that will give you a good start.

So with that I’d like to hand it over to Tyler to talk about tools and best practices.

[ Applause ]

Thanks, Christy.

So now you’ve been introduced to some of the frameworks you have available on Apple Watch.

Let’s talk about tools.

Many of you may be familiar with our rich set of game tools already available inside of Xcode.

And I’m happy to tell you that all of these tools are also available for you for your Apple Watch development.

This includes our scene editor which takes the process of setting up and laying out your scene from code and moves it into a visual editor right inside of Xcode.

So instead of repeatedly compiling and iterating on a positioning of your scene, you’re able to see and manipulate exactly where your nodes will be placed.

And on top of that you’re able to easily manipulate the hierarchy of your scene using the scene outline views, and create and modify your physics bodies for your nodes, all without touching a single line of code.

Now our scene editors also include a built in action editor.

This lets you easily create, modify, and preview complex reusable animations right inside of your level.

So whether you’re creating a complex cut scene to introduce your level or a character animation that you’ll be reusing throughout your code, it’s all easily possible with this action editor.

Now as you’re developing your game you’re going to find the powerful particle engines of both SpriteKit and SceneKit are going to play an important role in bringing your game to life.

But creating that perfect particle for your game can be difficult if you’re not able to visualize it.

And fortunately we provide you a flexible tool for creating and visualizing your particles.

So you’re allowed access to the huge number of properties that we have on our particles so that you can see their effect immediately as they are changing them.

And we also have tools to help you maintain great performance in Apple Watch.

This includes our texture atlases.

When you place your images within a Sprite atlas we’ll automatically rotate and reposition them to form a single image.

This reduces the number of draw calls your game needs to make.

And what’s great about this is that nothing changes for you in code.

You’re still able to operate on these textures as if they’re individual files.

And when your game is running we now provide you an SPF Performance Gauge.

And at the top of the report you’re provided a number of real-time statistics.

This includes your current frame rate, as well as your GP utilization to see which parts of your GP are being used the most.

And your frame time for both the CPU and the GPU.

And this will help indicate whether you may CPU bound or GPU bound.

Now in addition to real-time statistics, we also provide you a timeline history of our CPU and GPU frame times.

And what’s great about this is that will break down your CPU frame times into their individual parts so you’re able to see exactly how much time it spent rendering, or running your update loop, or evaluating actions in physics, as well as how much time is spent idle.

And when your app is paused you can scroll through the history of your app’s performance so you can see how it evolves as you progress through your game.

And if there’s a particular interest you can dive deeper and examine details on it and get some exact timings.

So now there’s some best practices that you can take to make sure that you’re going to get great performance on Apple Watch.

A great way to reduce your battery consumption is to avoid updating your scene unless you need to.

Both SpriteKit and SceneKit will now automatically skip rendering if we detect nothing has changed within your scene.

And if you’re working with large assets, you should load them at the start of your scenes but you don’t experience any hiccups due to loading those assets throughout parts of your game you expect to be fluid.

And you should also aim for a frame rate that’s going to provide a consistent experience for your users.

And you can do this by explicitly setting your interfaces’ preferred frames per second.

Now if you do find that you’re experiencing performance issues, there’s a number of measures that you can take to address it.

And the first being to reduce the number of particles present within your scene at any given time.

You’d also try reducing the details of your assets that may be far in the distance or scaled greatly.

And what’ great about this is you often won’t see any change in your game’s visual fidelity by making that reduction.

And if you’re still seeing issues, try reducing the complexity of your scene until you find that right balance between performance and content.

Now as you’re developing your game on Apple Watch there’s a number of design considerations you should keep in mind throughout your development.

Apple Watch, you shouldn’t simply be taking your iOS games experience and scaling it down.

We want you to be rethinking the experience.

And the Apple Watch really lends itself to lightweight interactions.

Users love to be able to see the progress of their game at a glance.

And you should be designing your interactions around someone who is on the go.

In addition, you’re going to want an interface that’s concise and simple, and should avoid displaying too much information, or being too busy on the screen at once.

You may even want to spread out your interactions across multiple screens so that you can maximize your screen space.

And if you have any buttons or touch targets, make sure they’re large enough so that your users can comfortably interact with them.

And you should also aim to maintain visual continuity with your app.

What that means is transitioning from one app into yours should feel like a consistent experience.

And part of that can be to select a color tint that supports your game’s brand to use throughout your game.

Now we also recommend that when possible you use a black background for your game.

And what’s great about this is that the black will blend seamlessly with Apple Watch’s bezel and create this great illusion of having an edgeless screen.

So now you’ve been introduced to some of the awesome input you have available on Apple Watch, and the great frameworks that you can use to develop your game, and a rich set of tools that you can use for your development workflow.

We can’t wait to see what kind of exciting and fun games you’re going to be making on Apple Watch this year.

If you’d like more information, please visit the Developer Site and you can find us under session ID 612.

And there’s been a lot of great information from sessions previously in the week.

This includes What’s New in SpriteKit, What’s New in Game Center, Advances in SceneKit Rendering, and Quick Interaction Techniques for watchOS.

So if you want to dive deeper into any of the areas that we touched on today, we highly recommend you take a look at these.

And thank you and I hope you enjoy the rest of your conference.

[ Applause ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US