Introduction to

SpriteKit

Ștefan Stolniceanu

Background

• More and more game developers emerge, all with common

needs

• Need of fast graphics

• Particles and visual effects

• Physics and animation

• Most of the iconic games are 2D

• Rechanges the focus on developing games instead of

engines

SpriteKit Essentials

• Images of Sprites, Shapes and Particles

• Animations and Physics

• Audio, Video, Visual Effects

• And many other

What SpriteKit has to offer

The Parts of a Sprite Kit Game

Scenes

Actions Physics

Displaying Sprite Kit Content

Application UIView / NSView

SKView skView.presentScene(myScene)

Sprite Kit NodesThe building blocks of every 2D game

The father, the son, and the holy spirit

SKNode

SKLabelNode

SKEmitterNode

SKShapeNode SKSpriteNode

SKEffectNode

SKScene

SKCropNode

SKNode

var position: CGPoint!

var zRotation: CGFloat!

var xScale: CGFloat!

var yScale: CGFloat!

var alpha: CGFloat!

var hidden: Bool!

SKSpriteNode

• Has an explicit size

• Can display a colour

• Can display a texture

• You can blend the texture with a colour

Your true and only friend

SKSpriteNodeYour true and only friend

SKSpriteNode

• Has an explicit size

• Can display a colour

• Can display a texture

• You can blend the texture with a colour

SKSpriteNodeYour true and only friend

SKSpriteNode

• Has an explicit size

• Can display a colour

• Can display a texture

• You can blend the texture with a colour

SKSpriteNodeYour true and only friend

SKSpriteNode

• Has an explicit size

• Can display a colour

• Can display a texture

• You can blend the texture with a colour

SKTexture

• Represents Sprite Kit bitmap data

• Automatically managed by the framework

SKSpriteNodeYour true and only friend

/* how to create a sprite from a png file */

var sprite = SKSpriteNode()

let texture = SKTexture(imageNamed:”logo”)

sprite.texture = texture

sprite.size = texture.size

VS.

var sprite = SKSpriteNode(imageNamed: “logo”)

SKEmitterNodeThat special something something

SKEmitterNode

• Full featured 2D particle system

• Standard startValue and speed

• Advanced keyframe sequence controls

That special something something

SKEmitterNodeThat special something something

• Texture

• Scale

• Rotation

• Emission angle

• Emission speed

• Blend modes

SKEmitterNodeThat special something something

• Data driven particle effects

• Built-in Xcode editor

• Reduce iteration time

• Empower artists

SKVideoNode

SKVideoNode

–Me

“VideoNode, VideoNode,

VideoNode does whatever a VideoNode does

Can it be less simple?

No, it can’t.

It is a Node, yes it is.

Lookout!

It is the VideoNode!”

SKVideoNodeVideo as a first class sprite

• Until now video has been:• Above your game view

• Below your game view

• Roll your own in OpenGL

• Anywhere else but where you wanted it to be

• Then comes Sprite Kit, making it a first class sprite

SKVideoNodeVideo as a first class sprite

• One-line creationlet video = SKVideoNode(videoFileNamed: “video”)

• Built on AVPlayer

SKShapeNode

SKShapeNode

• Dynamic shapes

• Any CGPath

• Built for speed

• Rendered in hardware

• Stroke and/or fill

• Add glow effects

• Multiple subpaths

SKLabelNode

SKLabelNode

• For most text use UIKit/AppKit

• Single line text as a sprite

• Supports all system fonts

• Supports SKActions (of course)

SKEffectNode

SKEffectNode

• Flattens children during render• shouldEnableEffects

• Group opacity

• Group blend modes

• Optionally apply a CIFilter

• Can cache via shouldRasterize

SKCropNode

SKCropNode

• Mask content of children

• Mask defined as a SKNode

• Transparent area is masked out

• Mask node can have children

• Mask node can run SKActions

Actions and Animation

SKAction

Super simple to use,

It can be compared to a scripting language for SK

Basic SKActions

var action: SKAction!

action = SKAction.rotateByAngle(M_PI, duration: 1.0)

action = SKAction.moveTo(aCGPoint, duration: 1.0)

action = SKAction.fadeAlphaTo(0.75, duration: 1.0)

action = SKAction.scaleBy(2.0, duration: 1.0)

action = SKAction.scaleXBy(1.5, y: 0.5, duration: 1.0)

Running SKActionsIt’s alive!

• Actions run immediately

• Copy on add

• Removed on completion

sprite.runAction(SKAction.fadeOutWithDuration:1.0))

Running SKActions,

Running SKActions,

Running SKActions

Running SKActions

• Repeating an action

var dance = SKAction.runBlock(dance)

var danceUntilYouDrop = SKAction.repeatAction(dance, count: 20)

• Repeating an action… forever!

var dance = SKAction.runBlock(dance)

var danceLikeYourLifeDependsOnIt = SKAction.repeatActionForever(dance)

SequencesReuse already defined blocks

funkyGuy.runAction(SKAction.sequence([danceSalsa, robotDance, doTheFlop]))

danceSalsa robotDance doTheFlop

SKAction Sequence

GroupsReuse already defined blocks

crazyGuy.runAction(SKAction.group([danceSalsa, robotDance, doTheFlop]))

danceSalsa

robotDance

doTheFlop

SKAction Group

Sequences… of groups!Reuse already defined blocks

crazyDrunkGuy.runAction(SKAction.sequence([drinkALot, dance, regret]))

danceSalsa

robotDance

doTheFlop

SKAction Sequences of Groups

let dance = SKAction.group([danceSalsa, robotDance, doTheFlop])

regretdrinkALot

How many, though?

Oh, well…

Built in Physics

Simulation

Physics in Sprite KitTruly integrated physics

• Built right into Sprite Kit

• You don’t care about the synchronisation process

• Not a global on/off switch

• Enabled node-by-node

• No performance penalty for what you’re not using

SKPhysicsBody

• Any nodes can have a PhysicsBody

• To do so… whelp… just add one

• You have some of ‘em predefined already

var aPhysicsBody = SKPhysicsBody(rectangleOfSize: 50)

aSprite.physicsBody = aPhysicsBody

SKPhysicsWorld

• Each SKScene has a physicsWorld

• Perform hit tests, ray casts

• Add joints

• Change gravity

//Down!

self.physicsWorld.gravity = CGVector(0.0, -9.8)

//Up!

self.physicsWorld.gravity = CGVector(0.0, 9.8)

PhysicsWorld Contact Delegate

self.physicsWorld.contactDelegate = self

func didBeginContact(contact: SKPhysicsContact) {}

func didEndContact(contact: SKPhysicsContact) {}

SKPhysicsContact

/* the physics bodies involved */

var bodyA: SKPhysicsBody!

var bodyB: SKPhysicsBody!

/* point of first contact */

var contactPoint: CGPoint!

/* magnitude of collision impulse at that point */

var collisionImpulse: CGFloat!

Collision Groups

var categoryBitMask: UInt32!

var collisionBitMask: UInt32!

var contactTestBitMask: UInt32!

Sprite Kit Game LoopFrames have it rough

Demo