Downloaded 16 times
![SKSpriteNode
• Convenient one-line creation
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:
@"hero.png"];](https://image.slidesharecdn.com/spritekit-160422155713/85/Introduction-to-Sprite-Kit-17-320.jpg){kind=icon}
![SKVideoNode
• One-line creation from MP4 files
• One-line creation from AVPlayer
• Place anywhere, e.g. background
• Physics enabled
[SKVideoNode videoNodeWithVideoFileNamed:@"video.mp4"];](https://image.slidesharecdn.com/spritekit-160422155713/85/Introduction-to-Sprite-Kit-22-320.jpg){kind=icon}
More Related Content
Similar to Introduction to Sprite Kit
![[KJ-Code] Sprite Kit 설명 By Ji Sanghoon](https://cdn.slidesharecdn.com/ss_thumbnails/20140322spritekit-140322014614-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds){kind=icon}
Introduction to Sprite Kit
- 1.
- 2. Agenda • Prologue • Introduction •SKNode • SKAction • Physic Engine • SKTexture • Particle System • Compare w/ Cocos2d • Demo
- 3.
- 4.
- 5.
- 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.
- 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.
- 12.
- 13.
- 14. SKNode Hierarchy SKNode SKLabelNode SKEmitterNode SKVideoNodeSKShapeNode 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.
- 19.
- 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.
- 24. SKEffectNode • Group opacity & group blend • Can be cached •Wrap with a CIFilter
- 25.
- 26.
- 27. SKAction Overview • Single class: SKAction – As a role of Façade •Chainable, reusable, readable • Looks like scripting language
- 28.
- 29. SKAction: running actions • Run action immediately • Copy on add, remove on completion •Can be repeated N times or forever
- 30.
- 31.
- 32.
- 33.
- 34. SKAction: specialty • Animate with textures • Animate with a path (CGPath) •Fade in/out, remove from parent • Short sounds playback
- 35.
- 36.
- 37.
- 38.
- 39.
- 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.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 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.
- 55.
- 56.
- 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.
- 60.
- 61.
- 62.
- 63.
- 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.
- 67.
- 68.