Upload
evenciomendes1861
View
739
Download
3
Embed Size (px)
Citation preview
These are confidential sessions—please refrain from streaming, blogging, or taking pictures
These are confidential sessions—please refrain from streaming, blogging, or taking pictures
Developing 2D Games with Sprite Kit
Allan Schaffer Game Technologies Evangelist [email protected]
Enhancing 2D game developmentSprite Kit
Sprites, Shapes and Particles Animations and Physics Audio, Video, Visual Effects
Enhancing 2D game developmentSprite Kit
Sprites, Shapes and Particles Animations and Physics Audio, Video, Visual Effects
Enhancing 2D game developmentSprite Kit
Agenda
• Sprites and particles • Textures and atlases • Scene transitions • Drawing order • Animation
Sprites and Particles
Scene Graph
Foreground
SKScene
Hero
HUD
Background
Nodes
Life Counter
HP Bar
Tree
Background Image
Tree
Displaying Sprite Kit Content
Application UIView / NSView
SKView
!
[skView presentScene:myScene];
Scrolling Background
Tree
Background Image
HUD
Foreground
Hero
Life Counter
SKScene
The Sprite Kit Game Loop
-update:
SKScene evaluates actions
Each Frame
The Sprite Kit Game Loop
-update:
SKScene evaluates actions-didEvaluateActions
Each FrameSKView renders the scene
-didSimulatePhysics
SKScene simulates physics
Node Classes
SKSpriteNode
SKCropNodeSKLabelNode
SKScene
SKEmitterNode
SKShapeNode
SKNode
SKEffectNode
The base classSKNode
• Used for grouping in node tree @property SKNode* parent; @property NSArray* children;
• Used for positioning itself and children @property CGPoint position; // relative to parent @property CGFloat zRotation; // radians @property CGFloat xScale, yScale; // scaling
• Can control visibility @property CGFloat alpha;@property BOOL hidden;
• Can run actions • Can be a physics body
SKNode
Main rendering node typeSKSpriteNode
• Draws a 2D image ■ Can be a color ■ Can be a texture image ■ Has an explicit size
SKSpriteNode
Simple creationSKSpriteNode
SKSpriteNode *ship = [SKSpriteNode spriteNodeWithImageNamed:@”ship.png”]; ship.position = CGPointMake(40.0,30.0); [scene addChild:ship]; !
• Creates a sprite matching the image size • Centers sprite on image center (0.5, 0.5) • Positions sprite at (40, 30) relative to its parent • Follows UIImage -imageNamed: behavior
Particles!SKEmitterNode
• Full featured 2D particle system • Standard startValue and speed • Advanced keyframe sequence controls
Particle attributes
• Texture • Scale • Rotation • Emission angle • Emission speed • Blend modes • Birth rate • Particle count • Lifetime • Position
• Z position • Speed • Size • Angle • Acceleration • Rotation speed • Scale speed • Color • Blend factor • Alpha
SKEmitterNode
Xcode particle editorSKEmitterNode
• Easy-to-use particle editor ■ Integrated directly into Xcode 5
• Edit SKEmitterNode attributes visually ■ Separates design from programming
• Creates an archived SKEmitterNode ■ Use NSKeyedUnarchiver to unarchive
DemoCreating and loading particles
Node classesSprite Kit Nodes
Class Description
SKNode Parent class of all nodes
SKScene Root of the scene graph
SKSpriteNode Renders a textured sprite
SKEmitterNode Generates and renders particles
SKLabelNode Renders a text string
SKVideoNode Plays video content
SKShapeNode Renders a shape based on a Core Graphics path
SKEffectNode Applies a Core Image filter to its children
SKCropNode Crops its children using a mask
Textures and Atlases
Sprite Kit bitmap dataSKTexture
• Fundamental Sprite Kit bitmap object • Very flexible [SKTexture textureWithImageNamed:@"ship.png"]; [SKTexture textureWithCGImage:myCGImageRef]; [SKTexture textureWithData:rgbaNSData size:CGSizeMake(100, 100)]; [SKTexture textureWithImage:myUIImage]; [SKTexture textureWithRect:CGRectMake(100, 100, 80, 80) inTexture:tex1];
• Properties for filter mode, mipmap generation, pre-loading • Reference from a texture atlas
Key to performanceTexture Atlases
• Many images combined into a single larger image ■ Saves memory ■ Improves drawing efficiency
big_tree_base.png big_tree_middle.png
big_tree_top.png blobShadow.png
cave_base.png cave_destroyed.png
cave_top.png minionSplort.png
small_tree_base.png small_tree_middle.png
small_tree_top.png warrior_throw_hammer.png
In Sprite KitTexture Atlases
• Xcode generates atlases automatically ■ From individual image files ■ Retina and non-retina if provided
• Packed for maximum efficiency ■ Automatic rotation ■ Transparent edges trimmed ■ Opaque images extruded ■ Up to 2048 x 2048
• Put your files in a “.atlas” folder • Drag the folder into your project • Done
Creating a Texture Atlas
Environment.atlas/ big_tree_base.png
big_tree_middle.png big_tree_top.png blobShadow.png
cave_base.png cave_destroyed.png
cave_top.png minionSplort.png
small_tree_base.png small_tree_middle.png
small_tree_top.png warrior_throw_hammer.png
Loading From a Texture Atlas
• Load a SKTexture from a stand-alone file SKTexture *texture = [SKTexture textureWithImageNamed:@”big_tree_base.png”]; !
• Load a SKTexture from a texture atlas SKTexture *texture = [SKTexture textureWithImageNamed:@”big_tree_base.png”]; !
• It’s the same ■ Sprite Kit manages atlases for you
Deeper into SKScene
A scene of contentSKScene
• Root node of the scene graph • Displayed by a SKView • Inherits from SKEffectNode • Runs per-frame loop -update: -didEvaluateActions -didSimulatePhysics
Scrolling Background
Tree
Background Image
HUD
Foreground
Hero
Life Counter
SKScene
OrganizationSKScene
• Typical to create different scenes for ■ Main menu ■ Game options ■ Gameplay ■ Game over
• Level 1 • Level 2 • Level 3 • ... • Level N
Transition between scenesSKTransition
• Performs a transition between current and new SKScene • Standard transitions
■ Cross fade, fade thru color ■ Doors closing, doors opening ■ Flip vertical, flip horizontal ■ Move in, push in, reveal ■ CIFilter transitions
• Option to pause rendering of either scene
ExampleSKTransition
// New scene slides on top of the old scene. SKTransition *moveIn = [SKTransition moveInWithDirection:SKTransitionDirectionUp duration:2.0]; !
// Allow old scene’s animations to continue during transition moveIn.pausesOutgoingScene = NO; !
// Present the new scene with the transition [myView presentScene:newScene transition:moveIn];
Drawing Order and Performance
Standard behaviorDrawing Order
• Two simple rules ■ A parent draws its content before rendering its children ■ Children are rendered in the order they appear in the child array
Helicopter
Missiles
Body
Primary Rotor
Tail Rotor
zPositionDrawing Order
• Gives the node an explicit height ■ Relative to its parent node
• Nodes drawn in global Z order
Helicopter (z=100)
Body (z=0)
Primary Rotor (z=1)
Tail Rotor (z=1)
Missiles (z=-1)
SKScene ignoresSiblingOrder propertyDrawing Order
• Allows nodes in scene to be drawn in any order ■ Sprite Kit batches scene by state ■ Results in fewer draw calls
• With ignoresSiblingOrder and zPosition ■ Each node’s global Z position is calculated ■ Drawn from lowest Z to highest Z ■ Sprite Kit sorts nodes at equal Z for optimal batching
Key insightDrawing Order
• Compose scene as layers ■ Give objects common Z value per layer ■ Place overlapping objects in different layers
• Set ignoreSiblingOrder
Actions and Animations
Actions Overview
[node runAction: [SKAction rotateByAngle:M_PI duration:1.0] ];
• Very simple to use ■ Single action class—SKAction ■ One line creation ■ Chainable, reusable, readable
• Like a scripting language for Sprite Kit ■ Actions directly affect the node it is run on ■ Actions run immediately ■ Removed on completion
Basic SKActions
[SKAction rotateByAngle:M_PI duration:1.0]; !![SKAction moveTo:aCGPoint duration:1.0]; !![SKAction fadeAlphaTo:0.75 duration:1.0]; !![SKAction scaleBy:2.0 duration:1.0]; !![SKAction scaleXBy:1.5 y:0.5 duration:1.0];
SequencesCompound Actions
!
!
[myNode runAction: [SKAction sequence:@[action1, action2, action3]] ];
action1 action2 action3
SKAction Sequence
1.0 sec 2.0 sec 0.5 sec
3.5 sec
GroupsCompound Actions
!
!
[myNode runAction: [SKAction group:@[action1, action2, action3]] ];
action1
action2
action3
SKAction Group
1.0 sec
2.0 sec
0.5 sec
2.0 sec
Sequences of groupsCompound Actions
SKAction *group = [SKAction group:@[scale, rotate]]; !
[myNode runAction: [SKAction sequence:@[move, group, fadeout]] ];
move fadeout
Sequence with a Group
rotate
scale
AnimateSpecialty SKActions
[SKAction animateWithTextures:@[tex0, tex1, tex2] timePerFrame:0.1]; !!!
Follow pathSpecialty SKActions
![SKAction followPath:myPath duration:2.5] ![SKAction followPath:myPath asOffset:YES orientToPath:NO duration:5.0]; !
Remove from parentSpecialty SKActions
/* zero duration */ ![SKAction removeFromParent]; !!!!/* fade out a sprite and then remove it */ !SKAction *fade = [SKAction fadeOutWithDuration:1.0]; SKAction *remove = [SKAction removeFromParent]; ![sprite runAction:[SKAction sequence:@[fade, remove]];
Run blockSpecialty SKActions
/* zero duration, fires once */ ![SKAction runBlock:^{ doSomething(); }] !!!!/* show game over menu after character death animation */ !SKAction *fade = [SKAction fadeOutWithDuration:1.0]; SKAction *remove = [SKAction removeFromParent]; SKAction *showMenu = [SKAction runBlock:^{ [self showGameOverMenu]; }]; ![heroSprite runAction: [SKAction sequence:@[fade, showMenu, remove]] ]; !
Large catalogSKActions
• moveByX: y: duration: • moveTo: duration: • moveToX: duration: • moveToY: duration: • rotateByAngle: duration: • rotateToAngle: duration: • scaleXTo: duration: • scaleYTo: duration: • speedBy: duration: • speedTo: duration: • scaleBy: duration: • scaleXBy: y: duration: • scaleTo: duration: • scaleXTo: y: duration:
• sequence: • group: • setTexture: • runBlock: • runBlock: queue: • removeFromParent • performSelector: onTarget: • resizeByWidth: height: duration: • resizeToWidth: height: duration: • resizeToWidth: duration: • resizeToHeight: duration: • repeatAction: count: • repeatActionForever: • fadeInWithDuration:
• fadeOutWithDuration: • fadeAlphaBy: duration: • fadeAlphaTo: duration: • animateWithTextures: timePerFrame: • animateWithTextures: timePerFrame: resize: • playSoundFileNamed: waitForCompletion: • colorizeWithColor: colorBlendFactor: • colorizeWithColorBlendFactor: duration: • followPath: duration: • followPath: asOffset: orientToPath: • waitForDuration: • waitForDuration: withRange: • runAction: onChildWithName: • customActionWithDuration: actionBlock:
Wrap-Up
• Introduction to Sprite Kit • Sprites and particles • Textures and atlases • Scene transitions • Drawing order • Animation
More Information
Allan Schaffer Game Technologies Evangelist [email protected] !
Apple Developer Forums http://devforums.apple.com/ !
Developer Documentation http://developer.apple.com/library/