Session 610WWDC 2016

SpriteKit adds new features to make it even easier to create high-performance, power-efficient 2D games. See how tile maps enable you to lay out large scenes quickly and check out new APIs for warp transformations and custom shader attributes. Learn about focus-based interactions on Apple TV, rendering on Apple Watch, and new tools built right into Xcode for measuring performance and integrating with GameplayKit.

[ Music ]

[ Applause ]

Hello, everyone.

And welcome to What's New in SpriteKit.

I'm Ross. I'm an engineer herein the Games Technology Team at Apple.

And I'm really excited to be ableto show you what we've been working on for the past year.

Before we jump into talkingabout the new features we're introducing this year,I'd like to take a moment to quickly recap what SpriteKit isfor anyone who may not be familiar with it.

So, SpriteKit is our 2D graphics framework for games.

It's designed to be highly flexible and super easyto use while still offering great performance.

So, there are as few barriers as possible between youand the great games that you want to make.

It's supported across all of our platforms including iOS, macOS,tvOS and this year we're proud to saythat is available on watchOS as well.

Any app, I know, isn't that awesome?

[ Applause ]

Any App that uses SpriteKit automatically gets accessto the latest version of the framework availablewithout needing to be rebuilt and redeployed,so you're always up-to-date.

And it's naturally integrated with Swift, so you can use it,all these great features, from our newest language.

But the framework is only half of the SpriteKit picture.

The other half is our Xcode integrated live editorwhich lets you preview your scenes directly from the editorand lay them out visually.

It's fully integrated with the Asset Catalog,so you can leverage features like app thinningand on-demand resources without havingto jump through any hoops.

And this year we're introducing tile ap editingand GameplayKit integration, both of which we'll talkabout a little later on.

And finally, SpriteKit is fully Metal-backed on all devicesthat support it, so you get accessto its great performance benefits automaticallywithout having to do anything.

So, this year we're continuing to introduce great new featuresthat make it easier than ever for youto make great games for Apple platforms.

So, without further ado, let's jump into what's new.

Now, normally with sessions like this one,we'd put the tools stuff at the end.

But today we're going to turn that on its head a little bit.

And that's because the editor is absolutely integralto getting the most out of SpriteKit.

And this year we've got some really exciting additions.

So, let's start with the scene outline view.

Knowing what's in your scene and how objects relateto one another is extremely importantfor effective scene management.

In Xcode 7, this was accomplishedthrough the Jump Bar.

The Jump Bar is designed to make navigating between filesin your workspace easier but when you're in SpriteKit,it also has all the nodes in your hierarchy.

And this is great for navigating through those nodesbut it would be nice if we could see the entire hierarchyat the same time.

So, now in Xcode 8 you can, with the new scene outline view.

It's a new panel that allows you to see all the nodesin your scene and their parent-childrelationship simultaneously.

In addition to being able to select nodes,you can also rename them and remove them from the scene.

You can also change their parent-child relationshipof the nodes by dragging them around,much like you reorder keynotes, slides in keynotes.

Drag a child onto another node to make it a child,drag a node onto another node to make it a child of that nodeor drag a child out from its parentto break that relationship.

We also have the ability to lock and hide nodes.

Locked nodes can't be modified or selected from the scene view.

And that can make navigating your scene much easierwhen you have a lot of notes and it's getting kind of cluttered.

And the same with hiding.

It's great for when you have really large objectsand you want to access some nodes that might be behind them.

So, all these features make the scene outline view really usefuland it's making, makes managing your scene much, much easier.

So, next I'd like to talk a little bit about how we've begunto integrate the GameplayKit into the SpriteKit editor.

So, last year we introduced GameplayKit,a brand-new framework that offers ready to use solutionsfor problems that are commonly encountered when creating games.

One of the features included last year is entitiesand components, which is a design pattern that's focusedon modularity and reusability.

Components encapsulate behavior and you assign them to objectsor entities to change their behavior.

And you do this without having to write specific codefor every object in your scene.

Now, we're not going to go into great detailabout how these work but it's useful to think of componentsas code building blocks that you assemble in different waysto create objects that behave in different ways.

