These are confidential sessionsplease refrain from streaming, blogging, or taking pictures

Developing 2D Games with Sprite Kit

Allan Schaffer
Game Technologies Evangelist aschaffer@apple.com

These are confidential sessionsplease refrain from streaming, blogging, or taking pictures

Sprite Kit
Enhancing 2D game development

Sprites, Shapes and Particles

Animations and Physics

Audio, Video, Visual Effects

Sprite Kit
Enhancing 2D game development

Sprites, Shapes and Particles

Animations and Physics

Audio, Video, Visual Effects

Sprite Kit
Enhancing 2D game development

Agenda
Sprites and particles Textures and atlases Scene transitions Drawing order Animation

Sprites and Particles

Scene Graph
Nodes
Background

SKScene

Foreground
Background Image

Hero

Tree

HUD Life Counter

Tree HP Bar

Displaying Sprite Kit Content

!

Application UIView / NSView SKView

[skView presentScene:myScene];

SKScene
Scrolling Background

Background Image

Foreground

Hero

Tree

HUD Life Counter

The Sprite Kit Game Loop

Each Frame
-update:

SKScene evaluates actions

The Sprite Kit Game Loop

SKView renders the scene Each Frame
-update:

-didSimulatePhysics

SKScene simulates physics

-didEvaluateActions

SKScene evaluates actions

Node Classes
SKNode

SKLabelNode

SKCropNode

SKEmitterNode

SKEffectNode

SKShapeNode

SKSpriteNode

SKScene

SKNode
The base class Used for grouping in node tree
@property SKNode* parent; @property NSArray* children;

Used for positioning itself and children

@property CGPoint position; @property CGFloat zRotation; @property CGFloat xScale, yScale; // relative to parent // radians // scaling

Can control visibility

@property CGFloat alpha;! @property BOOL hidden;

SKNode

Can run actions Can be a physics body

SKSpriteNode
Main rendering node type Draws a 2D image
Can be a color ! Can be a texture image ! Has an explicit size
!

SKSpriteNode

SKSpriteNode
Simple creation
SKSpriteNode *ship = [SKSpriteNode spriteNodeWithImageNamed:@ship.png]; ship.position = CGPointMake(40.0,30.0); [scene addChild:ship];
!

Creates a sprite matching the image size Centers sprite on image center (0.5, 0.5) Positions sprite at (40, 30) relative to its parent Follows UIImage -imageNamed: behavior

SKEmitterNode
Particles! Full featured 2D particle system Standard startValue and speed Advanced keyframe sequence controls

SKEmitterNode
Particle attributes Texture Scale Rotation Emission angle Emission speed Blend modes Birth rate Particle count Lifetime Position Z position Speed Size Angle Acceleration Rotation speed Scale speed Color Blend factor Alpha

SKEmitterNode
Xcode particle editor Easy-to-use particle editor
!

Integrated directly into Xcode 5 Separates design from programming Use NSKeyedUnarchiver to unarchive

Edit SKEmitterNode attributes visually

!

Creates an archived SKEmitterNode

!

Demo
Creating and loading particles

Sprite Kit Nodes

Node classes
Class
SKNode SKScene SKSpriteNode SKEmitterNode SKLabelNode SKVideoNode SKShapeNode SKEffectNode SKCropNode

Description
Parent class of all nodes Root of the scene graph Renders a textured sprite Generates and renders particles Renders a text string Plays video content Renders a shape based on a Core Graphics path Applies a Core Image filter to its children Crops its children using a mask

Textures and Atlases

SKTexture
Sprite Kit bitmap data Fundamental Sprite Kit bitmap object Very flexible
[SKTexture [SKTexture [SKTexture [SKTexture [SKTexture textureWithImageNamed:@"ship.png"]; textureWithCGImage:myCGImageRef]; textureWithData:rgbaNSData size:CGSizeMake(100, 100)]; textureWithImage:myUIImage]; textureWithRect:CGRectMake(100, 100, 80, 80) inTexture:tex1];

Properties for filter mode, mipmap generation, pre-loading Reference from a texture atlas

Texture Atlases
Key to performance Many images combined into a single larger image
Saves memory ! Improves drawing efficiency
!

big_tree_base.png big_tree_middle.png big_tree_top.png blobShadow.png cave_base.png cave_destroyed.png cave_top.png minionSplort.png small_tree_base.png small_tree_middle.png small_tree_top.png warrior_throw_hammer.png

Texture Atlases
In Sprite Kit Xcode generates atlases automatically
From individual image files ! Retina and non-retina if provided
!

Packed for maximum efficiency

Automatic rotation ! Transparent edges trimmed ! Opaque images extruded ! Up to 2048 x 2048
!

Creating a Texture Atlas

Put your files in a .atlas folder Drag the folder into your project Done
Environment.atlas/ big_tree_base.png big_tree_middle.png big_tree_top.png blobShadow.png cave_base.png cave_destroyed.png cave_top.png minionSplort.png small_tree_base.png small_tree_middle.png small_tree_top.png warrior_throw_hammer.png

Loading From a Texture Atlas

Load a SKTexture from a stand-alone file
SKTexture *texture = [SKTexture textureWithImageNamed:@big_tree_base.png];
!

Load a SKTexture from a texture atlas

SKTexture *texture = [SKTexture textureWithImageNamed:@big_tree_base.png];
!

Its the same

!

Sprite Kit manages atlases for you

Deeper into SKScene

SKScene
A scene of content Root node of the scene graph Displayed by a SKView Inherits from SKEffectNode Runs per-frame loop
-update: -didEvaluateActions -didSimulatePhysics
Background Image Hero

SKScene

Scrolling Background Foreground

Tree

HUD

Life Counter

SKScene
Organization Typical to create different scenes for
Main menu ! Game options ! Gameplay ! Game over
!

