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

• www.hufkens.net

• alain@hufkens.net

• @hufkens

!

• www.weetaps.com

• @weetaps

COntact