Typically, you might have a component that represents healthfor objects that can be damaged.

Or a component that has physics data for objectsthat can collide with one another.

Or a component that allows an objectto be a player controlled by player input.

Components are really powerful and allow youto control how your objects behave.

And now we're bringing entities and componentsinto the SpriteKit editor.

You can assign components that you create directly to the nodesfrom within your scene from the new entitiesand components panel of the inspector.

Additionally, you can choose to expose propertieson the custom components you createand those will then appear in the editorand you can tweak them for each node.

The best part about all this isif you're already using GameplayKits, entitiesand components, we're now doing all the hard work for youand you can do all of your object composition straightfrom the editor.

Another great featurethat GameplayKit introduced was pathfinding.

Pathfinding is all about finding the best route from point Ato point B and it does thisby operating what's called a navigation graph.

Navigation graphs are collectionsof nodes joined together by connections.

And they describe how an object can move through your scenewithout colliding with any obstacles.

And now we've integrated navigation graphsinto the SpriteKit editor.

So, you can create and edit them directly in your scene.

You can add and remove navigation nodesand make connections between them simplyby clicking in the editor.

And you can leverage the graph you create in code.

Creating the graph this way allows you to quicklyand easily define how entities can navigate your scene,making pathfinding a breeze.

So, now let's talk a little bit about a feature that helps you,yeah I know, it's pretty awesome, isn't it?

[ Applause ]

Now to talk a little bit about a featurethat helps you get the most out of your performanceof your game, the FPS performance gauge.

But if you want to change how things look,you need to make modifications to your source assets.

Plus, large images require more memoryand if you want more variety in your game,you'll need additional large assetswhich in turn further increases your memory overhead.

So, tile maps gives you the best of both of those solutions.

They're easy to manage, as each tile map is just a single nodein your scene.

They can be quickly modified.

Say for instance I wantto change the sand tiles here to water.

All I have to do is tell the tile mapto change the type and it's done.

And by using a set of smaller tile images, tile maps allow youto have large, detailed scenes with minimal memory overhead.

Tile maps are also great for lotsof different games and art styles.

You can use them for top-down RPG's,side scrolling platformers, isometric city builders,hex-based board games.

Tile maps are incredibly flexible.

So, as you've seen, tile maps are very visual and insteadof just telling you that how they work, we're going to jumpinto a demo so I can show you.

So, here we are in the SpriteKit editorand we've already got a tile map in our scene.

So, let's go ahead and select that.

And so the quickest way to start editing a tile map is simplydouble-click on it.

And that brings up our new tile editing barat the top of the screen here.

And by default, we have the brush tool selectedwhich allows us to paint into our tile map.

And so the paint, all we have to do is simply clickand we start placing tiles in our map.

If you want to change what type of tile we're placing in there,all we have to do is click on our select tile button over hereand that shows us all the different tiles I have availablefor placement.

So, here let's place edge tiles and a corner tile hereand a couple more edge tiles.

And we can see how can easily place,piece together your scenes this way.

But individually placing all these images is still abit tedious.

So, I'm going to show you better way of doing this.

So, here we're just goingto a place a new tile map in our scene.

And by default on our tile maps, we have a featurein the inspector enabled called enable automapping.

And what this does is when I start to edit my map and I goto select my tiles, you'll see that instead of individual tilesfor placement, we now have these groups of tiles here organizedinto different types of terrain, grass, dirt, stone and water.

So, I'll go ahead and select one.

And now when we go to place it in the tile map, we clickand place the center tile in additionto all the edge tiles automatically.

And this is really great for quicklyand easily creating your scenes.

Now, instead of having to place each individual edge tileand corner tile, we can just paint and it automatically setsup each of the tiles that we need here without having usto go through any extra hoops which a lot of time.

That makes painting tiles extremely fast.

[ Applause ]

So, let's take a look at how the tile sets are put together.

So, the tile sets arrive in their own SKS file.

And as you see here, you can see all of our different typesthat we have, like grass, dirt, stone, and water.

