1. COCOS2D + BOX2D
Creating physics game in 1 hour

2. WHO IS ROD?
• Founder
of Prop Group
www.prop.gr
• Background in enterprise
software, now iPhone+iPad
games!
• 2D physics game, Payload in
the AppStore

3. In Progress...
www.cocos2dbook.com

4. SNOWBALL TOSS!

5. WHY COCOS2D
• Games are fun! Making a game does not have to be hard.
• Write less infrastructure code, spend more time on design
and core gameplay
• OpenGL ES rendering and performance without having to
learn OpenGL ES to get started
• It is free!

6. GETTING COCOS2D
http://github.com/cocos2d/cocos2d-iphone

7. GETTING COCOS2D - PART 2
1. Clone the Git Repository
2. Install the Templates

8. XCODE TEMPLATES
• New Project -> Cocos2D Templates

9. COCOS2D
• Objective-C framework for games
• Scene Management, Textures, Audio
• Everything but the kitchen sink (3D stuff)*
• OpenGL ES rendering and optimizations,
Actions, Tile Maps, Parallax Scrolling, Scheduler,
High Score service, ...

10. COCOS2D
ESSENTIALS
• Your game is divided into scenes, scenes into
layers
• Layers have what you care about, the Sprites
• Director is used to switch between scenes
• Everything
uses the CC namespace, so layers
are CCLayers, CCScenes, CCSprites ...

11. LAYERS AND SCENES
CCLayer
CCScene
Gameplay
Gameplay
CCSprite(s) Scene
CCLayer
Background

12. LAYERS AND TOUCH
Accelerometer
CCLayer CCScene
CCLayer Gameplay
Scene
CCLayer
Touch

13. MULTIPLE SCENES
CCLayer CCScene
CCLayer Gameplay CCScene
Scene
CCLayer
Director
CCLayer CCScene
Level
CCLayer Completed
Scene
CCLayer

14. COCOS2D
ACTIONS
• Actionsare an easy way to apply transitions, effects, and
animations to your sprites
• MoveTo, MoveBy, ScaleBy, ScaleTo, FadeIn, FadeOut ...
CCAction *moveAction = [CCMoveBy actionWithDuration:2.0f
position:CGPointMake(50.0f,0.0f)];
[playerSprite runAction:moveAction];
2 seconds

15. COCOS2D+BOX2D
ESSENTIALS 2
• Box2D is C++
• 2Drigid physics simulation engine with
continuous collision detection
• All
your files that touch C++ or include it
must be Objective-C++ (.mm)
• Tuned for 1 meter sized objects!
• Use a fixed time step!

16. A GAME IN 7 STEPS
• Let’s begin

17. STEP 1
• Attach the director to the AppDelegate
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[window setUserInteractionEnabled:YES];!// cocos2d will inherit these values
[window setMultipleTouchEnabled:YES]; // cocos2d will inherit these values
// create an openGL view inside a window
[[CCDirector sharedDirector] attachInView:window];!
[window makeKeyAndVisible];! !
• Director Options

18. STEP 2
• init()
• createPhysicsWorld
• debug draw
• ground body

19. INIT()
-(id)init {
! if ((self=[super init])) {
! ! CGSize screenSize = [CCDirector sharedDirector].winSize;
! !
! ! // enable touches
! ! self.isTouchEnabled = YES;
! ! // enable accelerometer
! ! self.isAccelerometerEnabled = YES;
! !
! ! [self createPhysicsWorld];
! !
! ! [self addNewBodyWithCoords:ccp((screenSize.width/2)+80.0f, screenSize.height/2)
! ! ! ! ! withDimensions:ccp(1.0f,0.5f)
! ! ! ! ! ! andDensity:3.0f
! ! ! ! ! andWithSprite:ICE_BLOCK_FILENAME_1];
! !
! ! // Start the scheduler to call the tick function
! ! [self schedule: @selector(tick:)];
! }
! return self;
}

20. CREATEPHYSICSWORLD()
// Define the gravity vector.
! b2Vec2 gravity;
! gravity.Set(0.0f, -10.0f);
!
! // Do we want to let bodies sleep?
! // This will speed up the physics simulation
! bool doSleep = true;
!
! // Construct a world object, which will hold and simulate the rigid bodies.
! world = new b2World(gravity, doSleep);
!
! world->SetContinuousPhysics(true);
b2BodyDef groundBodyDef;
! groundBodyDef.position.Set(0, 0); // bottom-left corner
!
! // Call the body factory which allocates memory for the ground body
! // from a pool and creates the ground box shape (also from a pool).
! // The body is also added to the world.
! b2Body* groundBody = world->CreateBody(&groundBodyDef);
b2PolygonShape groundBox;! !
!
! // bottom
! groundBox.SetAsEdge(b2Vec2(0,0), b2Vec2(screenSize.width/PTM_RATIO,0));
! groundBody->CreateFixture(&groundBox);

21. STEP 3
• Create the dynamic blocks

22. CODE+DEMO
Physics World + Dynamic Blocks

23. STEP 4
• Touch Events

24. CODE+DEMO
Touch Events Demo

25. STEP 5
• Time to add graphics!

26. GRAPHICS DETAILS
• Background Layer
• Sprites for the static shapes
• Sprites for the snowballs
• Penguin animation
• Instructions Layer

27. STEP 6
Let it snow! - Fun with
Particle Systems

28. STEP 7
Pump up the volume!

29. CLOSING THOUGHTS
• Sample Code != Production Code
• Cocos2d Website:
http://www.cocos2d-iphone.org/
Look at the sample tests included with Cocos2D!

30. THANK YOU
• rod@prop.gr
• twitter.com/rodstrougo
• www.prop.gr
• www.cocos2dbook.com

31. EXTRAS
• SpriteSheets
• Creating Physics Models
• Collision detection
• Accelerometer Filters
• Multi-touch handling

32. HOW-TO PHYSICS MODELS
• VertexHelper & Mekanimo
http://github.com/jfahrenkrug/VertexHelper
http://www.mekanimo.net/
• Ricardo’s LevelSVG
http://www.sapusmedia.com/levelsvg/