Mac Dev

In this entry I am going to cover using Chipmunk's collision pair function. This function is used to set up a collision test between two objects. If Chipmunk detects that two predefined objects have collided, the callback function that was passed to the collision pair function gets called. To show this we are going to extend the code from the last tutorial, adding a rock and a particle system.

The first thing we are going to do is add rock.png to our resources. Rock.png can be found in the source code for this entry. Next, we're going to add a method called makeSpaceRock to our GameLayer class within GameScene.m. Here is the code you need to add:

 
-(void) makeSpaceRockX: (float) x y:(float)y
{
	Sprite *rock = [[Sprite spriteWithFile:@"rock.png"] retain];
	rock.position = cpv(x,y);
	[self addChild: rock];
 
	cpVect verts[] = {
		cpv(-54,-43),
		cpv(-54, 43),
		cpv(54, 43),
		cpv(54,-43),
	};
 
	cpBody *rockBody = cpBodyNew(200.0f, INFINITY);
	rockBody->p = cpv(x, y);
	rockBody->v = cpv(0, 0);
 
	cpSpaceAddBody(space, rockBody);
 
	cpShape * rockShape = cpPolyShapeNew(rockBody, 4, verts, cpvzero);
	rockShape->e = 0.9f; rockShape->u = 0.9f;
	rockShape->data = rock;
	rockShape->collision_type = 0; //New!
	cpSpaceAddShape(space, rockShape);
 
	cpSpaceAddCollisionPairFunc(space, 0, 1, &bulletCollision, self); //new!
 
}
 

As you can see this method contains to lines of code we haven't seen before. We are setting a property called collision_type on rockShape and then calling cpSpaceAddCollisionPairFunc. collision_type is how we identify a particular object for the collision pair function. In order for everything to work properly you'll need to start numbering your collision_types from 0. rockShape will be numbered with a 0 and our bullets will be numbered with a 1. cpSpaceAddCollisionPairFunc takes the following arguments: the current simulation space, object A (as specified by collision_type), object B, C callback function to be called when a collision is detected, and then a data parameter. The last parameter is optional and could be left as null, but you can pass self in to get access to your GameLayer object during runtime.

Next we need to modify our method that creates bullets, makeBulletX. Here is the line you need to add:

 
laserShape->data = laser;
	laserShape->collision_type = 1; //this is new!
	cpSpaceAddShape(space, laserShape);
 

Now we need to see up our callback function, which we declared as bulletCollision in cpSpaceAddCollisionPairFunc. This C function will be located in GameScene.m, but outside of our classes, just like the function eachShape(void *ptr, void* unused). After the eachShape function add the following code:

 
static int bulletCollision(cpShape *a, cpShape *b, cpContact *contacts, int numContacts, cpFloat normal_coef, void *data)
{
	NSLog(@"Collision Detected");
	return 0;
}
 

Now we need to add a rock to the screen to test out our collision. In the init method of GameLayer add the following line:

 
[self makeSpaceRockX:200 y:200];
 

If you build and run the application you should now see a rock on screen. You should be able to shoot that rock with laser bullets and have the collision show up in the console. Hopefully everything worked for you. If not you can always grab the fully working source code at the end of this entry.

Next up we are going to flesh out our bullet collisions a little bit more. We want the rock to disappear when a bullet collides with it and we want an explosion to occur. First we want to add the following method to our GameLayer class:

 
-(void) createExplosionX: (float) x y: (float) y
{
	ParticleSystem *emitter = [ParticleExplosion node];
	emitter.position = cpv(x,y);
	[self addChild: emitter];
}
 

Now we want to go back to our collision callback function (bulletCollision) and modify its code to this:

 
GameLayer *game = (GameLayer*) data;
	[game createExplosionX:200 y:200];
	return 0;
 

Now if you run the application you should be able to shoot the rock and generate an explosion. This is great, but as you can see the explosion doesn't really look that great. It runs a little slow and the colors are wacky. To fix this we're going to create our own particle system. Right click on the Classes folder in X-Code and select Add->New File. Choose NSObject subclass and name it RockExplosion. Change RockExplosion.h to this:

 
#import "PointParticleSystem.h"
#import "QuadParticleSystem.h"
 
@interface RockExplosion : PointParticleSystem
{
}
@end
 

As you can see we are going to be extending Cocos2D's PointParticleSystem class.

In the implementation file add the following code:

 
#import "RockExplosion.h"
#import "TextureMgr.h"
#import "Director.h"
 
@implementation RockExplosion
-(id) init
{
	return [self initWithTotalParticles:2];
}
 
