WWDC2015 Session 604

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[Applause]
>> TIM ORIOL: Hi and welcome
to What's New in SpriteKit.
We have a lot of great new
features and enhancements
to tell you about today.
I know that there's a few people
in the audience that are new
to SpriteKit and I just wanted
to take a few minutes first
to recap what we're all about.
So SpriteKit is Apple's 2D frame
work for games and graphics.
And we provide you tools
like integrated physics,
particle simulations, actions
and animations and,
of course, Sprite.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and animations and,
of course, Sprite.
We set out to design
SpriteKit to be both powerful
but also really,
really easy to use.
We wanted someone who's maybe
even has never written a game
before to be able to come to
our platform, pick up SpriteKit
and be up and running
in no time.
We really wanted to deliver
something that lets you focus
on what you do best and
that is making great games.
We designed SpriteKit to work
across iPhone iPad and Mac
and in addition to this media
you can deliver your app
to multiple platforms, it also
means that you can prototype
and test all of your
SpriteKit games directly
on the Mac before you
even put it on a device.
and with SpriteKit the framework
is really only half the story.
Since the beginning we spent
a lot of effort on our tools
and we have continued to
invest in that year after year
to allow you to edit your
particle affects as well
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to allow you to edit your
particle affects as well
as entire scenes and new this
year actions and animations
as well, directly inside
of Xcode before you even
write a line of code.
So now lets talk about the new
additions to the framework.
The first one was requested
by developers quite a bit
and this has to do with the
Viewport and the Viewport is
when we're talking about which
portion of your scene is visible
in a SpriteKit view at any time.
The way this works now is if
you want to move your camera,
you would have to realign
every piece of geometry
within your game, or if you
wanted to follow along one
of your hero characters
through your game world,
you need to do those
calculations.
Now this works, but it is
not as intuitive as we'd like
and if you're also
running physics simulations
on those game entities while
you're changing their actual
position, you can get
artifacts from that.
We thought we could do
something a little bit better.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We thought we could do
something a little bit better.
We would like to
introduce SKCameraNode.
With the CameraNode we allow you
to simply specify which portion
of your view is going to be
visible and the camera does this
by representing the center
of the visible content
in your scene.
So now you can move the
CameraNode through your scene
with the same logic
that you move all
of your other game
entities through your scene.
We have a property on
SKScene that will allow you
to select the camera you'd
like to use so these scenes,
you can have multiple
cameras throughout your scene
and you can select the
active one via property.
If you leave the property
as its default value of nil,
we get the same experiences
you have today
and all the SpriteKit
rendering is as it was.
But the best feature of all
about SKCameraNode
is that it's a node.
And this means that you get
access to all the great features
in SpriteKit for nodes.
You have access to
our actions library
so you can now run
actions on the camera.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You have access to
our constraint system
so you can apply
constraints to the camera.
You can make it align
with game entities,
you can make it always stay
within a certain distance
of objects within your game.
Beyond just moving the camera
you now have access to rotation
and scale via those
properties on the node.
So for example, in a game like
this, I may start the camera off
to the side, and I might
apply a few move animations
to reveal the bad guys in
my scene before centering
on the hero character.
And then I can apply a
scale action if I want
to zoom the camera in or out.
I can even use our follow
path action if I want
to have the camera follow
a Bezier [Unintelligable]
and if I really want to make my
user sick I can spin the camera
around and throw it
around the scene.
So you really have full
control over what part
of your game is visible
now in SpriteKit
and I think this is going
to be a great addition
to your toolkit.
[Applause]
>> TIM ORIOL: In
addition to camera,
we've also done work with audio.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
we've also done work with audio.
We're adding an SKAudioNode to
allow you to add positional,
environmental sound right
in your SpriteKit game.
[Applause]
>> TIM ORIOL: We're leveraging
Apple's powerful AV audio engine
framework that we
introduced last year.
If you're not familiar
with this,
it lets you specify
your tone soundscape
and play sound emitters
within that environment
and it will play them
back in correspondence
to a listener position
that you specify.
In SpriteKit we're going to
do all the wiring up for you.
All you have to do is specify
the sound asset that you want
to play back via
file name or URL
and we'll use the AudioNodes
position in your scene,
along with the listener
point that you specify,
to wire up the whole audiograph
and give you really easy access
to immersive, positional
audio in your game.
If you want to dig a little
deeper and get your hands-on,
you can access the
underlying AVAudioNode as well
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
you can access the
underlying AVAudioNode as well
from a property on the
node and go to town
and set any settings
you want on there.
To demonstrate the types of
affects you'd be able to add
to your SpriteKit game
using this new technology,
I'm going to have an
example scene here
where I've got my goblin.
I'm going to make
him my listener,
so I set my listener
position there.
I have added a fireball
to my scene.
This is going to
be my sound source,
so I've added it
as an SKAudioNode.
When I play this back
listen how the audio affects
as the fireball moves
around the scene.
You should notice it become
richer, more centered and louder
as it gets close to our listener
and more one-sided and distant
as it gets to the
side of the scene.
Let's take a listen.
[Sound effect]
>> TIM ORIOL: So that's
pretty cool, right?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> TIM ORIOL: So that's
pretty cool, right?
[Applause]
>> TIM ORIOL: Beyond the
additional set up I have
to do nothing to update
these effects as they move
around the game world,
they're completely tied
to the game logic that's
driving my game already.
Also this year we focused on
referencing and instancing.
We know you spend a lot of time
designing high-quality content
and animations for your games
and we want you to let you reuse
that content anywhere
where you would like to.
We're allowing you to
create serialized data files
for your nodes and your
actions and then add them
as a reference instead of just
loading them into your scene.
This way, every time you make
a change to the source asset
that is automatically reflected
in the content of your game.
How do I do this for nodes?
For nodes I design
part of my scene,
maybe a background element,
or some scenery in our editor
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
maybe a background element,
or some scenery in our editor
with an Xcode and then I can
just drag-and-drop those files
into my main scene in Xcode
and it will automatically
create a reference
and it is all set up for you.
If you want to do this
in code you can as well,
you can manually construct
an SKReferenceNode,
assign it a file name
or even a URL and when
that content is first presented
in your game we'll load
in that content based
on the latest version
of the file that's
in your bundle.
We can also do the
same thing for actions.
With actions go check out
our great new action editor
and beyond creating and
composing the actions
in Xcode you can
give all them names.
These names are the key to
using them in your game.
We have added a selector to
SKAction called actionNamed.
This works just like it does
for SKTexture and textureNamed.
You pass in the name
of the action you want.
We're going to automatically
look inside of your app bundle
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We're going to automatically
look inside of your app bundle
in all of the serialized
action files, find the one
with the appropriate
name and then surface
that to the application.
Please use this multiple
times within your game.
We have done all the work on
our side to take care of caching
and we guarantee that the same
action will never be loaded
from disk more than
once in your game.
Sometimes you have an action
that you would want to use more
than once but it will play
back faster or slower.
We have added an additional
selector that will allow you
to override the duration
of the action.
This is a smart scaling
of the time,
so even if you have a nested
action with nested groups
and sequences, it will
dynamically scale it
to the new duration so that each
component is the same fractional
size to the original duration.
Those are our utilities
for reusable components
that you can use in the
same scene in the same game
or across multiple games.
We have also added a couple
new actions to the framework.
So now that we have these
positional AudioNodes it would
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So now that we have these
positional AudioNodes it would
be nice to be able to control
the playback via actions.
We have added play, pause, play
back rate as well as actions
for volume and stereo panning.
We also are doing a little bit
more with frame animations.
We have always had
frame-based animations
in SpriteKit via the
animate with textures action
but last year we introduced
lighting to SpriteKit.
With lighting you're able to
either automatically generate
or supply your own normal
textures for sprites
within your scene and then
we can light them dynamically
at run time by moving the
light nodes around your scene.
This works great for
elements that don't change,
but if I have a frame-based
animation like this guy here,
we want those highlights
and shadows to line
up with the current position.
We don't want a specular
highlight where the leg used
to be, so we're adding
an animate
with normal textures
action as well
so you can use this
alongside the normal animation
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
so you can use this
alongside the normal animation
and get both of them in
sync for every frame.
If I run that on our character
and add lighting to the scene,
you can see that all the
highlights, shadows are kept
in sync with every frame, no
matter how my character runs.
[Applause]
>> TIM ORIOL: So those are
additional features we added
to the framework, we've
also done a lot of work
to integrate well with the rest
of the system and take advantage
of new hardware and frameworks
that have been added
to our platform.
First I want to talk
about Metal.
We're making SpriteKit and
we're moving it directly on top
of Metal on iOS and Mac
and it will be Metal backed
on any device that
supports it and any device
that doesn't will automatically
fall back to OpenGL.
This means that you get
lower CPU utilization,
it means you get better
draw call performance
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
it means you get better
draw call performance
and better battery life
with zero action required
to you as a developer.
[Applause]
>> TIM ORIOL: We're going
to upgrade all SpriteKit apps
automatically, you don't have
to recompile or resubmit.
If it supports Metal
we're going to run it.
For those of you
that are wondering
about your custom shaders, we've
taken care of that as well.
If you have a custom shader
in your game, we're supporting
to upgrade almost all of
those to a Metal variant
and that will run just fine
on Metal devices as well.
[Applause]
>> TIM ORIOL: Next up is Swift.
We have gone through
the entire API
and we've applied
nullability qualifiers
and we've adopted Objective-C
generics on any array types
that are used for
paramaters or return types
and this will allow you
to access the full power
of SpriteKit from Swift
without any hassle.
This will also give you
enhanced type safety
within your application
whether you're using Swift
or Objective C.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now I would like to talk
a bit about SceneKit.
With SceneKit in case you
don't know, we allow you
to render SpriteKit
content in SceneKit
and SceneKit content
in SpriteKit.
This year we're allowing you
to go a little bit further
and use all the SpriteKit
transitions that you know
and love directly in
your SceneKits games
and you don't even have to
be using SpriteKit to do it.
You can use transitions like
the doorway one here, clip,
or even the core image
based transition effects
for your SceneKit game
and that all works fine.
SceneKit has also done work
to support Metal backed
context for this release.
We take care of automatically
matching that.
If you have a SceneKit game
that's running Metal backed
and you have SpriteKit content
in there we'll render
using Metal.
If you have a SceneKit
game that's GL backed
and you have SpriteKit in there,
we'll render using OpenGL.
You never have additional
overhead for us
to translate between
the two APIs.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to translate between
the two APIs.
This year we've also
announced a brand-new framework
called GameplayKit.
This is really cool, it provides
you the building blocks you need
to build your game Logic like
Entity/Component systems as well
as state machines and also
provides great utilities
like AI opponents and
deterministic random sources.
One of my favorite ones
here, is its ability
to provide a pathfinding
solution for your game.
I think a lot of SpriteKit
developers are going
to be interested in this.
The way Pathfinding works
in GameplayKit is you would
specify a navigation graph
of the traversable areas
within your game world.
Then you would make
connections between those nodes
and give them an
associated cost.
Once you have this graph,
GameplayKit will then
calculate the optimal path
between any two points
in the graph.
How would I set one of
these up for a game?
If I have this SpriteKit game
here, and I've got my hero
in the lower corner, I have --
maybe I want him to move
to a certain destination.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
maybe I want him to move
to a certain destination.
I'll then specify a couple
of obstacles in my scene
that are non-traversable
regions.
Giving just this to
GameplayKit and a buffer radius
around my character that
I want it to pass through,
GameplayKit will take that
buffer radius into account,
automatically expand all of
the obstacles so we never get
within that radius of
any of the obstacles
and then create the
valid connections
and only the valid
connections within that graph,
so you're never traversing
through the obstacles.
You can then use this to perform
any pathfinding operations
within your game.
It is not specific to SpriteKit,
so you can use GameplayKits
features with SceneKit,
SpriteKit, OpenGL, Metal, any
kind of game scenario you want.
If you are doing it with
SpriteKit we made it easier.
You don't even need to
create the obstacles.
You can create the obstacles
directly from a sprite's bounds,
you can create the
obstacles from a physics body
that you may have set
on the sprite or even
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that you may have set
on the sprite or even
from the alpha transparency
information
in the texture that's associated
with that sprite in your game.
This gives you really easy
access to harness the power
of GameplayKits pathfinding
from your SpriteKit app.
[Applause]
>> TIM ORIOL: As I said before,
the framework really
is only half the story.
We have a number of
really cool enhancements
to our tools this year and I'd
like to turn it over to Norman
to tell you all about it.
[Applause]
>> NORMAN WANG: Thanks, Tim.
Building games is a complex
and iteration process.
Various parts of the game needs
to be iterated like game play,
making sure a game
is fun, animation,
making sure the character
movement is fluid,
or art assets, making
sure that the pixels
on the screen really pop.
In addition to the
iteration problem you also,
as a game developer, face
the scalability problem.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
as a game developer, face
the scalability problem.
How do I replicate a current
design across multiple levels.
At Apple when we first set
out to design SpriteKit we
wanted not only to provide you
with a high performance and easy
to use API but also the tools
to help you with scalability and
iteration so that we can focus
on just building the game.
Ever since day one release
of the SpriteKit
framework we have created
and continuously added
multiple tools as part of Xcode.
Let me give you a quick tour
of what are the tools available
for you as a SpriteKit user.
The first thing I want to
talk about is texture atlas.
One of the main benefits
of using texture atlas is
performance improvement.
SpriteKit uses texture
atlas to minimize the amount
of draw calls sent out to the
GPU to optimize the efficiency.
We don't want to force our
users to adopt a manual process
by manually building these
texture atlas, [unintelligible]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
by manually building these
texture atlas, [unintelligible]
and every time when the
source acts as a change,
this manual process will
have to be kickedoff again.
Therefore it builds an automatic
texture atlas generator right
inside the Xcode.
To build one of these
atlas is as simple
as dragging a folder
into your workspace.
And we'll do something like this
automatically at build time.
Each of the source images
is automatically going
through a complex
post processing stage.
For example, we trim the alpha
transparent pixels for the image
that doesn't really contribute
anything to the screen.
We rotate the image up to 90°
if they result a tighter fit
or result a smaller
texture atlas.
For each of the source
images, we also introspect each
of the edges on the image
and if they're fully opaque
we'll perform extrusion
on the edge.
So when you tile these
images on your scene,
you will not see any seams,
that's automatic
texture atlas generation.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This year we have
made that even better.
Now you can generate texture
atlas instead of asset catalog.
There are two major benefits
of generating texture
atlas using asset catalog.
Number one, you have
precise control
of the targeted device
resolutions matching
with your image names.
You have freedom to not follow
the post-fix in your image names
like add 2X or add
2X to the iPhone,
all of that can be
designed right in the UI.
The second benefit is we support
[unintelligible] now inside the
asset catalog.
Each group of the target
resolution are going
to be generated by their
device independent textures.
When the user goes
to the App Store
and downloads your
SpriteKit enabled games,
only the texture atlas
that's relevant to his
or her device will
get downloaded,
not only does this minimize
the amount of bandwidth as well
as install time for the app
to get on the users phone
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
as install time for the app
to get on the users phone
but also minimizes the amount
of storage overhead on the app.
In addition, texture atlas
supports on-demand resources.
On-demand resources is a
brand-new API that enables you
to stream in art assets over
the network in the background
when the game is running.
SpriteKit builds that
support right in.
These assets are
identified by tags.
Here, for example, my
background elements in Xcode
in Inspector I can specify what
are the tags associated with it.
I'm calling it level
1 and background.
These are the tags, you can
use either of these tags
to retrieve this asset and
start background streaming
when your application
requests it.
Particle effects really help
you set up the game right.
We provide SKEmitterNode as a
very powerful and flexible APIs
in the framework for you to use.
The downside of being
powerful and flexible is
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
The downside of being
powerful and flexible is
that it also comes with 49
properties for you to set.
To set a combination
of permutations
of these 49 properties to
match with the look and feel
that you're going after
is time consuming.
Therefore we build a particle
editor right inside of Xcode
that uses the same
SpriteKit rendering engine
that gives you the visual look
right inside of your work space
so that you can tweak and change
any of these 49 properties
without ever having
to write any lines
of code or rebuild your game.
These particles are
going to be exported
as a really small data file that
can be serialized and deployed
across multiple levels or
across multiple projects.
SpriteKit also supports
Quick Look.
Here for example I'm trying
to learn the new Swift.
I create a brand-new
playground and try to play
around with the SpriteKit
API using the new Swift
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
around with the SpriteKit
API using the new Swift
2.0 language.
What I'm doing here is I'm
creating a bad guy character,
called bad guy, which
is a sprite node,
it copied a single texture
called the car hood,
and in addition I create two
children node that appear
under this bad guy, one has
the texture of the roof,
the other one has the
texture of the trunk.
What's happening here, SpriteKit
will do a partial off-screen
rendering of this
subterrain when you try
to introspect the sprite node
and it will provide the result
right inside of the playground
for you so that every step
along the way when you try
to learn a new language or
make changes to the object,
you will see the live changes
right inside of the playground.
In addition the Quicklook
in SpriteKit also supported
when you debug your applications
whether they're in Swift,
Objective-C, whether they
are running on iOS devices
or running on Mac OS X.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So here I'm trying to debug an
application that I have written,
I trigger a break point,
the target process is actually
paused, but we're still able
to wrap the partial screen
rendering of the current texture
and show that in the debugger.
So you know exactly what that
texture is before I go ahead
and grab it to assign
to an SKSpriteNode.
Last year in iOS 8 we
announced a visual scene editor
which will allow you to set up a
full scene layout without having
to write any lines of code.
Not only you can set up the
position, rotation and scale
on each of the available
nodes that are in the scene,
but you can also define its
physics properties like setting
up a graphic, gravities,
mass, frictions,
you can also perform
live simulations
of these physics
simulations without having
to launch your game or
rebuild the application.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to launch your game or
rebuild the application.
SpriteKit will support some
advanced rendering techniques
like custom shaders.
Here in my level the waterfall
in the background and the fog
on the bottom I actually
implement using two
custom shaders.
To add the shaders,
it is a matter of --
it is as simple as opening
up the assist editor,
it automatically shows
you the current scene
with the shader that's
being rendering
and it will show you
the assistant editor
with the shader source code.
Any live changes you make
in the assistant editor will
automatically recompile the
shader, open up to OpenGL
or Metal and provide you
with a real realtime
preview rather than having
to build a game, go
through the level,
go through the certain
spots and trigger the event
to see whether I'm sending
this stream to OpenGL or Metal,
whether it compiles
successfully or not.
It saves a lot of
iteration time.
This year we have made
a lot of enhancements
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
This year we have made
a lot of enhancements
to the visual scene editor.
The number one requested
feature is custom classes.
Now in the level my hero
character I can specify its
class is called main
character class.
When the scene is
de-serialized at runtime,
whether your application
is written in Objective-C
or Swift the correct class will
be instantiated and created
when the scene is running
and loaded on the scene.
In addition we have been
very busy adding the support
from day one of the
brand-new SKNodes.
Now you can design your
scene with the Camera nodes,
position AudioNode and as well
as the ReferenceNode right
inside of the editor.
It is really cool to be able
to see the camera sending
up the correct scale,
the zoom factor as well
as run actions right inside
of the scene editor rather
than having to rebuild
your game.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
than having to rebuild
your game.
You can also set up the
position of the SKAudioNode,
move them around and hear the
actual sound change to make sure
that your effect is set up
correctly on your scene.
Now this year, one of the
most exciting features
on the tools front is
to have the ability
to design complex actions.
You can design a
really complex action
by using the fundamental
building blocks
that we've provided as part
of SpriteKit action runtime.
It is timeline based, also just
like any other editors we have
in Xcode it provides
live visualization.
You can use not only
to create 2D actions,
you can also create
3D animations
for SceneKit, it's
the same editor.
You can also create
cinematic animations
which will be the animations
saved out as part of scene
when the scene is loaded
that automatically gets run
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
when the scene is loaded
that automatically gets run
for any node that has
action in a scene.
You can also create interactive
animations like running cycle
or jump animations,
falling off from a ledge
and trigger these animations
with one or two lines of code
at different game
play scenarios.
Here I have a scene, I designed
to move the camera around,
I focus on the main character,
the main character
starts animating,
running the walk cycle, and walk
across the scene,
that's my opening.
You can do that in less
than 5 minutes of your time.
Now another major focus
this year on the tools front
for both 2D and 3D is
to have the ability
of doing referencing
and instancing.
On SpriteKit side with support
references on the actions
as well as references on the
node which is your art assets
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
as well as references on the
node which is your art assets
in your scene, these
are reusable components
and they are data files
that can be shared
across multiple projects,
multiple persons
or multiple levels.
To use these reference files,
you don't have to
write any code.
To create the reference
animation is really easy,
we provide a brand new SK
action file template in Xcode 7
and you can a pure
animation file,
in there design all your complex
animation, give it out a name,
each of these actions can be
retrieved with the SKAction,
actionNamed selector to
create the right instance
and to add it to your scene.
Any of the referenced actions,
automatically will be picked out
and reside in object library.
If you want to have
the actions reused
across multiple intro scenes
in different levels it is just
a matter of drag-n-drop these
from the object library.
Creating reference
nodes is also easier.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
It is just as simple as
dragging another SKS file
from your work space
to your scene.
These references,
we automatically
in the editor create
SKReferenceNode instances
and set up correct URL for you.
You can also use it, the API
to build a custom collection
of the nodes, for example, if I
have a bird house that I'm going
to be using as a level prop
across multiple levels I
can just build that and have
that instance in multiple
levels and any changes
to the original design
of the bird house will
automatically get reflected
in each of the instances
that use the reference.
Here you can also
manually change
and update the reference
file in the editor as well.
Next, I like to invite Tyler on
stage to give you a quick demo
of these great new
features in Xcode.
[Applause]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[Applause]
>> TYLER CASELLA:
Thank you Norman.
As you see, we have a lot of
great new additions to SpriteKit
and Xcode 7, and I'd like to
show you how they'll integrate
in your development workflow
by showing you a quick demo
of creating a simple level,
adding a cut scene to it,
and then creating some
interactive game play.
Well see here, I just
started a game project
and I've started a level
within this project.
I've got a player sprite
as well as some platforms.
The first thing I want to do is
to create the environment in it
by adding a background and
some foreground elements.
Previously I would do this
directly into the scene
and then create copies for
each instance that I needed.
This quickly becomes cumbersome
if I need to make changes
because I need to make the
change in many different spots.
It is not easy to reuse.
We have addressed that
with the ReferenceNode.
So see here in a separate
file I've created all
of my elements for
our environment.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of my elements for
our environment.
I've got a nice background
with the waterfall as well
as a nice foreground fog effect.
What I can do to
reference the contents
of this file is simply
drag it into our level.
Now we've automatically
created a ReferenceNode
with all those elements.
You will notice even the
foreground Z value is preserved
as we add it into our scene.
So go ahead and create a
few copies of these to fill
out our level and you'll
notice that I'm creating copies
of the ReferenceNode itself
and not the actual
individual elements
within our reference scene.
What's great about that is,
later on in my project when I,
for example, want to change
the background texture
because it doesn't quite match
with the platforms I've got
here, I don't have to make
that change on the
three instances I have.
Instead I can go to
our single source
and make this change only once
and that change is echoed to all
of our instances
within our level.
[Applause]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[Applause]
>> TYLER CASELLA: Next I'd
like to create a cut
scene within our level.
I'll do that by using
our new action editor
that we've introduced.
Previously you could only
create actions in code
which is very difficult
to visualize so we wanted
to create an editor that was
easy to create complex actions
from and give you
realtime previews
of what you're creating.
To access the action editor,
you just click the
disclosure button here
in the bottom-left corner and
you'll see you're presented
with all of the nodes in your
scene as well as the timeline
of all of the actions
they contain.
We'll see here our player
has one action on it,
which is an animate
with textures action,
and we've got our
idle frames within it.
So now when I click animate,
we'll see that our player is
running this animate action
within our scene.
Let's go ahead and make a
cut scene within our level,
we're going to make the
player run across the level.
To do that, I'll
start by filtering
down to just our player
interaction editor
and to just the actions
within our object library.
We provide you a set of
building block actions to use
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We provide you a set of
building block actions to use
to create your more
complex actions
which is exactly
what I'm going to do.
We'll start by adding a move
action into our cut scene.
All I have to do is drag it
from the object library
into our timeline.
Now for this movement I'll go
850 units in the X direction
and we're going to ease in
for more natural motion.
Now when I click
animate we'll see
that the player is
running that action.
That was a bit quick, so
let's change the duration
by just dragging out the
action to about 2 seconds.
I'm going to adjust the
scale so now when we run,
the movement has a
much better velocity.
Now I'm going to also make
the player run as he moves
across the screen so I'll add in
an animate with textures action.
To define what animation
we're going to be playing,
I can just go into the
media library and filter
down to our run frames.
I can select them and simply
drag them into our action.
Now when we run we'll see that
the player plays that animation.
But of course we're only
playing it once so we're going
to add a loop so that we
can span the whole time
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to add a loop so that we
can span the whole time
of our movement.
I can create a loop by
clicking this loop button here
in the corner and I'm presented
with all the controls
for looping.
I can increase the number of
iterations, I can decrease
or I can loop indefinitely.
In our case I'm going to
only want to loop twice
and then I'll adjust the
duration to match our movement.
Now we have the player
running across the scene.
Next we've got two
gaps within the level
so let's make the
player jump over them.
In the action editor we're
able to scrub to specific times
within our action so I can scrub
to just before we reach the gap
and we'll add another
movement action.
We'll snap right to
where we're scrubbed.
For this movement we'll move
in the Y direction 100 units
and I'll ease out so that
we slow down as we get
to the top of our jump.
Then I'll scrub once again
towards the middle of our gap
and I'll adjust the duration
so that we reach the top
of our jump right there
in the center of the gap.
Then I'll copy the first part of
our action and simply reverse it
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Then I'll copy the first part of
our action and simply reverse it
to get our full motion
of the jump.
That last step for
our jump is I'm going
to create one more
animation which is going
to have our jump frames so I'll
follow the same process going
to our media library, filter
down to our jump frames
and add them to our action
and now we've got the player
jumping over that first gap.
Of course we have one more
gap so one option I have is
to simply copy these
actions I have just added
and displace them, but then we
run into the same issue we had
with the background where if
I want it make changes to it,
I'm going to have to do it to
every instance I have copied.
It very likely I'm going to
want to reuse these actions
in different levels
or potentially even
a different project.
We've addressed this
the same way
with the background allowing
you to reference actions.
To do that we've introduced
a new file in Xcode
which is the SpriteKit
action file.
This is a file where you can
place these actions with a name
that you can then
reference across scenes,
projects, and in code.
Let's go ahead, make
one of those files
by right clicking our selected
actions and we're going
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
by right clicking our selected
actions and we're going
to convert it to a reference.
I'm prompted to give it a
name, so I'll name it jump
and we can select an
action file to put this in,
and in our case we'll
create the new file.
So I'll name this file player
actions because I'm going
to put all the actions related
to the player into this file.
The file is added to our project
and you will see now those
actions that we created
for the jump are within our
file under the name jump
and within our scene
we're simply referencing
those actions.
So now all the actions
that you put
into this file are completely
independent of any scene
or project but you're going
to often want to edit them
in the context of some scene.
We allow you to set a preview
screen that you can assign any
of the actions in your file on
any of the nodes in your scene.
So for example, I can preview my
jump on any node in this scene
or I can set up my own scene
with different orientations
of the player.
For example, I can preview
what this jump action will look
like on the left and right
orientations of my player.
So now on our level I'll
go ahead and scrub back
to our next gap and in our
object library we automatically
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to our next gap and in our
object library we automatically
populate it with
all of the actions
that are available to reference.
So that jump action that I
just created is automatically
in our object library and
I can just drag it in.
So now we've got our
finished cut scene.
Let's take a look.
That looks great.
Now I want to show you how
you can use these actions
within code itself instead
of just a cut scene.
What I want to do is create a
named action for every state
that the player can be in and
then reference those in code.
I will create a reference, a
referencable action called run
that has our animation and
I'll do the same for our idle.
I'll go ahead and delete these
because we'll do this
interactively now
and you can see in our action
file we now have the three
states present within this file.
Now to use these
within code all you have
to do is use the new
selectors we have introduced,
the action name selectors
providing them
with the names we have just
created the actions with,
idle, run, and jump.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
idle, run, and jump.
Now when I run our game
you can see the actions
that I have just created are
being used in the game itself.
Interactively.
The real power of this
comes when you want
to make a change
to your actions.
I can go in my action
file and let's
for example make the player
do a flip when we jump.
I can go in here and I can add
a rotate action to the jump,
give it a value of negative
360, ease in and out
and now I run the game without
even recompiling our game,
we can see the changes
that I have made are now
applied to our player.
[Applause]
>> TYLER CASELLA: So now
the level looks pretty good
so the last thing I want
to do is create a
nice cinematic opening
to really introduce the
player to the level.
I can do that by creating an
SKCameraNode and into our scene.
The camera node let's us
define a Viewport within it
and we can go ahead
and assign our scene
to use the camera
I've just added.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
For our cinematic opening
I'm going to start us off
in the corner here and I'll
have the camera zoomed in.
I'm going to zoom in
on the fog over here.
What's great is, because it
is just an SKNode I can apply
actions to the camera.
I'll filter down
to just our camera
and then I'll add
a move 2 action.
What I'm going to do for our
cinematic opening is pan the
camera over to the
center of our level
and zoom out at the same time.
For our move 2 I'll use this
platforms X value as our center,
507, and I'll also want
to center it in the Y
which is 384 units
and we're going
to want this to ease in and out.
I'm going to move our action
to start about half a second
after we begin our
scene and I'm going
to have it take three
seconds to pan over.
I'll also add a scale 2 action
and give it a half second offset
from our move and have it end at
the same time as our movement.
Now within that short amount
of time we have created
the cinematic opening,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of time we have created
the cinematic opening,
and we have finished our level,
so let's take a look
at how it looks.
So that's just a taste
of what you're able to do
with SpriteKit and Xcode 7 now.
[Applause]
>> TYLER CASELLA: And with that,
I would like to hand it off back
to Tim to summarize for you.
>> TIM ORIOL: Thanks, Tyler.
That is really, really
cool stuff.
I think as you all can see,
it is going to be an
extremely exciting year
for SpriteKit developers.
We've added the AudioNode,
we've added the CameraNode,
we have reference
actions and nodes,
we have a brand-new timeline
based action editor built right
into Xcode.
We have integrated our texture
atlases with the Asset Catalog
to give you access
to new features
like On-Demand Resources
and app thinning
and we have also made SpriteKit
Metal backed on every device
that supports it and
provides you easy access
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that supports it and
provides you easy access
to the new GamePlayKit
framework.
If you need any more
information, please check
out our great developer site
or for general inquiries,
contact our graphics evangelist
Allan Schaffer, there's a couple
of related sessions if
you want to find out more
about GamePlayKit or SceneKit.
We also have a few labs,
the first of which
is the SpriteKit lab
which is starting right now.
So, feel free to follow us
downstairs and we'd be happy
to answer any questions
you may have.
Thank you very much.
Please enjoy your conference.
[Applause]