And you can see that they're arrangedso that you can see how they're supposed to be put together.

So, let's put a new tile group in here.

So, all we have to do to set up a new tile group that workswith our automapping is to drag the tiles we want to useinto their corresponding slots here.

You can see that we have those silhouettesthat vaguely what the tile's supposed to look like.

So, we'll just grab some tiles from our active browser be here.

And we just drag-and-drop them in and it's super quickand super easy to set up a new tile group.

So there. Let's give it a name.

We'll call this one garden.

And that's it.

So now we can go into a scene.

We'll create a tile map here.

We'll start editing it.

And you'll see our garden tile group is already in here.

So, I just grab that and start placing it.

And you can see how easy it is to just set up a new tile groupthat already works with automapping.

You don't have to do anything extra.

But there's a little more that we can dowith the tile groups as well.

So, I'll go back to our tile, we'll go to another tile setthat I premade over here.

And at first glance it looks the same.

But then when I start clicking on these individual tiles here,you can see that we have a bunchof variants available for each tile.

And this is the same for each one of our different slots here.

So, when we paint this tile group into a tile map,it will randomly select one of these variants for each tile.

So, you can have a lot more variety to your tile maps.

Additionally, you can assign weights to eachof the styles, these variants.

See here, the red flowers have a plate,have a placement weight of 3.

White flowers have a placement weight of 2.

And the blue have a placement weight of 1.

So, the red flowers are much more commonthan the white flowers and more common than the blue flowers.

Now, when we start painting these tiles,you can see our variants are now showing up.

So, you can see the tiles sets are very flexible and allow youto achieve a lot of different looks without having to do a lotof work which is super useful.

So, another thing we can do with the tile maps is layer them.

So, here in the tile map on the left here,it appears as if there's just a single tile map.

But if I grab it here,you'll see that's actually 2 layered on top of each other.

And so you see we can layer them on top of one anotherto make it make it appearas if we have more versatile tile assetsthan we actually have.

So, it looks like these assets are designedto transition to the grass tiles.

So, they actually have [inaudible] along the edges.

So, when we move these guys over here,they just naturally transition to the grass.

And so we move it on over onto the dirtto achieve the same effect.

Now looks as if they're transitioning onto the dirt.

So, this allows you to get a lot more mileageout of your art assets.

If you just have them transition to being transparenton the edges, you can layer them together and,any way you can conceive allowing youto get a lot more flexibility out of the art that you have.

So, another thing that we can dowith our tile sets is they can be animated.

So, here we have a nice tile set with some grass and some water.

We'll press the animate buttonand if you look closely you can see the shore lineon the water tiles here is undulating.

So, now let's take a look at the tile set for this set tile map.

Set the water.

You can see, preview the animation straightfrom our tile set editor.

And I can select one of the variantsand you can see we just have, so we have a list of all the framesthat are in our animation.

Now, we give it a time per frame to set up the animation.

Now, this is basically identical to how our animatewith textures app should works.

And it's just that easy to set up animation.

Which is a really great way of bringing life to your scenes.

But in additional to frame animation on the tiles,we can also animate the tile maps themselves.

So, the tile maps are just SK nodes.

So, you can do everything you can do with an SK node.

So of course you can drag them around.

You can scale them.

You can rotate them.

I note that you can still actually edit the tile mapswhile they're like this although it gets a little awkwardwhen you're at some weird angles like this but, it still works.

But because SK nodes, the tile maps are just nodes,we can run actions on them.

So, here you see I have a bunch of actions that I've already setup on my tile map by moving the scale and rotating it.

So, we just animate this thing.

We can see yeah, we move, we scale, we rotateand then we put it back.

And so you see that we have multiple waysof bringing animation to our tile mapswhich can be really useful.

In fact, we can leverage this layering and the animationto create some interesting effects.

So, in this scene, I've got three different layers setup in our tile map here.

Don't want to do that yet.

And if I position the camera over here and we hit animate,we're simply moving these tile map layers at different ratesand this achieves the appearance of depth,an effect that we call parallax scrolling.