-(id) initWithTotalParticles:(int)p
{
	if( !(self=[super initWithTotalParticles:p]) )
		return nil;
 
	// duration
	duration = 0.1f;
 
	// gravity
	gravity.x = 10;
	gravity.y = 10;
 
	// angle
	angle = 90;
	angleVar = 360;
 
	// speed of particles
	speed = 200;
	speedVar = 40;
 
	// radial
	radialAccel = 0;
	radialAccelVar = 0;
 
	// tagential
	tangentialAccel = 0;
	tangentialAccelVar = 0;
 
	// emitter position
	position.x = 160;
	position.y = 240;
	posVar.x = 0;
	posVar.y = 0;
 
	// life of particles
	life = 10.0f;
	lifeVar = 2;
 
	// size, in pixels
	startSize = 40.0f;
	startSizeVar = 20.0f;
 
	// emits per second
	emissionRate = totalParticles/duration;
 
	// color of particles
	startColor.r = 0.99f;
	startColor.g = 0.99f;
	startColor.b = 0.99f;
	startColor.a = 1.0f;
	startColorVar.r = 0.0f;
	startColorVar.g = 0.0f;
	startColorVar.b = 0.0f;
	startColorVar.a = 0.0f;
	endColor.r = 0.0f;
	endColor.g = 0.0f;
	endColor.b = 0.0f;
	endColor.a = 1.0f;
	endColorVar.r = 0.0f;
	endColorVar.g = 0.0f;
	endColorVar.b = 0.0f;
	endColorVar.a = 0.0f;
 
	self.texture = [[TextureMgr sharedTextureMgr] addImage: @"rock.png"];
 
	// additive
	blendAdditive = NO;
 
	return self;
}
 
@end
 

Now we need to go back and modify our createExplosion method in GameLayer. The ParticleSystem should now be created from RockExplosion instead of ParticleExplosion. The line of code should be:

 
ParticleSystem *emitter = [RockExplosion node];
 

Also, you will need to go into GameScene.h and add #import RockExplosion.h.

Great! Now we have a nice little explosion when the lasers hit our rock. Let's go back and actually get rid of the space rock when a laser hits it. In GameScene.m, change the code inside the bulletCollision function to this:

 
	GameLayer *game = (GameLayer*) data;
	a->body->p = cpv(800,800);
	b->body->p = cpv(800,800);
	[game createExplosionX:200 y:200];
	return 0;
 

This code will move the space rock and bullet that hit it off screen, leaving only the exploding rock chunks. Compile and run your code, looks cool, huh?

SOURCE CODE: Game Demo Tutorial Entry 3 Source Code

rjett Game Demo Tutorial Series cocos2D, Game Demo Tutorial Series, iphone, objective-c

I've decided to move away from the screencasting approach for this part of the game demo tutorial. Anyways, in this part of our Cocos2d Game Demo tutorial we will be extending the code we developed in Hello World to include some images and movement. By the end of this you will end up with a space background and a moving spaceship that can fire lasers.

The first thing you want to do is to add the art resources for this project. You can find them with the source code (here). Within the project view in X-Code you want to locate the Resources folder, which should be on the the left side of the screen. Right click on Resources, and choose Add->Existing Files...

In the pop-up window select all of the art files included with this source code for the project. Next, go to GameScene.m. We're going to get rid of our label that we used previously, so change the code from this:

-(id) init {
	self = [super init];
	if(self != nil) {
		Label *test = [Label labelWithString:@"Hello World" fontName: @"Helvetica" fontSize: 24];
		test.position = cpv(160, 240);
		[self addChild: test];
	}
	return self;
}

To this:

-(id) init {
	self = [super init];
	if(self != nil) {
	//Add the background:
		Sprite *bg = [[Sprite spriteWithFile:@"bg.png"] retain];
		bg.position = cpv(160,240);
		[self addChild: bg];
 
	}
	return self;
}

This new code should replace the Hello World text with a background image of outer space. Now we're going to add a ship and make it move. So let's update that init method to this:

-(id) init {
	self = [super init];
	if(self != nil) {
	//Add the background:
		Sprite *bg = [[Sprite spriteWithFile:@"bg.png"] retain];
		bg.position = cpv(160,240);
		[self addChild: bg];
 
//Add the ship:
		ship = [[Sprite spriteWithFile:@"ship.png"] retain];
		ship.position = cpv(50,50);
		[self addChild: ship];
 
		//Make it move:
		[self schedule: @selector(moveShip:)];
 
	}
	return self;
}

We loaded another Sprite, called ship, and we set up a scheduler. Schedulers are a nice function provided by Cocos2D that allow you to call a given method over and over again. You can also pass an argument to it called interval to specify how often it should be called. If you don't specify this argument it will be called as often as possible.

After your init method you need to add the moveShip method. The code is as follows:

-(void) moveShip: (ccTime) dt
{
	t += dt; //Specify ccTime t in header
	ship.position = cpv(120*sin(t)+160, 50);
}

Like I mentioned in the comment above, you'll need to switch back to the header for GameScene and then within your GameLayer add a property for ccTime t and Sprite * ship.

Hopefully if you run this code you will see a ship oscillating back and forth over a space background.

Next we want to set up Chipmunk for use in our game. First, go to GameScene.m and after your import statement and before @implementation GameScene add the following C function:

static void
eachShape(void *ptr, void* unused)
{
	cpShape *shape = (cpShape*) ptr;
	Sprite *sprite = shape->data;
	if( sprite ) {
		cpBody *body = shape->body;
		[sprite setPosition: cpv( body->p.x, body->p.y)];
		[sprite setRotation: (float) CC_RADIANS_TO_DEGREES( -body->a )];
	}
}

