Introduction to Sprite Kit

502–IntroductiontoSpriteKit 503–DesigningGameswithSpriteKit

2013/07/28

Lawrence Tseng

teaualune@gmail.com

Agenda

• Prologue

• Introduction

• SKNode

• SKAction

• PhysicEngine

• SKTexture

• ParticleSystem

• Comparew/Cocos2d

• Demo

PROLOGUEBeforewestart…

• …whatissprite?

Sprite

• Aspriteisatwo-dimensional

imageoranimationthatis

integratedintoalarger

scene.(Wikipedia)

Inthistalk…

• IntroduceSpriteKit

• Node,actions,texture,etc.

• Combinesession502&partof503

• SpriteKitv.s.Cocos2d

Notinthistalk…

• GameKit

• Gamedevelopmentdetailsinsession503

• Manycodeexamples

INTRODUCTIONBasicstructure,gameloop

WhatisincludedinSpriteKit?

• Imagesofsprites,shapesandparticles

• Animations

• Physics

• Audio/video

• Visualeffects

BasicStructure

• UIView/NSView

– SKView

• Scene

– Node

– (+Physics)

– (+Actions)

BasicStructure

SKScene

Background

Sky Tree

Foreground

Player Enemy

HUD

HP

AllofthemareSKNodes!

GameLoop

SPRITEKITNODESIntroductiontovariouskindsofSKNodes

SKNodeHierarchy

SKNode

SKLabelNode SKEmitterNode SKVideoNode SKShapeNode SKSpriteNode SKEffectNode

SKScene

SKCropNode

SKNode• Donotdisplayreal

things

• Useastheroleof

compositein

compositepattern

• Hasbasicproperties:

– Position

–Width&height

– Alpha

– Ishidden

– Xscaling&Yscaling

SKSpriteNode

• Displayspritesonthescreen

• Hasexplicitlysize

• Candisplaycolors,texture

• Textureatlassupport

SKSpriteNode

• Convenientone-linecreation

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed: @"hero.png"];

SKSpriteNode

• Usecolorblendfactortocreatenewsprite

SKSpriteNode

SKLabelNode

• SimilarasUILabel&CCLabel

• Single-linetextasaSKNode

• Systemfonts

• Animatable

SKEmitterNode

• Useforparticlesystem

• Advancedkeyframesequencecontrols

• Built-inparticleeditor

SKVideoNode

• One-linecreationfromMP4files

• One-linecreationfromAVPlayer

• Placeanywhere,e.g.background

• Physicsenabled

[SKVideoNode videoNodeWithVideoFileNamed:@"video.mp4"];

SKShapeNode

• DynamicshapeswithCGPath

• Renderedinhardware

• Stroke/fill

SKEffectNode

• Groupopacity&groupblend

• Canbecached

• WrapwithaCIFilter

SKCropNode

• Usetomaskanode(anySKNode)

• SKCropNodecanhavechildren,canrun

SKActions…

SKACTIONActions,sequences,groups,compositions,specialty,customs

SKActionOverview

• Singleclass:SKAction

– AsaroleofFaçade

• Chainable,reusable,readable

• Lookslikescriptinglanguage

SKAction:basiccreation

SKAction:runningactions

• Runactionimmediately

• Copyonadd,removeoncompletion

• CanberepeatedNtimesorforever

SKAction:sequences

SKAction:groups

SKAction:composition

SKAction:timing

SKAction:specialty

• Animatewithtextures

• Animatewithapath(CGPath)

• Fadein/out,removefromparent

• Shortsoundsplayback

SKAction:custom

• Runwithblocks!

PHYSICENGINEPhysicsbody,physicsworld,collisiongroups

PhysicsSimulation

PhysicsSimulation

PhysicsSimulation

• Spritekitmanagessynchronizationdetails

• Physic-enablednodes+no-physicnodes

SKPhysicsBody

• Multipletypesof

shape:

– Circle

– Rectangle

– EdgeLoopFromRect

– Edge

– Polygon

– EdgeChain

– EdgeLoopFromPath

• Directlysetto

SKNode’sproperty

SKPhysicsWorld

• CombinewithSKScene

• Hasgravityproperty

• Managecollisiondetails

SKPhysicsContact

SKPhysicsContact

CollisionGroups

CollisionGroups

SKTEXTURETexturecreation,textureonSKNodes,textureatlas,textureinXcode

AboutSKTexture

• Representsspritebitmapdata

• Managedbyframework

CreateaSKTexture

Applytextureonnodes

TextureAtlas

WhyTextureAtlas?

• Lessmemoryconsumption

• MinimizesdiskI/O

• Speeduprenderspeed

CreateaTextureAtlas

• TexturePacker

• TextureAtlasToolkit

• TextureAtlasMaker

• SpriteMapper

• Xcode5!!!

CreateaTextureAtlas(Xcode)

1. Turnontextureatlasbuildsetting

2. PutallPNGfilesintoa.atlasdirectory(e.g.

hero.atlas)

3. DragthefolderintotheXcodeproject

4. Done!

MemoryConsumption

UsingTextureAtlas

• Noneedtodealwithplist!!

PARTICLESYSTEMSKEmitterNode,particleeffecteditor

ParticlesOverview

• Useparticlesystemforspecialeffects

• Xcodeparticlesystemeditor

• Applysequences,actionstotheparticle

ParticleEditor

• IntegratedintoXcode

• EditallSKEmitterNodeattributesvisually

• Don’tneedtohardcodeparticleincodes

• Eachparticleeffectisstoredina.sksfile

KeyframeSequences

• Controllifetimecolor/scaletransitionforeach

particle

ParticleAction

• Executeactionsonparticles

• Invokebyemitter

COCOS2DCOMPARISON

CCNodev.s.SKNode

• Bothimplementscompositepatternto

providetreestructure

• Similarsubclasses(leaf):CCSprite,

SKSpriteNode…

Actions&Animations

• Cocos2dhasmanyclassestodealwith:

CCAction,CCSpawnAction,…

• SpriteKithasonlySKActionasFaçade,thus

decreasescouplingwell

PhysicEngine

• Cocos2dintegrateswithBox2d/Chipmunk;

SpriteKititselfhasone

• SpriteKitphysicengineismoreintuitive

• Cocos2dprovidesvisualtoolstobuildphysic

body;InSpriteKittheycanonlybehardcoded

TextureAtlas

• Picture&plistfileshavetobecreatedby3rdservicesforCocos2d

• SpriteKithassuper-lazytextureatlasgenerator

– Anditprovidesoptimizationfeature,whichislockedto

payinsometools

• UnlikeCocos2d,SpriteKitdoesnothavetodealwithplistdetails

Misc

• Cocos2dissomewhatcross-platform;Sprite

KitonlytargetsforiOS7&OSX10.9

• Cocos2disopensource,butSpriteKitisnot

• Cocos2dhasstageeditor

DEMOhttps://github.com/teaualune/sk-shootduck

THANKYOU!