And all I'm doing here is simply moving the foreground layerat one rate of speed, the middle ground layer at half that speedand the background layer at half that speed again.

And that achieves the effect that we want.

And it's just incredibly easy.

So, in addition to having simple square tiles in our tile maps,we also have support for hex tilesand isometric tiles as well.

So, you have lots of flexibility in terms of the appearancethat you can achieve for your game.

So, speaking of which, let's take a lookat a game sample right now.

So, here we've got a little platform that I built.

A little guy that can run around.

And you can see that I got the parallax scrolling goingon in the background.

And you'll note that I'm colliding with the tiles here.

And I achieve this by leveraging custom user datathat we can put on each of our tiles.

Here, I'll show you in our tile set.

Select one of the variants here.

And you can see that we have some user data over here.

And I just have a value called edgeTilewhich is a Boolean, and I set to 1.

So, in code, I'm going through the tile mapin our platform demo here, and I'm lookingfor all of these edge tiles.

And whenever I find one, I create some physics datato allow the player to collide with it.

And since it is just in our tile map here, say I wanted to getover this large wall here.

When I run the game, you'll seethat my guy can't actually jump high enough to get over it.

And he really wants to because that red buttonover there looks really tempting.

I really want to push that thing.

So, since we're just generating our physics data from our tilesand our user data, all we can do is just going hereand erase these tiles and build and run our game again.

The tiles are now gone and we can now move through there.

And we didn't have to change code or anything.

We just used the data that we pulledfrom the tile map to set up our tile.

It's that simple.

[ Applause ]

And now as a reward, I get to jump on the button.

Yay.

So, that's how our tile maps work in the editor.

So, now that we've shown you how they work in the editor,let's take a look at the framework side of things.

And if you're creating tile maps from within the editor,you're not going to need to bother with most of the stuff.

But it's good to get an overview of how it works.

So, tile maps are implemented in class SKTileMapNode,which as mentioned in the demo is just an SKNode.

It holds all the informationabout the tiles you've placed in it.

But to be able to place tiles, it first needs a tile set.

And the tile set is defined in the class SKTileSet.

It contains all the tile groups they can use.

Additionally, it also defines the type of tiles it can containand they can either be regular square grid tiles,isometric tiles or hexagonal tiles.

The tile groups are defined in class SKTileGroup.

And as we saw on the demo, a tile group is a setof related tiles, typically things like typeof terrain like grass or water.

The tile group also has the rulesthat define how the individual tilesin the group should be placed in the map.

And those rules are defined in the class SKTileGroupRule.

That also holds all the tile variants that workwith the pattern it describes.

And finally, each tile is describedthrough an SKTileDefinitionwhich defines the appearance of the tile.

Each one has at least one image and as you saw in the demo,they can be animated with multiple imagesto help bring life to your tile maps.

Additionally, the tiles can be flipped and/or rotated,allowing you to get more out of your existing assets.

Now, let's take a quick look at some codeso you can see how you can createand modify a tile map through the API.

The first step is to get the tile set you want to use.

Now, you can create these programmaticallybut it's a very involved process and we highly recommendthat you create them using the tile set editor.

Getting one you've already created is easy.

Just call this convenience initializer with the nameof the tile set that you want to use.

Then, to create a new tile map, we just need to provide itwith the tile set we want to use and the number of columnsand rows in the map along with the size of each tile.

If you want to start placing tiles in the map,we're going to need a tile group.

So, here we're just grabbing the first one that's definedin the tile set.

Once we have a tile map and a tile group we want to place,we can start setting individual tiles.

Here we're setting our tile groupon the tile at column 4, row 7.

We can also operate on the entire map at once.

Here we are filling every tile on the map with our tile group.

So, if you're creating and modifying tile mapsthrough the SpriteKit editor, you may not need to use anyof the API we just covered.

But unless you're using tile mapsfor entirely static backgrounds, you want to, probably wantto be able to query them.

There are a bunch of useful things you can do.

Say for instance you want to detect when a player movesover a particular tileand inject some custom user data you've seton the tile definition.