This function is used to update our physics bodies. Next go to your init method in GameLayer and add this code after the scheduler we added earlier:

//Initialize Chipmunk:
		cpInitChipmunk();
 
		space = cpSpaceNew();
		cpSpaceResizeStaticHash(space, 400.0f, 40);
		cpSpaceResizeActiveHash(space, 100, 600);
 
		space->gravity = cpv(10, 0);
		space->elasticIterations = space->iterations;
 
		//Update Chipmunk
		[self schedule: @selector(step:)];

As you can see we scheduled another method to called, named step. Step will be used to run our physics simulation. We can go ahead and add this method to GameLayer:

-(void) step: (ccTime) delta
{
	int steps = 2;
	cpFloat dt = delta/(cpFloat)steps;
 
	for(int i=0; iactiveShapes, &eachShape, nil);
	cpSpaceHashEach(space->staticShapes, &eachShape, nil);
}

Now, we're going to create bullets for our ship to shoot. Since we want the bullets to be updated by Chipmunk we're going to have create a wrapper object for something called cpBody. cpBody is the Chipmunk structure for modeling our objects in the simulation space. Since cpBody is not an object we cannot store it in an NSArray or NSMutableArray, but if we wrap it, we can store it.

To get started writing the bullet wrapper click on the Classes folder, right click, and select Add->New File. In the prompt, choose NSObject subclass. Click Next and name the class Bullet.

The bullet header file is as follows:

#import
#import "chipmunk.h"
 
@interface Bullet : NSObject {
	cpBody *bulletBody;
	bool ready;
}
-(id) initWithCPBody: (cpBody *) bodyIn;
-(void) fireFromX: (float) x y:(float)y;
-(float) getY;
-(void) resetPosition;
 
@property(readwrite) bool ready;
@end

The implementation for bullet is as follows:

#import "Bullet.h"
 
@implementation Bullet
-(id) initWithCPBody: (cpBody *) bodyIn
{
	self = [super init];
	if(self != nil){
		bulletBody = bodyIn;
		ready = YES;
	}
 
	return self;
}
-(void) fireFromX: (float) x y:(float)y
{
	bulletBody->p = cpv(x,y);
	bulletBody->v = cpv(0, 500);
}
-(float) getY
{
	return bulletBody->p.y;
}
-(void) resetPosition
{
	bulletBody->p = cpv(-50,-50);
	bulletBody->v = cpv(0,0);
}
@synthesize ready;
@end

Now, switch to GameScene.h and add the following property to GameLayer:

NSMutableArray *bullets;

This NSMutableArray will be used to manage the bullets our ship will fire. We will use it to create a seemingly infinite stream of bullets from only 10 actually instantiations of our Bullet class.

Switch over to the GameScene implementation file and scroll down to GameLayer's init method. We're going to add some code to manage our bullets. After the schedule call to step add the following code:

//Bullet Manager, loads 10 bullets
		bullets = [[NSMutableArray alloc] init];
		for(int i = 0; i < 10; i++)
		{
			Bullet *b = [[Bullet alloc] initWithCPBody:[self makeBulletX:-50 y:-50]];
			[bullets addObject: b];
			[b release];
		}

This code sets up the NSMutableArray we declared in the header and creates ten instances of our Bullet class.

Next we want to be able to accept a touch to use to fire the ship's bullets. After the code above add the following line:

//Make it shoot:
		isTouchEnabled = YES;

Now we need to implement that method that will listen for a touch. In GameLayer, somewhere after our init method, add the following method:

- (BOOL)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	for(Bullet *b in bullets)
	{
		if([b ready])
		{
			[b fireFromX:ship.position.x y:ship.position.y+12];
			[b setReady: NO];
			break;
		}
	}
 
	return kEventHandled;
}

ccTouchesBegan is the method that Cocos2D uses to alert you of touches. There are also similar methods for TouchesMoved and TouchesEnded. In the above code we are iterating through our bullets array, looking for the first ready bullet. If a ready bullet is found, we shoot it, set it to not being ready, and break the loop so no more bullets are fired. After our loop we return kEventHandled, this tells Cocos2d that the Touch event was handled.

Now we need to add some code that will keep track of our bullets and reset them when they go off screen. Add the following method to GameLayer to do just that:

-(void) updateBullets
{
	for(Bullet *b in bullets)
	{
		if([b getY] > 500)
		{
			[b resetPosition];
			[b setReady: YES];
			break;
		}
	}
}

In order for this method to be called we will go back to the steps method that we created for Chipmunk. At the very end of the method add this line:

[self updateBullets];

And that's it. Hopefully if you build and run the code you have create you will now see a spaceship oscillating over a background of stars. If you touch the screen you should see some bullets being fired from the ship. If you come across any problems just check out the following source code, it works: Game Demo Tutorial: Entry 2

rjett Uncategorized cocos2D, Game Demo Tutorial Series, objective-c

Learn how to get a barebones Cocos2d application up and running in X-Code.

Cocos2d-iphone Hello World app from Ronald Jett on Vimeo.

Full Source Code: Hello World Source

A full resolution Quicktime file for this can be found here.

rjett Uncategorized Game Demo Tutorial Series