Transcript
[ Music ]
[ Applause ]
>> Hello, everyone.
And welcome to What's
New in SpriteKit.
I'm Ross. I'm an engineer here
in the Games Technology
Team at Apple.
And I'm really excited
to be able
to show you what we've been
working on for the past year.
Before we jump into talking
about the new features
we're introducing this year,
I'd like to take a moment to
quickly recap what SpriteKit is
for 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 easy
to use while still
offering great performance.
So, there are as few barriers
as possible between you
and 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 say
that is available
on watchOS as well.
Any app, I know,
isn't that awesome?
[ Applause ]
Any App that uses SpriteKit
automatically gets access
to the latest version of
the framework available
without 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 editor
which lets you preview your
scenes directly from the editor
and lay them out visually.
It offers timeline-based
animation which allows you
It offers timeline-based
animation which allows you
to bring life to
your games along
with our robust particle editor.
It's fully integrated
with the Asset Catalog,
so you can leverage
features like app thinning
and on-demand resources
without having
to jump through any hoops.
And this year we're
introducing tile ap editing
and GameplayKit integration,
both of which we'll talk
about a little later on.
And finally, SpriteKit is fully
Metal-backed on all devices
that support it,
so you get access
to its great performance
benefits automatically
without having to do anything.
So, this year we're continuing
to introduce great new features
that make it easier
than ever for you
to 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 integral
to 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 relate
to one another is
extremely important
to one another is
extremely important
for effective scene management.
In Xcode 7, this
was accomplished
through the Jump Bar.
The Jump Bar is designed to
make navigating between files
in 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 nodes
but it would be nice if we
could see the entire hierarchy
at 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 nodes
in your scene and
their parent-child
relationship 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 relationship
of 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 node
or drag a child out
from its parent
to break that relationship.
We also have the ability
to lock and hide nodes.
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 easier
when 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 objects
and you want to access some
nodes that might be behind them.
So, all these features make the
scene outline view really useful
and it's making, makes managing
your scene much, much easier.
So, next I'd like to talk a
little bit about how we've begun
to integrate the GameplayKit
into the SpriteKit editor.
So, last year we
introduced GameplayKit,
a brand-new framework that
offers ready to use solutions
for problems that are commonly
encountered when creating games.
One of the features included
last year is entities
and components, which is a
design pattern that's focused
on modularity and reusability.
Components encapsulate behavior
and you assign them to objects
or entities to change
their behavior.
or entities to change
their behavior.
And you do this without
having to write specific code
for every object in your scene.
Now, we're not going
to go into great detail
about how these work but it's
useful to think of components
as code building blocks that
you assemble in different ways
to create objects that
behave in different ways.
Typically, you might have a
component that represents health
for objects that can be damaged.
Or a component that has
physics data for objects
that can collide
with one another.
Or a component that
allows an object
to be a player controlled
by player input.
Components are really
powerful and allow you
to control how your
objects behave.
And now we're bringing
entities and components
into the SpriteKit editor.
You can assign components that
you create directly to the nodes
from within your scene
from the new entities
and components panel
of the inspector.
Additionally, you can
choose to expose properties
on the custom components
you create
and those will then
appear in the editor
and you can tweak
them for each node.
The best part about all this is
if you're already using
GameplayKits, entities
and components, we're now
doing all the hard work for you
and you can do all of your
object composition straight
from the editor.
Another great feature
that GameplayKit
introduced was pathfinding.
Pathfinding is all about finding
the best route from point A
to point B and it does this
by operating what's
called a navigation graph.
Navigation graphs
are collections
of nodes joined together
by connections.
And they describe how an object
can move through your scene
without colliding
with any obstacles.
And now we've integrated
navigation graphs
into the SpriteKit editor.
So, you can create and edit
them directly in your scene.
You can add and remove
navigation nodes
and make connections
between them simply
by clicking in the editor.
And you can leverage the
graph you create in code.
Creating the graph this
way allows you to quickly
and easily define how entities
can navigate your scene,
and 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 feature
that helps you get the most
out of your performance
of your game, the FPS
performance gauge.
You may have used the
FPS report in Xcode 7.
As you're running your App,
you're provided a number
of real-time performance
statistics,
including your frame
rate, GPU utilization,
and CPU/GPU frame time.
And this is really helpful
for analyzing performance
but further granularity
would be great.
Now in Xcode 8, you get,
also get a timeline history
of your SpriteKit apps time,
frame time for both
the CPU and the GPU.
Additionally, it breaks down
the CPU time so you're able
to see how much time is
being spent rendering,
running the update loop,
evaluating the actions
running the update loop,
evaluating the actions
of physics and idle time.
This information can be
immensely useful in determining
where you need to focus your
efforts to improve performance.
The FPS performance
gauge is designed
to help you improve your
games on our mobile platforms.
It's available for use with
iOS and watchOS applications.
So, we've covered some great
additions to the editor
and now I'd like to change
gears a little bit and talk
about a new feature that's
found in both the editor
and the framework, tile maps.
So, for anyone who
may not be familiar
with what tile maps are,
they're simply a grid
of evenly spaced images.
And they're great for piecing
together scenes from a set
of small, repeating
images, called tiles.
Think of tiles as, tile
maps is a jigsaw puzzle
and tiles as the pieces.
Individually they don't look
like much but put them together
and you can easily create
large, detailed scenes.
So, before we get into the
details of the feature,
let's talk a little bit about
why I might want to use them.
let's talk a little bit about
why I might want to use them.
Building scenes from small
repeating images is pretty
common when creating games.
And without tile maps,
if you wanted to do this,
you'd have to manually place
each individual image by hand.
And this totally works.
And using a set of
small images is great
for keeping memory overhead low.
They can also be rearranged
to make adjustments
to how the scene looks.
However, copy pasting
and manually aligning each
individual image is really
tedious and time-consuming.
It can also cause your scene to
get cluttered with lots of nodes
which quickly makes things
really difficult to manage.
So instead you could use large,
more detailed images
with lots of detail.
A sample game released
last year,
DemoBots, used this approach.
So, let's say one large image
in your scene is
practically instant
and that definitely keeps
your scenes clutter free.
But if you want to
change how things look,
you need to make modifications
to your source assets.
you need to make modifications
to your source assets.
Plus, large images
require more memory
and if you want more
variety in your game,
you'll need additional
large assets
which 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 node
in your scene.
They can be quickly modified.
Say for instance I want
to change the sand
tiles here to water.
All I have to do is
tell the tile map
to change the type
and it's done.
And by using a set of smaller
tile images, tile maps allow you
to have large, detailed scenes
with minimal memory overhead.
Tile maps are also
great for lots
of 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 instead
of just telling you that how
they work, we're going to jump
of just telling you that how
they work, we're going to jump
into a demo so I can show you.
So, here we are in
the SpriteKit editor
and 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 simply
double-click on it.
And that brings up our
new tile editing bar
at the top of the screen here.
And by default, we have
the brush tool selected
which allows us to
paint into our tile map.
And so the paint, all we
have to do is simply click
and 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 here
and that shows us all the
different tiles I have available
for placement.
So, here let's place edge
tiles and a corner tile here
and a couple more edge tiles.
And we can see how
can easily place,
piece together your
scenes this way.
piece together your
scenes this way.
But individually placing
all these images is still a
bit tedious.
So, I'm going to show you
better way of doing this.
So, here we're just going
to a place a new tile
map in our scene.
And by default on our tile
maps, we have a feature
in the inspector enabled
called enable automapping.
And what this does is when I
start to edit my map and I go
to select my tiles, you'll see
that instead of individual tiles
for placement, we now have these
groups of tiles here organized
into 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 click
and place the center
tile in addition
to all the edge tiles
automatically.
And this is really
great for quickly
and easily creating your scenes.
Now, instead of having to
place each individual edge tile
and corner tile, we can just
paint and it automatically sets
and corner tile, we can just
paint and it automatically sets
up each of the tiles that we
need here without having us
to 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 types
that we have, like grass,
dirt, stone, and water.
And you can see that
they're arranged
so 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 works
with our automapping is to
drag the tiles we want to use
into their corresponding
slots here.
You can see that we
have those silhouettes
that 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 quick
And we just drag-and-drop
them in and it's super quick
and 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 group
that already works
with automapping.
You don't have to
do anything extra.
But there's a little
more that we can do
with the tile groups as well.
So, I'll go back to our tile,
we'll go to another tile set
that I premade over here.
And at first glance
it looks the same.
But then when I start clicking
on these individual tiles here,
But then when I start clicking
on these individual tiles here,
you can see that we have a bunch
of 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 each
of 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 common
than the white flowers and more
common than the blue flowers.
So, now let's go
back to our scene.
We'll create another tile map
and we'll assign our
advanced tile set to it.
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 you
to achieve a lot of different
looks without having to do a lot
of 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 another
to make it make it appear
as if we have more
versatile tile assets
than we actually have.
So, it looks like these
assets are designed
to 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.
they just naturally
transition to the grass.
And so we move it on
over onto the dirt
to achieve the same effect.
Now looks as if they're
transitioning onto the dirt.
So, this allows you to
get a lot more mileage
out of your art assets.
If you just have them
transition to being transparent
on the edges, you can
layer them together and,
any way you can conceive
allowing you
to get a lot more flexibility
out of the art that you have.
So, another thing that we can do
with 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 button
and if you look closely
you can see the shore line
on 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 straight
from our tile set editor.
And I can select
one of the variants
and you can see we just have, so
we have a list of all the frames
and you can see we just have, so
we have a list of all the frames
that 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 animate
with 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 maps
while they're like this although
it gets a little awkward
when 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 set
up on my tile map by moving
the scale and rotating it.
up 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 rotate
and then we put it back.
And so you see that
we have multiple ways
of bringing animation
to our tile maps
which can be really useful.
In fact, we can leverage this
layering and the animation
to create some interesting
effects.
So, in this scene, I've got
three different layers set
up 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 rates
and this achieves the
appearance of depth,
an effect that we call
parallax scrolling.
And all I'm doing here is simply
moving the foreground layer
at one rate of speed, the middle
ground layer at half that speed
and 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,
So, in addition to having simple
square tiles in our tile maps,
we also have support
for hex tiles
and isometric tiles as well.
So, you have lots of flexibility
in terms of the appearance
that you can achieve
for your game.
So, speaking of which,
let's take a look
at 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 going
on in the background.
And you'll note that I'm
colliding with the tiles here.
And I achieve this by
leveraging custom user data
that 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 you can see that we have
some user data over here.
And I just have a
value called edgeTile
which is a Boolean,
and I set to 1.
So, in code, I'm going
through the tile map
in our platform demo
here, and I'm looking
for all of these edge tiles.
And whenever I find one,
I create some physics data
to allow the player
to collide with it.
And since it is just in our tile
map here, say I wanted to get
over this large wall here.
When I run the game, you'll see
that my guy can't actually jump
high enough to get over it.
And he really wants to
because that red button
over there looks
really tempting.
I really want to
push that thing.
So, since we're just generating
our physics data from our tiles
and our user data, all we
can do is just going here
and erase these tiles and
build and run our game again.
and 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 pulled
from 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 information
about the tiles you've
placed in it.
about 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 contain
and 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 set
of related tiles,
typically things like type
of terrain like grass or water.
The tile group also
has the rules
that define how the
individual tiles
in 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 work
with the pattern it describes.
And finally, each
tile is described
through an SKTileDefinition
which 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 images
to help bring life
to your tile maps.
to 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 code
so you can see how
you can create
and 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 programmatically
but it's a very involved
process and we highly recommend
that you create them
using the tile set editor.
Getting one you've
already created is easy.
Just call this convenience
initializer with the name
of the tile set that
you want to use.
Then, to create a new tile
map, we just need to provide it
with the tile set we want to
use and the number of columns
and 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 defined
in the tile set.
Once we have a tile map and a
tile group we want to place,
we can start setting
individual tiles.
we can start setting
individual tiles.
Here we're setting
our tile group
on 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 maps
through the SpriteKit editor,
you may not need to use any
of the API we just covered.
But unless you're
using tile maps
for entirely static backgrounds,
you want to, probably want
to 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 moves
over a particular tile
and inject some custom
user data you've set
on the tile definition.
You can do this by first
converting the player's position
and a tile maps frame
of reference.
Then, you'd use the
methods highlighted here
to get the column
and row of the tile
that contains that position.
Next, you query the tile
definition that exists
in that column and row.
And finally, now that you've
got the tile definition,
And finally, now that you've
got the tile definition,
you can check the user
data for the custom value
that 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 similar
to this to detect
when the player jumps
on the big red button.
When they are over a tile
with 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.
Overall, you'll need
fewer assets
and it also brings the benefit
of reduced memory overhead.
They support animation, both in
the form of animated tile images
and actions at the node level.
Tile maps are designed to be
layered on top of one another,
which further increases the
versatility of your art assets
and enables effects
like parallax scrolling.
They're extremely
flexible and great for lots
They're extremely
flexible and great for lots
of different art styles
and types of games.
Large tile maps are
automatically divided
into smaller chunks
and only the parts
that are currently
visible are drawn
which provides a big
performance boost.
Additionally, if all the tile
images used by the tile map are
in the same Asset
Catalog, Sprite Atlas,
each chunk will batch all the
tiles together and render them
with a single draw call.
Tile maps also come in
a variety of flavors,
standard square grids, isometric
tiles and hexagonal tiles.
On the tool side, editing
tile maps is simple and easy.
Just point and click to
place tiles in your map.
Automapping does all the hard
work for you so you don't need
to individually place
every edge and corner tile.
And you can of course
turn it off
to do the detail work by hand.
Finally, creating new tile
sets is extremely quick.
Just drag-and-drop the
images you want to use
Just drag-and-drop the
images you want to use
into their corresponding
slots in the tile set editor
and you're good to go.
So, that covers tile sets.
Now I'd like to invite
my colleague, Clement,
up to talk to you about the rest
of the awesome features
we have this year.
[ Applause ]
>> Thank you, Ross.
All right, some cool
stuff, right?
So, hello.
My name is Clement.
I'm a software engineer
here at Apple
in the Game Technologies Team.
And guess what?
We actually have
more to talk about,
so let's see what else
is new in SpriteKit.
And the first up is
Warp Transformation.
So, currently you have many ways
to do transforms on your Sprite.
You can apply a scale to make
things bigger or smaller.
You can apply a rotation to
make it spin around the axis.
Or if you like to
get your hands dirty,
you can also write
a custom shader
you can also write
a custom shader
such as this low
resolution shader
that you can see right there.
This year we're very happy
to announce a new kind
of transformation called
Warp Transformation.
Warp Transformation allows you
to define a custom distortion
using degrees of points.
So, for example if we
take a 2 by 2 grid,
it's basically 8 points
and what you can see here
in green is our source position,
also called reference position.
Then I get a second grid here
but it's going to
mean a distortion.
So, what you see here is
my definition position
and as you can see,
I move the points
around to create a distortion.
So now if I apply like
this to my spaceship
of earlier, this is what I get.
As you can see, we get a nice
and smooth distortion
of a spaceship.
And the distortion is going
to follow the displacement
between the source and
disposition position.
So, let me show you some
examples of what you can do
with Warp Transformation.
And my first example
is a squash affect.
So, what I'm doing here is just
bring the points towards the
center to create a
cool squash effect.
Next, I had a stretch effect.
I am pulling the
nose of the spaceship
and making it wiggle
from right to left.
It can look a bit funny.
And the next big thing here
is keyframe-based animation.
So, usually in 2D games
if an artist is going
to make static frames
for animation.
And it's a pretty long
process, especially if you need
to iterate a new
design multiple times.
And Warp Transformation,
making animation is as simple
as just moving points around.
And if you have any
complex scenarios
such as a keyframe-based
animation,
you can just provide multiple
grades and everything is going
to be done at one time.
You no longer need
static frames.
So, now let me explain you
the basic concept behind
Warp Transformation.
So again, if we have a 2 by 2
grid here, we have an index set
of points from 0 to
8 in the grid layout.
of points from 0 to
8 in the grid layout.
This point, this point,
sorry, the grid, and the cells
in this grid are quad
with multiple triangles.
So, now from the computer
graphics standpoint,
what we have here is a list
of vertices like change
and 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 1
by 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 dense
and upload more quads.
But then it's kind
of tedious for you
because you have more
points to manipulate.
Especially because
Sprite is pretty big.
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 points
and as you do the distortion
of 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-off
between a high level of details
and 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 level
of distortion is a bit high.
So we you do subdivision.
But at the bottom right, it's
a bit more mild distortion
so we only subdivide twice.
And because we want to
provide you with more control,
we actually allow you to
specify the maximum number
of subdivision.
So, if I take my
spaceship of earlier
So, if I take my
spaceship of earlier
and 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 artifacts
and have this nice smooth line
at the bottom of the spaceship.
So again, this is perfect
for you if you want
to 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 grid
by 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 level
to whatever you want
with the default being 2.
to whatever you want
with the default being 2.
And because it is SpriteKit,
we also, I did a bunch
of new SK actions
for you to use.
So, making a transformation
is as simple
as just saying SKActionWarp
to and give a grid and a time.
Or, if you have something
more complex
such 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 here
to show you Warp
Transformation in action.
Alright. So, I'm actually going
to be using the same demo is
Ross, but this time I'm going
to go on the left
side because it's
where 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 left
to right and one that makes your
mushrooms squash from, you know,
to right and one that makes your
mushrooms squash from, you know,
a bigger size to smaller size.
And we also added
some randomness
to 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 guy
and 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 powerful
and 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 talk
about per-node attributes
for custom shaders.
Shaders are awesome.
I really love shaders.
And there is a best way for you
to make exact digital
looks for your game.
to make exact digital
looks for your game.
In SpriteKit, we support custom
shaders since the beginning
with SKShader class which is
basically a frequent shader
which 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 SKUniform
for 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 spikes
and danger, just like that.
Right, that's better.
Unfortunately our bunny's
going to be hit a few times
and because I want I don't
want to make my game too hard,
I'm going to have the
help system health system
and 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 visuals
such as the blinking
pattern, the caller
and how filled in it is.
So, here our bunny
has only half-life
so 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 is
from one being full-life
to zero being pretty close
to not full-life.
Okay. But because games
are usually more fun
when 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's
full-life, someone
who's half-life
and 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 it
with multiple players?
Well, I have to do this.
Yeah, I have to duplicate
my shader
Yeah, I have to duplicate
my shader
but 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 do
that using attributes.
With custom attributes, you
can just create an attribute,
attach it to your shader, and
then directly set the values
on the nodes themself.
So, here I have a custom
attributes name health
and 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, 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 dealing
with 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 apps
for 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 well
as the Siri remote
and its touchpad.
So, now one of the major
differences between iPhone
and Apple TV is interaction.
So, on iPhone the user's
going to directly interact
on the phone by touching
the screen.
On Apple TV on the other hand,
the user will always have
the controller in his hand
between him and the interface.
And we actually call
this interaction
And we actually call
this interaction
focus-based interaction.
So, let me show you what happens
if I was to move my cursor
in the main menu of the
Apple TV with focusing.
So, as you can see, we only
have one element focus at a time
and scrolling ware is
tuned to reader responsive
and react your fingertip
very well.
So, in fact, this
is very important.
And it's so important
that we built our system
and 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 use
and provides a consistent user
experience, whether you are
in 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 controllers
and many, many more.
If you want to learn more about
focus interaction on Apple TV,
If you want to learn more about
focus interaction on Apple TV,
there is a session this week
and you can find many
more resources online.
All right, so the
big news here is
that we have SpriteKit
support for focus interaction.
So, that's pretty great.
Yeah, thank you.
[ Applause ]
So, this is actually
pretty great for any kind
of user interface in your
game such as game menus
or you could have subbuilder
in our game using focus
such 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 used
to be for iOS and macOS.
We did a port to tvOS and
it just felt so much better
to 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 go
about creating this menu
right there using SpriteKit
and focus interaction.
The first thing you
need to know is
that UIKit introduces new
protocol called UIFocusItem
that UIKit introduces new
protocol called UIFocusItem
which 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 method
to true so that your
node is focusable.
Next you have to obtain your
node into the focus system
and to do that, you just have
to set the
isUserInteractionEnabled
to true.
And the last thing you need
to 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 scene
or 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 look
for a menu element and
if I'm hitting this,
I can just run some SKAction.
So, this is how it
looks like in action.
So, this is how it
looks like in action.
As I finish the game, I am
being prompted with the menu
and I can just use my Siri
remote to scroll through
or game controller, it
will just work as well.
And I have the same
feel as it would have
in 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 application
using this high-performance
2D graphics platform.
And of course we bring
all the stuff you love
such as particles,
animation, physics, actions
and all the editors
are compatible
so you can use the scene editor.
You can use the particle editor.
We have all the editing tools
such as new performance gauge
that 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 SKScene
I have an SKView and then
it contains an SKScene
which 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 using
WatchKit 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 game
on 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 going
to 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 need
such as the storyboard and the
interface controller as well.
And if you take a look at the
storyboard, we actually wired
up everything for you already.
So, this guy is actually
connected to my outlet
as you can see at the top here.
And you're just ready to go.
You have your WKInterfaceScene
and 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 Watch
but of course you can
still play a sound using
SKAction playSoundFileNamed.
There's no SKVidioNode
but you can use the
WKInterfaceMovie 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 do
with Apple Watch in SpriteKit.
It's going to enable you to
make even more interactive
It's going to enable you to
make even more interactive
and fun apps with the platform.
All right.
Thank you.
[ Applause ]
So, since we have more and more
platforms, let me just talk
about 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 lot
of cool features for your game
to make things simple
and faster.
The first thing being
the Sprite Atlas.
In Asset Catalog, you
can make a texture atlas
which is a fundamental piece
of optimization for tile maps
where you have multiple textures
combined into one big texture
which 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 platforms
such 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.
No, you just call your
texture and you're done.
We do rest for you.
We have support for
on-demand resource
which is fundamental for tvOS.
And lastly we do app slicing,
meaning that if you
have resource
that are specific platform,
we'll be only using this
for the bundle and
then compiling them
into the runtime binaries
as small as possible
which gives you a
very small bundle
and 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 is
that 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 calls
but if nothing changed, we
will not be doing anything.
So, if you're using
any debiting tools
such as the performance gauge,
you might see the
needle not moving.
And it's actually a good
thing because it means
that 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
preferredFramesPerSecond
The first one being
preferredFramesPerSecond
on SKView.
At any time, you can
just set the frame rate
to 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 60
or 30 FPS based on
your performance needs.
The second one is a
bit more advanced.
It's a delegate in SKView
which is giving you
thisShouldRenderAtTime method
with the absolute
time of the game.
So, this method is going
to be called at each frame
and you can decide based
on the time whether yes
or no you want to
render the frame.
So, this gives you a
very fine-grained control
of 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 you
to 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 breakdown
of your scene performance,
very, very useful.
of your scene performance,
very, very useful.
Tile maps for complex yet
high performance levels.
Warp Transformation to
make you game have fun
and complex animation using
just a grid of points.
Per-node attributes
for custom shaders
if you're using per-node
customization and building
of shaders, very convenient.
And of course focus interaction
on Apple TV and SpriteKit
on 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 most
of them are already done.
But you can still see
them online by going
on the website we I
just showed earlier.
And tomorrow you can go to
What's New in Game Center
as well as Game Technologies
for Apple Watch if you want
to learn more about these
platforms and frameworks.
All right.
[ Applause ]