You can do this by first converting the player's positionand a tile maps frame of reference.

Then, you'd use the methods highlighted hereto get the column and row of the tilethat contains that position.

Next, you query the tile definition that existsin that column and row.

And finally, now that you've got the tile definition,you can check the user data for the custom valuethat you're interested in.

And then act on that data information however you want.

And the demo we just showed, we're doing thing very similarto this to detect when the player jumpson the big red button.

When they are over a tilewith a button custom user data property,we trigger the fireworks.

It's all a lot to take in,so let's quickly recap the features that tile maps offer.

By creating scenes from a set of small, repeating images,tile maps help you get more out of your art budget.

So again, if we have a 2 by 2 grid here, we have an index setof points from 0 to 8 in the grid layout.

This point, this point, sorry, the grid, and the cellsin this grid are quad with multiple triangles.

So, now from the computer graphics standpoint,what we have here is a list of vertices like changeand texture coordinates are actually going to be the same.

And then you just set the GPU to the interpolation for us.

So, this is fine and we could just to stop here,but initially what happens if I use my 3D emoji, the cat emoji,and I limit it to one quad which is basically a 1by 1 grid, so, come on.

Show me some distortion.

All right, go for it.

Yeah, it doesn't look quite right.

And the reason why is because we're only moving one point,so only one triangle is being distorted.

So, what can we do about this?

Well, we could make the grid more denseand upload more quads.

But then it's kind of tedious for youbecause you have more points to manipulate.

Especially because Sprite is pretty big.

It's almost as if you had to, you know,move pixels around, right?

So, no. As you have guessed, we have a trick here.

So, in SpriteKit, this is what we do.

Again, 2 by 2 grid.

We, so you only have to manipulate 8 pointsand as you do the distortionof the points moving around, this is what happens.

There we go.

So, we do automatic quad subdivision for you.

And this is great because it gives you a good trade-offbetween a high level of detailsand minimal quads using the distortion.

And again, you only manipulate 8 points.

So, here, as I move the points in the top left,you can see that I'm going a bit far so the levelof distortion is a bit high.

So we you do subdivision.

But at the bottom right, it's a bit more mild distortionso we only subdivide twice.

And because we want to provide you with more control,we actually allow you to specify the maximum numberof subdivision.

So, if I take my spaceship of earlierand I make it a bit distorted a little bit like that,you might see some distortion, sorry,some artifacts throwing up, such as this bump at the bottom.

So, if I go with only one subdivision,you might see artifacts.

But if you go up to 4, for instance,we clearly lose all the artifactsand have this nice smooth line at the bottom of the spaceship.

So again, this is perfect for you if you wantto tune your visuals and/or your performance.

Because of course, the less quad you have,the best for performance.

All right, this is cool but how do we do this in Swift?

Okay, so first thing.

Remember, we have a grid layout.

So, 8 points labeled from 0 to 8.

I'm going to provide a list of source position,a list of definition position, which are all float 2.

I can just create my warp geometry gridby providing the column, the rows, the destination positions,source positions, and then I just save it to my Sprite.

And we have the distortion.

And optionally you can also set subdivision levelto whatever you want with the default being 2.

And because it is SpriteKit, we also, I did a bunchof new SK actions for you to use.

So, making a transformation is as simpleas just saying SKActionWarp to and give a grid and a time.

Or, if you have something more complexsuch as a keyframe-based animation,you can provide a list of grids and a list of times.

All right.

So, okay, let's do a quick demo hereto show you Warp Transformation in action.

Alright. So, I'm actually goingto be using the same demo is Ross, but this time I'm goingto go on the left side because it'swhere all the cool stuff is.

All right, so we have this guy here,let's go explore for a bit.

Oh, look at that.

All right, so what we have here is 2 sets of animation.

We have one animation that makes the tree we go from leftto right and one that makes your mushrooms squash from, you know,a bigger size to smaller size.

And we also added some randomnessto make things rotate at different times.

It just makes your scene much more alive and fun to look at.

Okay, so let's keep it exploring here.

