SlideShare a Scribd company logo
COCOS2D + BOX2D
  Creating physics game in 1 hour
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
In Progress...


www.cocos2dbook.com
SNOWBALL TOSS!
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!
GETTING COCOS2D




http://github.com/cocos2d/cocos2d-iphone
GETTING COCOS2D - PART 2
     1. Clone the Git Repository
     2. Install the Templates
XCODE TEMPLATES

• New   Project -> Cocos2D Templates
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, ...
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 ...
LAYERS AND SCENES
              CCLayer
                           CCScene
              Gameplay

                           Gameplay
CCSprite(s)                 Scene
              CCLayer
              Background
LAYERS AND TOUCH
Accelerometer

                   CCLayer   CCScene

                   CCLayer   Gameplay
                              Scene
                   CCLayer


   Touch
MULTIPLE SCENES
CCLayer     CCScene

CCLayer      Gameplay       CCScene
              Scene
CCLayer
                            Director
CCLayer     CCScene
              Level
CCLayer     Completed
              Scene
CCLayer
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
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!
A GAME IN 7 STEPS


• Let’s   begin
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
STEP 2


• init()

• createPhysicsWorld

• debug    draw

• ground   body
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;
}
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);
STEP 3

• Create   the dynamic blocks
CODE+DEMO
Physics World + Dynamic Blocks
STEP 4

• Touch   Events
CODE+DEMO
 Touch Events Demo
STEP 5

• Time   to add graphics!
GRAPHICS DETAILS

• Background     Layer

• Sprites   for the static shapes

• Sprites   for the snowballs

• Penguin   animation

• Instructions   Layer
STEP 6


Let it snow! - Fun with
Particle Systems
STEP 7


Pump up the volume!
CLOSING THOUGHTS

• Sample   Code != Production Code

• Cocos2d Website:

 http://www.cocos2d-iphone.org/

 Look at the sample tests included with Cocos2D!
THANK YOU


• rod@prop.gr

• twitter.com/rodstrougo

• www.prop.gr

• www.cocos2dbook.com
EXTRAS

• SpriteSheets

• Creating    Physics Models

• Collision   detection

• Accelerometer     Filters

• Multi-touch   handling
HOW-TO PHYSICS MODELS


• VertexHelper    & Mekanimo

 http://github.com/jfahrenkrug/VertexHelper

 http://www.mekanimo.net/

• Ricardo’s   LevelSVG

 http://www.sapusmedia.com/levelsvg/

More Related Content

PDF
Cocos2d game programming 2
PDF
Get Into Sprite Kit
PDF
Cocos2d programming
PDF
iOS 2D Gamedev @ CocoaHeads
PPTX
Academy PRO: Unity 3D. Scripting
PPTX
Academy PRO: Unity 3D. Environment
PPTX
Game development with Cocos2d
PPTX
Cocos2d for beginners
Cocos2d game programming 2
Get Into Sprite Kit
Cocos2d programming
iOS 2D Gamedev @ CocoaHeads
Academy PRO: Unity 3D. Scripting
Academy PRO: Unity 3D. Environment
Game development with Cocos2d
Cocos2d for beginners

Similar to Creating physics game in 1 hour (20)

PDF
Demo creating-physics-game.
PDF
Cocos2d 소개 - Korea Linux Forum 2014
PDF
Introduction to Cocos2d
PDF
Introduction to-cocos2d
PDF
Game development with Cocos2d-x Engine
PPTX
Iphone game developement - In a game things always move
PDF
cocos2d for i Phoneの紹介
PDF
Basics cocos2d
PDF
iOS Game Development with Cocos2D
PDF
Programmers guide
PPTX
KEY
Cocos2d実践編 1.0.0rc
KEY
iOS Game Development with Cocos2d
KEY
cocos2d 事例編 HungryMasterの実装から
PPTX
iOS Gaming with Cocos2d
PPTX
Game development via_sprite_kit
PDF
Under Cocos 2 D Tree_mdevcon 2013
PDF
Under Cocos2D Tree @mdvecon 2013
PDF
Introduction to Box2D Physics Engine
PDF
Introduction to CocosSharp
Demo creating-physics-game.
Cocos2d 소개 - Korea Linux Forum 2014
Introduction to Cocos2d
Introduction to-cocos2d
Game development with Cocos2d-x Engine
Iphone game developement - In a game things always move
cocos2d for i Phoneの紹介
Basics cocos2d
iOS Game Development with Cocos2D
Programmers guide
Cocos2d実践編 1.0.0rc
iOS Game Development with Cocos2d
cocos2d 事例編 HungryMasterの実装から
iOS Gaming with Cocos2d
Game development via_sprite_kit
Under Cocos 2 D Tree_mdevcon 2013
Under Cocos2D Tree @mdvecon 2013
Introduction to Box2D Physics Engine
Introduction to CocosSharp
Ad

Recently uploaded (20)

PDF
Encapsulation theory and applications.pdf
PDF
Machine learning based COVID-19 study performance prediction
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
Spectroscopy.pptx food analysis technology
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPTX
Cloud computing and distributed systems.
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Approach and Philosophy of On baking technology
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
cuic standard and advanced reporting.pdf
Encapsulation theory and applications.pdf
Machine learning based COVID-19 study performance prediction
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Spectroscopy.pptx food analysis technology
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
MIND Revenue Release Quarter 2 2025 Press Release
Per capita expenditure prediction using model stacking based on satellite ima...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Advanced methodologies resolving dimensionality complications for autism neur...
Review of recent advances in non-invasive hemoglobin estimation
Cloud computing and distributed systems.
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
“AI and Expert System Decision Support & Business Intelligence Systems”
Approach and Philosophy of On baking technology
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Digital-Transformation-Roadmap-for-Companies.pptx
The Rise and Fall of 3GPP – Time for a Sabbatical?
Unlocking AI with Model Context Protocol (MCP)
cuic standard and advanced reporting.pdf
Ad

Creating physics game in 1 hour

  • 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
  • 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!
  • 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
  • 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/