2013-04-16 cocos2d & chipmunk
-
Upload
cocoaheads-tricity -
Category
Technology
-
view
907 -
download
6
description
Transcript of 2013-04-16 cocos2d & chipmunk
![Page 1: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/1.jpg)
cocos2d & Chipmunk2D games development for iOS
Konrad Kołakowski, Playsoft
![Page 2: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/2.jpg)
cocos2d
What is it?
![Page 3: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/3.jpg)
cocos2d - what was made with it?
Kingdom Rush
![Page 4: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/4.jpg)
cocos2d - what was made with it?
Robot Unicorn Attack
![Page 5: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/5.jpg)
cocos2d - what was made with it?
League of Evil
![Page 6: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/6.jpg)
Chipmunk
What is it?
![Page 7: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/7.jpg)
Chipmunk - what was made with it?
Waking Mars
![Page 8: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/8.jpg)
Chipmunk - what was made with it?
Feed me Oil
![Page 9: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/9.jpg)
Chipmunk - what was made with it?
I Dig It
![Page 10: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/10.jpg)
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
![Page 11: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/11.jpg)
Creating project in Xcode
That's all, in this moment, after creating a project you should see following options:
![Page 12: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/12.jpg)
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.
![Page 13: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/13.jpg)
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.
![Page 14: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/14.jpg)
Podstawy cocos2d - warstwy, węzły
![Page 15: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/15.jpg)
cocos2d basics - layers, nodes
![Page 16: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/16.jpg)
cocos2d basics - coordinates
Coordinate system, anchor points.
![Page 17: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/17.jpg)
cocos2d basics - adding elements
How to draw such an alien?
// GameScene.h#import "cocos2d.h"
@interface GameScene : CCScene@end
![Page 18: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/18.jpg)
// 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
![Page 19: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/19.jpg)
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
![Page 20: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/20.jpg)
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// (...)
}}
![Page 21: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/21.jpg)
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.
![Page 22: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/22.jpg)
cocos2d basics - actions
![Page 23: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/23.jpg)
cocos2d basics - actions
![Page 24: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/24.jpg)
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
![Page 25: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/25.jpg)
- 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
![Page 26: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/26.jpg)
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.
![Page 27: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/27.jpg)
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
![Page 28: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/28.jpg)
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
![Page 29: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/29.jpg)
Chipmunk basics - starting a simulation
// Inside a layer 'init' method[self scheduleUpdate];
// 'update' is called every frame-(void) update:(ccTime)dt {
cpSpaceStep(space, dt);}
![Page 30: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/30.jpg)
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
![Page 31: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/31.jpg)
Questions?
![Page 32: 2013-04-16 cocos2d & chipmunk](https://reader033.fdocuments.in/reader033/viewer/2022061202/547b346e5906b55e798b45cc/html5/thumbnails/32.jpg)
Konrad Koł[email protected]