Okay, oh, look at this, there's a guy here.

Well, what's the best way to say hi in a platformer?

I think it's just to jump on them, right?

There ago.

So, what I did here is just as I jumped on this guyand then the collision body with the physics body,I'm just running in SKAction to make it, you know, squash.

All right, so that's pretty cool.

Let's go back to the slides.

So, Warp Transformations are very powerfuland enable a broad range of possibilities for your game.

So I really hope you're going to use them and have fun with that.

And next let's talkabout per-node attributes for custom shaders.

Shaders are awesome.

I really love shaders.

And there is a best way for youto make exact digital looks for your game.

In SpriteKit, we support custom shaders since the beginningwith SKShader class which is basically a frequent shaderwhich you apply to your nodes.

It comes with a few built-in symbols such as the time,the texture, texture coordinates and many more.

And if you have any specific needs,you can also specify it's an in SKUniformfor your special variables.

All right, so what about we build a game using a shader.

Okay, so I really love platformers.

So, what about some platforms.

Here we go, that's pretty good.

Okay, I want something cute, so what about a bunny.

Oh yeah, that's awesome.

I love this guy, he's pretty cute.

Right? You know what, I'm going to name my game Dark Bunny.

So let's put some bad guys and spikesand danger, just like that.

Right, that's better.

Unfortunately our bunny's going to be hit a few timesand because I want I don't want to make my game too hard,I'm going to have the help system health systemand the health bar, just like this.

And guess what?

The health bar is going to be shader.

You see it coming, right?

Okay. So, how would I go about making a shader, sorry,making a health bar here in SpriteKit?

So I add a Sprite for the health bar.

I have a shader to control the visualssuch as the blinking pattern, the callerand how filled in it is.

So, here our bunny has only half-lifeso it's only filled halfway.

And to control these visuals,I have a uniform that I call health.

It's going to be a flood value that there isfrom one being full-life to zero being pretty closeto not full-life.

Okay. But because games are usually more funwhen you have multiple players, let's put some guys here.

We can have up to three players.

To, that means at any time it can have someone who'sfull-life, someone who's half-lifeand someone who's pretty close to being knocked out.

Okay, so again, In SpriteKit, fairly simple.

I have my Sprite, my shader, my uniform.

But now how would I go if I wanted to make itwith multiple players?

Well, I have to do this.

Yeah, I have to duplicate my shaderbut that just doesn't make sense, right?

Why do we have to do that?

That's just bad.

And it's bad because, while it's the same shader, right?

And it's going to break the batching mechanism,meaning more draw calls.

And it's just too complicated, right?

Well, if you wanted to instead do something like this,I have only one shader and it is shared between sprites.

And, well, starting this year, you can just dothat using attributes.

With custom attributes, you can just create an attribute,attach it to your shader, and then directly set the valueson the nodes themself.

So, here I have a custom attributes name healthand I just set the health value on the Sprite itself.

It's super simple.

In Swift, this is what it looks like.

I'm creating my attribute using the SK attribute class.

I give it a name, so here, health, the type, float.

I attach it to my shader.

Because my shader only uses one attribute,I'm giving a list of one attribute.

Lastly I can directly set the values of the Sprite.

So, here play one has only 0.2 percent of life left,so I'm just doing set attribute value for attribute name health.

So, this is very convenient and simple if you're dealingwith per-node customization and shaders.

All right.

So, now let's talk about a few platform specific items.

And the first one being focus interaction on Apple TV.

So, for those of you who've already been making appsfor Apple TV, you already know what focus interaction is.

But for those of you who do not,let me just recap what happened last year.

Last year we introduced the new Apple TV,tvOS and its brand-new user interface as wellas the Siri remote and its touchpad.

So, now one of the major differences between iPhoneand Apple TV is interaction.

So, on iPhone the user's going to directly interacton the phone by touching the screen.

On Apple TV on the other hand,the user will always have the controller in his handbetween him and the interface.

And we actually call this interactionfocus-based interaction.

So, let me show you what happens if I was to move my cursorin the main menu of the Apple TV with focusing.

