iOS 2D Gamedev @ CocoaHeads
-
Upload
alain-hufkens -
Category
Internet
-
view
515 -
download
3
description
Transcript of iOS 2D Gamedev @ CocoaHeads
iOS ~
2d GameDev
Alain Hufkens - @hufkens!CocoaHeadsBE - Hasselt - 2014-06-24
drinks sponsored by
• Geek Dad
• 15y programming
• Freelance
• Wee Taps
• CoderDojo
Intro
Agenda
• Game Engines • SpriteKit • SpriteBuilder / Cocos2D • Q&A
2d Game engines
Cocos2d• 2008
• Simple 2D game engine
• +10k games built with Cocos2D
• Bought by Zynga
• Spawned into Cocos2D-X
• Development stopped for a while
Cocos2D V1.x
Cocos2D V2.x
Sprite Kit• 2013
• 2D Game Framework
• iOS7+ only
• Provided by Apple (since iOS7)
• Improved in iOS8
• Simple to prototype games
Sprite kit
Cocos2D V3• 2014
• Cocos2D v3
• Spritebuilder
• Supported by Apportable
• 2D Game Development Suite
• Cross Platform & Native
Spritebuilder
Sprite kit
Scene graphScene
Background Foreground
HUD
Hero
Score
Bg Image
Tree
Tree
Game Loop
Game Loop
Node Classes
SKNode
SKEmitterNode
SKSpriteNode
SKLabelNode
SKShapeNode SKScene
SKEffectsNode
SKCropNode
SKNode!The base class!
• Used for grouping in node tree @property SKNode *parent; @property SKNode *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
Sprite Kit Nodes!Node classes
Class DescriptionSKNode Parent class of all nodesSKScene Root of the scene graph SKSpriteNode!
Renders a textured spriteSKEmitterNode Generates and renders particlesSKLabelNode Renders a text stringSKVideoNode Plays video contentSKShapeNode Renders a shapeSKEffectNode Applies a Core Image filter to its childrenSKCropNode Crops its children using a mask
Sprites & particles
• Draws a Sprite • Can be a:
• color • textured image
• Has a explicit size
SKSpriteNode
SKSpriteNode
SKSpriteNode!Simple creation
SKSpriteNode *rocket = [SKSpriteNode spriteNodeWithImageNamed:@"rocket.png"]; !rocket.position = CGPointMake(50.0, 50.0); ![self addChild:rocket];
• Full Featured 2D particle system • Configurable by attributes • Xcode particle editor
• easy-to-use • visual preview
SKEmitterNode!Particles!
SKEmitterNode!Particles!!
NSString *particlePath = [[NSBundle mainBundle] pathForResource:@"flame" ofType:@“sks"]; !SKEmitterNode *flames = [NSKeyedUnarchiver unarchiveObjectWithFile:particlePath]; !flames.particlePosition = CGPointMake(50.0, 50.0); ![self addChild:flames];
Demo
Textures & Atlases
• Fundamental Sprite Kit object !
• Very Flexible
[SKTexture textureWithImageNamed:@"rocket.png"]; [SKTexture textureWithCGImage:myCGImageRef]; [SKTexture textureWithData:rgbaNSData size:CGSizeMake(100, 100)]; [SKTexture textureWithImage:myUIImage]; [SKTexture textureWithRect:CGRectMake(100, 100, 80, 80) inTexture:tex1];
SKTexture!Sprite Kit bitmap data
• Many images combined into a single larger image
• Saves memory
• Improves drawing efficiency
rocket_red.png rocket_green.png
rocket_flames.png …
cloud.png character_1.png character_2.png character_3.png
….
Texture Atlases!Key to performance
• Load a SKTexture from a stand-alone file
• Load a SKTexture from a texture atlas
SKTexture *texture = [SKTexture textureWithImageNamed:@“rocket.png"];
SKTexture *texture = [SKTexture textureWithImageNamed:@“rocket.png"];
Texture Atlases!Loading from a Texture Atlas
It’s the same! Sprite Kit manages atlases for you
Demo
Scenes & Transitions
• Root node of the scene graph
• Displayed by a SKView
• Inherits from SKEffectsNode
• Runs per-frame loop
-update: -didEvaluateActions -didSimulatePhysics
SKScene
Background Foreground
HUD
Hero
Score
Bg
Tree
Tree
SKScene!Presents the content
SKScene!Organization
• Level 1 !
• Level 2 !
• Level 3 !
• … !
• Level N
• Main menu
• Game Options
• Game
• Game Over
Demo
Actions & Animations
• Very simple to use • Single action class - SKAction • One line creation • Chain-able, reusable, readable
• Like a scripting language for Sprite Kit • Actions directly affect the node it is run on • Actions run immediately • Removed on completion
[node runAction: [SKAction rotateByAngle:M_PI duration:1.0]];
Actions!
Basic Actions!!
!
[SKAction rotateByAngle:M_PI duration:1.0]; ![SKAction moveTo:aCGPoint duration:1.0]; ![SKAction fadeAlphaTo:0.8 duration:1.0]; ![SKAction scaleBy:2.0 duration:1.0]; ![SKAction scaleXBy:1.5 y:0.5 duration:1.0];
Compound Actions!Sequences!
[node runAction: [SKAction sequence:@[action1, action2, action3]]];
action1
1.0 sec
action2
2.0 sec
action3
0.5 sec
SKAction Sequence
3.5 sec
Compound Actions!Groups!
[node runAction: [SKAction group:@[action1, action2, action3]]];
action1 1.0 sec
action2 2.0 sec
action3 0.5 sec
SKAction Group
2.0 sec
Specialty SKActions!Animate!
[SKAction animateWithTextures:@[tex0, tex1, tex2, …] timePerFrame:0.1];
Specialty SKActions!Follow path!
[SKAction followPath:myPath duration:2.5]; ![SKAction followPath:myPath asOffset:YES orientToPath:NO duration:5.0];
• Zero duration, fires once
• Show the Game Over menu after character death animation
[SKAction runBlock:^{ doSomething(); }];
SKAction *fade = [SKAction fadeOutWithDuration:1.0]; SKAction *remove = [SKAction removeFromParent]; SKAction *showMenu = [SKAction runBlock:^{ [self showGameOverMenu]; }]; [heroSprite runAction: [SKAction sequence:@[fade, showMenu, remove]] ];
Specialty SKActions!Run block
• 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:
SKActions!Huge list
Demo
physics
• Uses Box2D under the hood • open source physics engine • C++
• Objective-C API • Fully integrated into Sprite Kit
Box2D
SpriteKit
Your code
Sprite Kit Physics
• Set the physics body of your Sprite
+ =
Physics Body
• Shape bodies
• Circle
• Rectangle
• Custom shaped
• Pixel (iOS8)
• Edge loop bodiesedge
Physics Bodies
• Restitution • Density • Friction
!
• Dynamic • usesPreciseCollisionDetection • allowsRotation • affectedByGravity • node • …
Physics Properties!
Demo
Spritebuilder Cocos2d
• SpriteBuilder Tool • Scenes designer • Animation timeline • Less code to write !
• Open Source • Faster releases !
• With Apportable also native Android
Features!
Demo
Thanks