This talk is a quick grasp of two WWDC 2013 talks that refer to Sprite Kit. A demonstration sample game is included at the end of the talk; you can find the source code here (https://github.com/teaualune/sk-shootduck).

1. 502 – Introduction to Sprite Kit
503 – Designing Games with
Sprite Kit
2013/07/28
Lawrence Tseng
teaualune@gmail.com

2. Agenda
• Prologue
• Introduction
• SKNode
• SKAction
• Physic Engine
• SKTexture
• Particle System
• Compare w/ Cocos2d
• Demo

3. PROLOGUE
Before we start…

4. • … what is sprite?

5. Sprite
• A sprite is a two-dimensional
image or animation that is
integrated into a larger
scene. (Wikipedia)

6. In this talk…
• Introduce Sprite Kit
• Node, actions, texture, etc.
• Combine session 502 & part of 503
• Sprite Kit v.s. Cocos2d

7. Not in this talk…
• Game Kit
• Game development details in session 503
• Many code examples

8. INTRODUCTION
Basic structure, game loop

9. What is included in Sprite Kit?
• Images of sprites, shapes and particles
• Animations
• Physics
• Audio/video
• Visual effects

10. Basic Structure
• UIView/NSView
– SKView
• Scene
– Node
– (+ Physics)
– (+ Actions)

11. Basic Structure
SKScene
Background
Sky Tree
Foreground
Player Enemy
HUD
HP
All of them are SKNodes!

12. Game Loop

13. SPRITE KIT NODES
Introduction to various kinds of SKNodes

14. SKNode Hierarchy
SKNode
SKLabelNode SKEmitterNode SKVideoNode SKShapeNode SKSpriteNode SKEffectNode
SKScene
SKCropNode

15. SKNode
• Do not display real
things
• Use as the role of
composite in
composite pattern
• Has basic properties:
– Position
– Width & height
– Alpha
– Is hidden
– X scaling & Y scaling

16. SKSpriteNode
• Display sprites on the screen
• Has explicitly size
• Can display colors, texture
• Texture atlas support

17. SKSpriteNode
• Convenient one-line creation
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:
@"hero.png"];

18. SKSpriteNode
• Use color blend factor to create new sprite

19. SKSpriteNode

20. SKLabelNode
• Similar as UILabel & CCLabel
• Single-line text as a SKNode
• System fonts
• Animatable

21. SKEmitterNode
• Use for particle system
• Advanced keyframe sequence controls
• Built-in particle editor

22. SKVideoNode
• One-line creation from MP4 files
• One-line creation from AVPlayer
• Place anywhere, e.g. background
• Physics enabled
[SKVideoNode videoNodeWithVideoFileNamed:@"video.mp4"];

23. SKShapeNode
• Dynamic shapes with CGPath
• Rendered in hardware
• Stroke/fill

24. SKEffectNode
• Group opacity & group blend
• Can be cached
• Wrap with a CIFilter

25. SKCropNode
• Use to mask a node (any SKNode)
• SKCropNode can have children, can run
SKActions…

26. SKACTION
Actions, sequences, groups, compositions, specialty, customs

27. SKAction Overview
• Single class: SKAction
– As a role of Façade
• Chainable, reusable, readable
• Looks like scripting language

28. SKAction: basic creation

29. SKAction: running actions
• Run action immediately
• Copy on add, remove on completion
• Can be repeated N times or forever

30. SKAction: sequences

31. SKAction: groups

32. SKAction: composition

33. SKAction: timing

34. SKAction: specialty
• Animate with textures
• Animate with a path (CGPath)
• Fade in/out, remove from parent
• Short sounds playback

35. SKAction: custom
• Run with blocks!

36. PHYSIC ENGINE
Physics body, physics world, collision groups

37. Physics Simulation

38. Physics Simulation

39. Physics Simulation
• Sprite kit manages synchronization details
• Physic-enabled nodes + no-physic nodes

40. SKPhysicsBody
• Multiple types of
shape:
– Circle
– Rectangle
– EdgeLoopFromRect
– Edge
– Polygon
– EdgeChain
– EdgeLoopFromPath
• Directly set to
SKNode’s property

41. SKPhysicsWorld
• Combine with SKScene
• Has gravity property
• Manage collision details

42. SKPhysicsContact

43. SKPhysicsContact

44. Collision Groups

45. Collision Groups

46. SKTEXTURE
Texture creation, texture on SKNodes, texture atlas, texture in Xcode

47. About SKTexture
• Represents sprite bitmap data
• Managed by framework

48. Create a SKTexture

49. Apply texture on nodes

50. Texture Atlas

51. Why Texture Atlas?
• Less memory consumption
• Minimizes disk I/O
• Speed up render speed

52. Create a Texture Atlas
• TexturePacker
• Texture Atlas Toolkit
• Texture Atlas Maker
• SpriteMapper
• Xcode 5!!!

53. Create a Texture Atlas (Xcode)
1. Turn on texture atlas build setting
2. Put all PNG files into a .atlas directory (e.g.
hero.atlas)
3. Drag the folder into the Xcode project
4. Done!

54. Memory Consumption

55. Using Texture Atlas
• No need to deal with plist!!

56. PARTICLE SYSTEM
SKEmitterNode, particle effect editor

57. Particles Overview
• Use particle system for special effects
• Xcode particle system editor
• Apply sequences, actions to the particle

58. Particle Editor
• Integrated into Xcode
• Edit all SKEmitterNode attributes visually
• Don’t need to hardcode particle in codes
• Each particle effect is stored in a .sks file

59. Keyframe Sequences
• Control lifetime color/scale transition for each
particle

60. Particle Action
• Execute actions on particles
• Invoke by emitter

61. COCOS2D COMPARISON

62. CCNode v.s. SKNode
• Both implements composite pattern to
provide tree structure
• Similar subclasses (leaf): CCSprite,
SKSpriteNode…

63. Actions & Animations
• Cocos2d has many classes to deal with:
CCAction, CCSpawnAction, …
• Sprite Kit has only SKAction as Façade, thus
decreases coupling well

64. Physic Engine
• Cocos2d integrates with Box2d/Chipmunk;
Sprite Kit itself has one
• Sprite Kit physic engine is more intuitive
• Cocos2d provides visual tools to build physic
body; In Sprite Kit they can only be hardcoded

65. Texture Atlas
• Picture & plist files have to be created by 3rd
services for Cocos2d
• Sprite Kit has super-lazy texture atlas generator
– And it provides optimization feature, which is locked to
pay in some tools
• Unlike Cocos2d, Sprite Kit does not have to deal
with plist details

66. Misc
• Cocos2d is somewhat cross-platform; Sprite
Kit only targets for iOS7 & OS X 10.9
• Cocos2d is open source, but Sprite Kit is not
• Cocos2d has stage editor

67. DEMO
https://github.com/teaualune/sk-shootduck

68. THANK YOU!