So, as you can see, we only have one element focus at a timeand scrolling ware is tuned to reader responsiveand react your fingertip very well.

So, in fact, this is very important.

And it's so important that we built our systemand our frameworks using focus interaction in mind.

So it means that if you happen to make an app using UIKit,you don't need to re-create the focus system interaction.

All you have to do is just lay out your views,say which one are focusable, and then you're done.

It's very simple to useand provides a consistent user experience, whether you arein the main menu of Apple TV or in your application.

And as a bonus, we support of course the Siri remote,game controllers and many Bluetooth controllersand many, many more.

If you want to learn more about focus interaction on Apple TV,there is a session this weekand you can find many more resources online.

All right, so the big news here isthat we have SpriteKit support for focus interaction.

So, that's pretty great.

Yeah, thank you.

[ Applause ]

So, this is actually pretty great for any kindof user interface in your game such as game menusor you could have subbuilder in our game using focussuch as a chess game or a game or many more.

And the cool thing here is that it's just so much simpler.

What you can see here is DemoBot.

It's a sample code app from last year and it usedto be for iOS and macOS.

We did a port to tvOS and it just felt so much betterto remove all this code for the interaction and the navigation.

It was just so much cleaner, so much simpler.

Speaking of DemoBot, let's see how we would goabout creating this menu right there using SpriteKitand focus interaction.

The first thing you need to know isthat UIKit introduces new protocol called UIFocusItemwhich conforms to the UIFocusEnvironment.

This extends the focus system to nonview item.

So, as you have guessed,now SKNode is actually conforming to that as well.

So, the first thing you need to do is make a subclass.

So, here for my menu element,I'm going to use some rectangles.

I'm going to use a SpriteNode.

So first, make a subclass.

Second, you need to override that canBecomeFocused methodto true so that your node is focusable.

Next you have to obtain your node into the focus systemand to do that, you just haveto set the isUserInteractionEnabledto true.

And the last thing you needto do is override the data did focus and context,which is going to give you updates on your focus updates.

So, you can override this in your view, in your sceneor any node that actually makes sense for your app.

So, here the context subject gives me the next focused item,the previously focused item, and in my case I'm going to lookfor a menu element and if I'm hitting this,I can just run some SKAction.

So, this is how it looks like in action.

As I finish the game, I am being prompted with the menuand I can just use my Siri remote to scroll throughor game controller, it will just work as well.

And I have the same feel as it would havein the main menu on Apple TV.

Again, very simple, very powerful.

We recommend highly for you to use it.

All right, a pretty big one here.

SpriteKit on Apple Watch.

So, as you have seen, for watchOS 3.0,we brought some frameworks to Apple Watch.

And yeah, SpriteKit is available.

So, that means that now you can do very interactive applicationusing this high-performance 2D graphics platform.

And of course we bring all the stuff you lovesuch as particles, animation, physics, actionsand all the editors are compatibleso you can use the scene editor.

You can use the particle editor.

We have all the editing tools such as new performance gaugethat Ross just told it out.

All of this is just working.

So, a typical SpriteKit game looks like this.

I have an SKView and then it contains an SKScenewhich itself contains multiple nodes.

Such as the SpriteNode, a ShapeNode, whatever.

On Apple Watch, though, there's no notion of view.

Instead, you present your content usingWatchKit interface.

And in fact it's going to be the major difference here.

So, instead of using an SKView,I will be using a WKInterfaceSKScene.

It looks pretty much it.

All right, so let's see how we would go from an existing gameon iOS to make it a support for watchOS.

So, that's some code,that's some sample code for a game on iOS.

So, pretty typical, I have my view.

I'm doing some set up on my scene and everything.

All right.

So, what I have to do now is just click on file.

new, target, select the template I want.

So here I'm going to use a game app template for my target.

Click next.

Give it the best name ever, so I'm goingto call it Apple Watch Game.

And then click next.

And you're done.

No, seriously, you're done.

Xcode is going to create all the files you needsuch as the storyboard and the interface controller as well.

And if you take a look at the storyboard, we actually wiredup everything for you already.

