iOS 2D Gamedev @ CocoaHeads
•
2 likes•2,142 views
A presentation I gave at CocoaHeads Belgium about 2D Game Development on iOS. More specifically about SpriteKit and Cocos2D
Recommended
More Related Content
What's hot
What's hot (6)
Viewers also liked
Viewers also liked (20)
Similar to iOS 2D Gamedev @ CocoaHeads
Similar to iOS 2D Gamedev @ CocoaHeads (20)
Recently uploaded
Recently uploaded (20)
iOS 2D Gamedev @ CocoaHeads
- 1. iOS ~ 2d GameDev Alain Hufkens - @hufkens! CocoaHeadsBE - Hasselt - 2014-06-24
- 3. • Geek Dad • 15y programming • Freelance • Wee Taps • CoderDojo Intro
- 5. Agenda • Game Engines • SpriteKit • SpriteBuilder / Cocos2D • Q&A
- 7. Cocos2d • 2008 • Simple 2D game engine • +10k games built with Cocos2D • Bought by Zynga • Spawned into Cocos2D-X • Development stopped for a while
- 8. Cocos2D V1.x
- 9. Cocos2D V2.x
- 10. Sprite Kit • 2013 • 2D Game Framework • iOS7+ only • Provided by Apple (since iOS7) • Improved in iOS8 • Simple to prototype games
- 11. Sprite kit
- 12. Cocos2D V3 • 2014 • Cocos2D v3 • Spritebuilder • Supported by Apportable • 2D Game Development Suite • Cross Platform & Native
- 13. Spritebuilder
- 14. Sprite kit
- 15. Scene graph Scene Background Foreground HUD Hero Score Bg Image Tree Tree
- 16. Game Loop
- 17. Game Loop
- 19. 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
- 20. Sprite Kit Nodes! Node classes 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 SKEffectNode Applies a Core Image filter to its children SKCropNode Crops its children using a mask
- 22. • Draws a Sprite • Can be a: • color • textured image • Has a explicit size SKSpriteNode SKSpriteNode
- 23. SKSpriteNode! Simple creation SKSpriteNode *rocket = [SKSpriteNode spriteNodeWithImageNamed:@"rocket.png"]; ! rocket.position = CGPointMake(50.0, 50.0); ! [self addChild:rocket];
- 24. • Full Featured 2D particle system • Configurable by attributes • Xcode particle editor • easy-to-use • visual preview SKEmitterNode! Particles!
- 25. 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];
- 26. Demo
- 28. • 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
- 29. • 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
- 30. • 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
- 31. Demo
- 33. • 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
- 34. SKScene! Organization • Level 1 ! • Level 2 ! • Level 3 ! • … ! • Level N • Main menu • Game Options • Game • Game Over
- 35. Demo
- 37. • 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!
- 38. 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];
- 39. 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
- 40. 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
- 41. Specialty SKActions! Animate! [SKAction animateWithTextures:@[tex0, tex1, tex2, …] timePerFrame:0.1];
- 42. Specialty SKActions! Follow path! [SKAction followPath:myPath duration:2.5]; ! [SKAction followPath:myPath asOffset:YES orientToPath:NO duration:5.0];
- 43. • 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
- 44. • 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
- 45. Demo
- 46. physics
- 47. • 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
- 48. • Set the physics body of your Sprite + = Physics Body
- 49. • Shape bodies • Circle • Rectangle • Custom shaped • Pixel (iOS8) • Edge loop bodies edge Physics Bodies
- 50. • Restitution • Density • Friction ! • Dynamic • usesPreciseCollisionDetection • allowsRotation • affectedByGravity • node • … Physics Properties!
- 51. Demo
- 53. • SpriteBuilder Tool • Scenes designer • Animation timeline • Less code to write ! • Open Source • Faster releases ! • With Apportable also native Android Features!
- 54. Demo
- 55. Thanks
- 56. • www.hufkens.net • alain@hufkens.net • @hufkens ! • www.weetaps.com • @weetaps COntact