Upload
codecampiasi
View
61
Download
0
Embed Size (px)
Citation preview
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