So, this guy is actually connected to my outletas you can see at the top here.

And you're just ready to go.

You have your WKInterfaceSceneand you have the same stuff you had before.

So, it's very simple.

All right, so some compatibility now on the Apple Watch.

There's no SKAudioNode on Apple Watchbut of course you can still play a sound usingSKAction playSoundFileNamed.

There's no SKVidioNode but you can use theWKInterfaceMovie instead.

And lastly if you're doing a special effect using CI filters,you can still do them but you have to use an SKShader.

So, we're really excited about what you can dowith Apple Watch in SpriteKit.

It's going to enable you to make even more interactiveand fun apps with the platform.

All right.

Thank you.

[ Applause ]

So, since we have more and more platforms, let me just talkabout a few best practices for SpriteKit.

The first one being Asset Catalog.

Use Asset Catalog.

It's great.

It works very well with SpriteKit and it provides a lotof cool features for your gameto make things simple and faster.

The first thing being the Sprite Atlas.

In Asset Catalog, you can make a texture atlaswhich is a fundamental piece of optimization for tile mapswhere you have multiple textures combined into one big texturewhich reduces the number of draw calls to a very low amount.

Next we have support for multiple asset sizes such as,you know, 1x, 2x, 3x, which is great for multiple platformssuch as the iPad, iPhone, watchOS.

And again, you don't need to do any conditionals, like oh,is this that platform or this one.

No, you just call your texture and you're done.

We do rest for you.

We have support for on-demand resourcewhich is fundamental for tvOS.

And lastly we do app slicing,meaning that if you have resourcethat are specific platform, we'll be only using thisfor the bundle and then compiling theminto the runtime binaries as small as possiblewhich gives you a very small bundleand a small download on the App Store.

So yeah, Asset Catalog is great, go for it.

Next, about performance and battery life.

So, a big change in SpriteKit this year isthat we do not render all the time.

Now, we only render when your scene is dirty.

So, if something change, we will be issuing some draw callsbut if nothing changed, we will not be doing anything.

So, if you're using any debiting toolssuch as the performance gauge,you might see the needle not moving.

And it's actually a good thing because it meansthat you are not rendering anything new.

If you need to control the frame weight,you we also have a couple ways for you to do that.

The first one being preferredFramesPerSecondon SKView.

At any time, you can just set the frame rateto whatever you want, which can be convenient for, you know,if you have the menu and you have a low frame rate need here.

And when you come back to your game, you can go back to 60or 30 FPS based on your performance needs.

The second one is a bit more advanced.

It's a delegate in SKViewwhich is giving you thisShouldRenderAtTime methodwith the absolute time of the game.

So, this method is going to be called at each frameand you can decide based on the time whether yesor no you want to render the frame.

So, this gives you a very fine-grained controlof the rendering for your game.

All right.

And that's it.

So, what's new in SpriteKit?

A lot this year.

The first being the scene outline view, which allows youto manipulate your scene graph from Xcode.

The GameplayKit integration.

If you're already using GameplayKit component,now you can just set them on your nodes directly using Xcode.

FPS high performance gauge which gives you a real-time breakdownof your scene performance, very, very useful.

Tile maps for complex yet high performance levels.

Warp Transformation to make you game have funand complex animation using just a grid of points.

And of course focus interaction on Apple TV and SpriteKiton Apple Watch, which is the big one for this year.

If you want to learn more,you can go to the developer.apple.com website.

We have a lot of sessions for gaming this year but mostof them are already done.

But you can still see them online by goingon the website we I just showed earlier.

And tomorrow you can go to What's New in Game Centeras well as Game Technologies for Apple Watch if you wantto learn more about these platforms and frameworks.

All right.

[ Applause ]

Apple, Inc.AAPL1 Infinite LoopCupertinoCA95014US

ASCIIwwdc

Searchable full-text transcripts of WWDC sessions.

An NSHipster Project

Created by normalizing and indexing video transcript files provided for WWDC videos. Check out the app's source code on GitHub for additional implementation details, as well as information about the webservice APIs made available.