Level 1 Level 2 Level 3 ... Level N

SKTransition
Transition between scenes Performs a transition between current and new SKScene Standard transitions
Cross fade, fade thru color ! Doors closing, doors opening ! Flip vertical, flip horizontal ! Move in, push in, reveal ! CIFilter transitions
!

Option to pause rendering of either scene

SKTransition
Example
// New scene slides on top of the old scene. SKTransition *moveIn = [SKTransition moveInWithDirection:SKTransitionDirectionUp duration:2.0];
!

// Allow old scenes animations to continue during transition moveIn.pausesOutgoingScene = NO;

!

// Present the new scene with the transition [myView presentScene:newScene transition:moveIn];

Drawing Order and Performance

Drawing Order
Standard behavior Two simple rules
A parent draws its content before rendering its children ! Children are rendered in the order they appear in the child array
!

Helicopter Missiles Body Primary Rotor Tail Rotor

Drawing Order
zPosition Gives the node an explicit height
!

Relative to its parent node

Nodes drawn in global Z order

Helicopter (z=100) Body (z=0) Primary Rotor (z=1) Tail Rotor (z=1) Missiles (z=-1)

Drawing Order
SKScene ignoresSiblingOrder property Allows nodes in scene to be drawn in any order
Sprite Kit batches scene by state ! Results in fewer draw calls
!

With ignoresSiblingOrder and zPosition

Each nodes global Z position is calculated ! Drawn from lowest Z to highest Z ! Sprite Kit sorts nodes at equal Z for optimal batching
!

Drawing Order
Key insight Compose scene as layers
Give objects common Z value per layer ! Place overlapping objects in different layers
!

Set ignoreSiblingOrder

Actions and Animations

Actions Overview
[node runAction: [SKAction rotateByAngle:M_PI duration:1.0] ];

Very simple to use

Single action classSKAction ! One line creation ! Chainable, reusable, readable
!

Like a scripting language for Sprite Kit

Actions directly affect the node it is run on ! Actions run immediately ! Removed on completion
!

Basic SKActions
[SKAction rotateByAngle:M_PI duration:1.0];
! !

[SKAction moveTo:aCGPoint duration:1.0];

! !

[SKAction fadeAlphaTo:0.75 duration:1.0];

! !

[SKAction scaleBy:2.0 duration:1.0];

! !

[SKAction scaleXBy:1.5 y:0.5 duration:1.0];

Compound Actions
Sequences
! !

[myNode runAction: [SKAction sequence:@[action1, action2, action3]] ];

1.0 sec
action1

2.0 sec
action2

0.5 sec
action3

3.5 sec SKAction Sequence

Compound Actions
Groups
! !

[myNode runAction: [SKAction group:@[action1, action2, action3]] ];

action1 action2 action3

1.0 sec 2.0 sec 0.5 sec 2.0 sec SKAction Group

Compound Actions
Sequences of groups
SKAction *group = [SKAction group:@[scale, rotate]];
!

[myNode runAction: [SKAction sequence:@[move, group, fadeout]] ];

scale move rotate fadeout

Sequence with a Group

Specialty SKActions
Animate
[SKAction animateWithTextures:@[tex0, tex1, tex2] timePerFrame:0.1];
! ! !

Specialty SKActions
Follow path
!

[SKAction followPath:myPath duration:2.5]

!

[SKAction followPath:myPath asOffset:YES orientToPath:NO duration:5.0];

!

Specialty SKActions
Remove from parent
/* zero duration */
!

[SKAction removeFromParent];
! ! ! !

/* fade out a sprite and then remove it */

!

SKAction *fade = [SKAction fadeOutWithDuration:1.0]; SKAction *remove = [SKAction removeFromParent];

!

[sprite runAction:[SKAction sequence:@[fade, remove]];

Specialty SKActions
Run block
/* zero duration, fires once */
!

[SKAction runBlock:^{ doSomething(); }]

! ! ! !

/* show game over menu after character death animation */

!

SKAction *fade = [SKAction fadeOutWithDuration:1.0]; SKAction *remove = [SKAction removeFromParent]; SKAction *showMenu = [SKAction runBlock:^{ [self showGameOverMenu]; }];
!

[heroSprite runAction: [SKAction sequence:@[fade, showMenu, remove]] ];

!

SKActions
Large catalog

moveByX: y: duration: moveTo: duration: moveToX: duration: moveToY: duration: rotateByAngle: duration: rotateToAngle: duration: scaleXTo: duration: scaleYTo: duration: speedBy: duration: speedTo: duration: scaleBy: duration: scaleXBy: y: duration: scaleTo: duration: scaleXTo: y: duration:

sequence: group: setTexture: runBlock: runBlock: queue: removeFromParent performSelector: onTarget: resizeByWidth: height: duration: resizeToWidth: height: duration: resizeToWidth: duration: resizeToHeight: duration: repeatAction: count: repeatActionForever: fadeInWithDuration:

fadeOutWithDuration: fadeAlphaBy: duration: fadeAlphaTo: duration: animateWithTextures: timePerFrame: animateWithTextures: timePerFrame: resize: playSoundFileNamed: waitForCompletion: colorizeWithColor: colorBlendFactor: colorizeWithColorBlendFactor: duration: followPath: duration: followPath: asOffset: orientToPath: waitForDuration: waitForDuration: withRange: runAction: onChildWithName: customActionWithDuration: actionBlock:

Wrap-Up
Introduction to Sprite Kit Sprites and particles Textures and atlases Scene transitions Drawing order Animation

More Information
Allan Schaffer
Game Technologies Evangelist aschaffer@apple.com
!

Apple Developer Forums

http://devforums.apple.com/
!

Developer Documentation
http://developer.apple.com/library/