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 g...
In Progress...
www.cocos2dbook.com
SNOWBALLTOSS!
WHY COCOS2D
• Games are fun! Making a game does not have to be hard.
• Write less infrastructure code, spend more time on ...
GETTING COCOS2D
http://github.com/cocos2d/cocos2d-iphone
GETTING COCOS2D - PART 2
1. Clone the Git Repository
2. Install theTemplates
XCODETEMPLATES
• New Project -> Cocos2DTemplates
COCOS2D
• Objective-C framework for games
• Scene Management,Textures,Audio
• Everything but the kitchen sink (3D stuff)*
...
COCOS2D
ESSENTIALS
• Your game is divided into scenes, scenes into
layers
• Layers have what you care about, the Sprites
•...
LAYERS AND SCENES
CCSprite(s)
Background
CCLayer
Gameplay
Scene
CCScene
Gameplay
CCLayer
LAYERS ANDTOUCH
Accelerometer
Gameplay
Scene
CCLayer
CCScene
CCLayer
CCLayer
Touch
MULTIPLE SCENES
Gameplay
Scene
CCLayer
CCScene
CCLayer
CCLayer
Level
Completed
Scene
CCLayer
CCScene
CCLayer
CCLayer
Direc...
COCOS2D
ACTIONS
• Actions are an easy way to apply transitions, effects, and
animations to your sprites
• MoveTo, MoveBy, ...
COCOS2D+BOX2D
ESSENTIALS 2
• Box2D is C++
• 2D rigid physics simulation engine with
continuous collision detection
• All y...
A GAME IN 7 STEPS
• Let’s begin
STEP 1
• Attach the director to the AppDelegate
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
...
STEP 2
• init()
• createPhysicsWorld
• debug draw
• ground body
INIT()
-(id)init {
! if ((self=[super init])) {
! ! CGSize screenSize = [CCDirector sharedDirector].winSize;
! !
! ! // en...
CREATEPHYSICSWORLD()
// Define the gravity vector.
! b2Vec2 gravity;
! gravity.Set(0.0f, -10.0f);
!
! // Do we want to let...
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
• Inst...
STEP 6
Let it snow! - Fun with
Particle Systems
STEP 7
Pump up the volume!
CLOSINGTHOUGHTS
• Sample Code != Production Code
• Cocos2d Website:
http://www.cocos2d-iphone.org/
Look at the sample test...
THANKYOU
• 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/
• Rica...
Upcoming SlideShare
Loading in …5
×

Demo creating-physics-game.

830 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
830
On SlideShare
0
From Embeds
0
Number of Embeds
68
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Demo creating-physics-game.

  1. 1. COCOS2D + BOX2D Creating physics game in 1 hour
  2. 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. 3. In Progress... www.cocos2dbook.com
  4. 4. SNOWBALLTOSS!
  5. 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. 6. GETTING COCOS2D http://github.com/cocos2d/cocos2d-iphone
  7. 7. GETTING COCOS2D - PART 2 1. Clone the Git Repository 2. Install theTemplates
  8. 8. XCODETEMPLATES • New Project -> Cocos2DTemplates
  9. 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. 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. 11. LAYERS AND SCENES CCSprite(s) Background CCLayer Gameplay Scene CCScene Gameplay CCLayer
  12. 12. LAYERS ANDTOUCH Accelerometer Gameplay Scene CCLayer CCScene CCLayer CCLayer Touch
  13. 13. MULTIPLE SCENES Gameplay Scene CCLayer CCScene CCLayer CCLayer Level Completed Scene CCLayer CCScene CCLayer CCLayer Director CCScene
  14. 14. COCOS2D ACTIONS • Actions are 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. 15. COCOS2D+BOX2D ESSENTIALS 2 • Box2D is C++ • 2D rigid 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. 16. A GAME IN 7 STEPS • Let’s begin
  17. 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. 18. STEP 2 • init() • createPhysicsWorld • debug draw • ground body
  19. 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. 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. 21. STEP 3 • Create the dynamic blocks
  22. 22. CODE+DEMO Physics World + Dynamic Blocks
  23. 23. STEP 4 • Touch Events
  24. 24. CODE+DEMO Touch Events Demo
  25. 25. STEP 5 • Time to add graphics!
  26. 26. GRAPHICS DETAILS • Background Layer • Sprites for the static shapes • Sprites for the snowballs • Penguin animation • Instructions Layer
  27. 27. STEP 6 Let it snow! - Fun with Particle Systems
  28. 28. STEP 7 Pump up the volume!
  29. 29. CLOSINGTHOUGHTS • Sample Code != Production Code • Cocos2d Website: http://www.cocos2d-iphone.org/ Look at the sample tests included with Cocos2D!
  30. 30. THANKYOU • rod@prop.gr • twitter.com/rodstrougo • www.prop.gr • www.cocos2dbook.com
  31. 31. EXTRAS • SpriteSheets • Creating Physics Models • Collision detection • Accelerometer Filters • Multi-touch handling
  32. 32. HOW-TO PHYSICS MODELS • VertexHelper & Mekanimo http://github.com/jfahrenkrug/VertexHelper http://www.mekanimo.net/ • Ricardo’s LevelSVG http://www.sapusmedia.com/levelsvg/

×