Date post: | 23-Feb-2017 |
Category: |
Software |
Upload: | tai-lun-tseng |
View: | 159 times |
Download: | 2 times |
502–IntroductiontoSpriteKit 503–DesigningGameswithSpriteKit
2013/07/28
Lawrence Tseng
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
THANKYOU!