2013-04-16 cocos2d & chipmunk

Transcript

1. cocos2d & Chipmunk 2D games development for iOS Konrad Kołakowski, Playsoft
2. cocos2d What is it?
3. cocos2d - what was made with it? Kingdom Rush
4. cocos2d - what was made with it? Robot Unicorn Attack
5. cocos2d - what was made with it? League of Evil
6. Chipmunk What is it?
7. Chipmunk - what was made with it? Waking Mars
8. Chipmunk - what was made with it? Feed me Oil
9. Chipmunk - what was made with it? I Dig It
10. Creating project in Xcode 1. Download cocos2d-iphone: www.cocos2d- iphone.org/download 2. If you want to comfortably creating new games, install templates for Xcode ( run this command in Terminal ): ./install-templates.sh -f -u
11. Creating project in Xcode That's all, in this moment, after creating a project you should see following options:
12. Creating project in Xcode As you can see cocos2d delivers Chipmunk code in theirs templates. Beside Chipmunk there is also version with Box2D integrated, similar 2D physics.
13. cocos2d basics - layers, nodes cocos2d logic is divided to scenes. Scene is a main node to which we connect next ones ( layers, sprites, particle effects etc. ) Each element added to the game ( except scenes ) have to be added to some parent element.
14. Podstawy cocos2d - warstwy, węzły
15. cocos2d basics - layers, nodes
16. cocos2d basics - coordinates Coordinate system, anchor points.
17. cocos2d basics - adding elements How to draw such an alien? // GameScene.h #import "cocos2d.h" @interface GameScene : CCScene @end
18. // GameScene.m #import "GameScene.h" @implementation GameScene -(id) init { self = [super init]; if(self) { // 1 CGSize s = [CCDirector sharedDirector].winSize; // 2 CCSprite* invader = [CCSprite spriteWithFile: @"invader.png" ]; invader.position = ccp(s.width/ 2, s.height/2); // 3 [self addChild: invader]; } return self; } @end cocos2d basics - adding elements
19. To enable gathering touch events on our layer: [self setIsTouchEnabled: YES]; Next we need to implement CCStandardTouchDelegate methods: - (void)ccTouchesEnded:(NSSet*)touches withEvent:(UIEvent*)event; - (void)ccTouchesBegan:(NSSet*)touches withEvent:(UIEvent*)event; - (void)ccTouchesMoved:(NSSet*)touches withEvent:(UIEvent*)event; - (void)ccTouchesEnded:(NSSet*)touches withEvent:(UIEvent*)event; - (void)ccTouchesCancelled:(NSSet*)touches withEvent:(UIEvent*)event; cocos2d basics - touch support
20. cocos2d basics - touch support - (void)ccTouchesEnded:(NSSet*)touches withEvent:(UIEvent*) event { for( UITouch *touch in touches ) { CGPoint pos = [touch locationInView: [touch view]]; pos = [[CCDirector sharedDirector] convertToGL: location]; // Do something with position // (...) } }
21. cocos2d basics - actions Actions are a nice element of cocos2d framework. They allow to easily create uncomplicated animations or repeated logic. Especially with Obj-C blocks. We can join actions in sequences, adding easing etc.
22. cocos2d basics - actions
23. cocos2d basics - actions
24. Following code will cause that our invader will turn around and move by 50 points. Everything in one second. -(void) roll { CCMoveBy* move = [CCMoveBy actionWithDuration: 1.0f position: ccp( 50.0f, 0.0f)]; CCRotateBy* rotate = [CCRotateBy actionWithDuration: 1.0f angle: 360.0f]; [invader_ runAction: move]; [invader_ runAction: rotate]; } cocos2d basics - actions
25. - creating/destroying all objects should be performed through cpSpaceNew, cpSpaceFree, cpBodyNew, etc. - to configure and create a space: cpSpace* space = cpSpaceNew(); cpSpaceSetGravity(space, ccp(0.0f, -500.0f)); Chipmunk basics - creating a space
26. Chipmunk basics - physical objects Concept of shape and body: A body is a physical state ( mass, position, rotation... ) and shapes are used for recognizing collisions.
27. Creating a "floor" // 1 CGSize s = [CCDirector sharedDirector].winSize; CGPoint lowerLeft = ccp(0, 0); CGPoint lowerRight = ccp(s.width, 0); float height = 20.0f; // 2 cpBody* groundBody = cpBodyNewStatic(); // 3 cpShape* groundShape = cpSegmentShapeNew(groundBody, lowerLeft, lowerRight, height); cpShapeSetElasticity(groundShape, 0.2f); cpShapeSetFriction(groundShape, 1.0f); // 4 cpSpaceAddShape(space, groundShape); Chipmunk basics - physical objects
28. Creating and adding a rectangle object: static const float boxW = 30.0f; static const float boxH = 50.0f; static const float mass = 2.5f; cpBody* body = cpBodyNew(mass, cpMomentForBox(mass, boxW, boxH)); cpBodySetPosition(body, ccp(s.width/2, s.height/2)); cpSpaceAddBody(space, body); cpShape* shape = cpBoxShapeNew(body, boxW, boxH); cpShapeSetElasticity(shape, 0.8f); cpShapeSetFriction(shape, 1.0f); cpSpaceAddShape(space, shape); Chipmunk basics - physical objects
29. Chipmunk basics - starting a simulation // Inside a layer 'init' method [self scheduleUpdate]; // 'update' is called every frame -(void) update:(ccTime)dt { cpSpaceStep(space, dt); }
30. Summary Those are only the basics of those two frameworks, more things are waiting to discover! Official documentation: chipmunk-physics. net/release/ChipmunkLatest-Docs www.cocos2d-iphone.org/api-ref/latest-stable
31. Questions?
32. Konrad Kołakowski konrad.kolakowski@me.com