Developing 2D Games With Sprite Kit

These are confidential sessionsplease refrain from streaming, blogging, or taking pictures
Developing 2D Games with Sprite Kit
Allan Schaffer
Game Technologies Evangelist [email protected]
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
Sprites, Shapes and Particles
Animations and Physics
Audio, Video, Visual Effects
Sprite Kit
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 [email protected]
!
Apple Developer Forums

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

Developing 2D Games With Sprite Kit

Uploaded by

Copyright:

Available Formats

Developing 2D Games With Sprite Kit

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Developing 2D Games With Sprite Kit

Uploaded by

Copyright:

Available Formats

What are some of the main node types in SpriteKit?

What are some of the main node types in SpriteKit?

How does SpriteKit handle rendering and updating scenes?

How does SpriteKit handle rendering and updating scenes?

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

Developing 2D Games with Sprite Kit

Sprites, Shapes and Particles

Animations and Physics

Audio, Video, Visual Effects

Sprites, Shapes and Particles

Animations and Physics

Audio, Video, Visual Effects

Sprites and Particles

HUD Life Counter

Displaying Sprite Kit Content

Application UIView / NSView SKView

HUD Life Counter

The Sprite Kit Game Loop

SKScene evaluates actions

The Sprite Kit Game Loop

SKScene simulates physics

SKScene evaluates actions

Used for positioning itself and children

Can control visibility

Can run actions Can be a physics body

Edit SKEmitterNode attributes visually

Creates an archived SKEmitterNode

Sprite Kit Nodes

Textures and Atlases

Packed for maximum efficiency

Creating a Texture Atlas

Loading From a Texture Atlas

Load a SKTexture from a texture atlas

Its the same

Sprite Kit manages atlases for you

Deeper into SKScene

Scrolling Background Foreground

Level 1 Level 2 Level 3 ... Level N

Option to pause rendering of either scene

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

Drawing Order and Performance

Helicopter Missiles Body Primary Rotor Tail Rotor

Relative to its parent node

Nodes drawn in global Z order

With ignoresSiblingOrder and zPosition

Actions and Animations

Very simple to use

Like a scripting language for Sprite Kit

[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];

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

3.5 sec SKAction Sequence

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

action1 action2 action3

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

scale move rotate fadeout

Sequence with a Group

[SKAction followPath:myPath duration:2.5]

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