How To Make a Catapult Shooting Game with Cocos2D and Box2D Part 1

This is a blog post by iOS Tutorial Team member Gustavo Ambrozio, a software engineer with over 20 years experience, including over three years of iOS experience. He is the founder of CodeCrop Software. You can also find him on Google+.

Create a cute-a-pult game with Cocos2D and Box2D! :D

Create a cute-a-pult game with Cocos2D and Box2D! :D

In this tutorial series we’ll build a cool catapult type game from scratch using Cocos2D and Box2D!

We’ll use the art created by Ray’s lovely and talented wife Vicki to create a game about catapults, acorns, dogs, cats, and angry squirrels.

In this tutorial series, you’ll learn:

• How to use rotation joints
• How to use weld joints
• How to have the camera follow a projectile
• How to use a collision’s impact ‘force” to decide if it should eliminate an enemy
• And tons more!

This tutorial series assumes that you’ve already gone through the Intro to Box2D with Cocos2D Tutorial: Bouncing Balls Tutorial or have equivalent knowledge. It also uses a bunch of concepts found on the How To Create A Breakout Game with Box2D and Cocos2D Tutorial (part 1 and part 2).

Getting Started

Fire up Xcode and click “Create a new Xcode project”. Under iOS, choose cocos2d and choose the cocos2d_box2d template and click Next.

On the next screen give your project a name and fill out with a company identifier. We’ll call the project “cute-a-pult” – and if you look at the artwork, I’ll bet you can guess why! :]

On the next step select the folder where you want to store your project. You don’t have to create a new folder, Xcode will create one for you. I’d suggest enabling source control but this is not necessary.

When you click create your project will be created and we’ll be ready to start coding!

You probably know what this template project is all about, but just for the fun of it, click Run and let’s see what it does:

Cool, so it runs and you can play with a few blocks. Cool, but not nearly as cool as what we’re about to make!

I Will Follow Him (on Github)

There isn't an ocean too deep that will keep me away from GitHub!

There isn't an ocean too deep that will keep me away from GitHub!

If you want to follow me wherever I may go, check out this project’s GitHub page!

Yes that’s right, for the first time in tutorial history (maybe I’m exaggerating a bit, I haven’t checked this in any way…) I’ll publish the entire tutorial files, with comments and tags for every steps on GitHub!

You might find this handy in case you get stuck somewhere or want to look at the code at a particular stage instead of typing it out yourself. Otherwise, keep following (and singing) along here! :]

The repository tag for this point in the tutorial is ProjectTemplate. You can download the project zip at this state here.

Cleaning Up

Before we get out hands dirty, let’s do some cleanup. Open HelloWorldLayer.h and remove the declaration for addNewSpriteWithCoords:(CGPoint)p.

Open HelloWorldLayer.mm and completely remove the implementations of these three methods:

1. -(void) addNewSpriteWithCoords:(CGPoint)p (also remove from .h)
2. – (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
3. – (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration

Now you’ll have a warning on this file on the init method because of a call to addNewSpriteWithCoords:(CGPoint)p. Let’s cleanup the init method.

First, delete the line that enables the accelerometer as we won’t be using it in this project:

// delete this line!
self.isAccelerometerEnabled = YES;
 

At the end of the method cleanup everything that add stuff to the scene:

// Delete these lines!
CCSpriteBatchNode *batch = [CCSpriteBatchNode batchNodeWithFile:@"blocks.png" capacity:150];
[self addChild:batch z:0 tag:kTagBatchNode];
    
[self addNewSpriteWithCoords:ccp(screenSize.width/2, screenSize.height/2)];
    
CCLabelTTF *label = [CCLabelTTF labelWithString:@"Tap screen" fontName:@"Marker Felt" fontSize:32];
[self addChild:label z:0];
[label setColor:ccc3(0,0,255)];
label.position = ccp( screenSize.width/2, screenSize.height-50);

That’s it for the HelloWorld.mm file. Let’s just remove the blocks png file so we don’t have any files that are not really necessary. Open the resources group on the project navigator and remove the blocks.png file. When ask if you want to remove the reference only or delete don’t be shy and hit Delete as we really don’t want this file anymore.

To make sure everything works, compile and run and you should see an empty scene:

The repository tag for this point in the tutorial is CleanUpProject.

Adding Some Sprites

First let’s add the images we’ll use on the project. Again, I got these images from Vicki’s site but I had to modify them a bit for the purpose of the game. Basically I changed the catapult arm to already include the cup and straightened it to make the physics easier.

So go ahead and download my modified files from GitHub.

Now expand this archive. This will create a new folder called “images”. Drag this folder to the Resources group of your project. Be sure to check the “Copy items into destination group’s folder” to copy these files to your project folder.

Now we’re ready to start adding our sprites to the scene and try to reproduce the final scene that Vicki designed:

Open the HelloWorldLayer.mm file and insert this code right after m_debugDraw->SetFlags(flags);

 
CCSprite *sprite = [CCSprite spriteWithFile:@"bg.png"];
sprite.anchorPoint = CGPointZero;
[self addChild:sprite z:-1];

sprite = [CCSprite spriteWithFile:@"catapult_base_2.png"];
sprite.anchorPoint = CGPointZero;
sprite.position = CGPointMake(181.0f, FLOOR_HEIGHT);
[self addChild:sprite z:0];

sprite = [CCSprite spriteWithFile:@"squirrel_1.png"];
sprite.anchorPoint = CGPointZero;
sprite.position = CGPointMake(11.0f, FLOOR_HEIGHT);
[self addChild:sprite z:0];

sprite = [CCSprite spriteWithFile:@"catapult_base_1.png"];
sprite.anchorPoint = CGPointZero;
sprite.position = CGPointMake(181.0f, FLOOR_HEIGHT);
[self addChild:sprite z:9];

sprite = [CCSprite spriteWithFile:@"squirrel_2.png"];
sprite.anchorPoint = CGPointZero;
sprite.position = CGPointMake(240.0f, FLOOR_HEIGHT);
[self addChild:sprite z:9];

sprite = [CCSprite spriteWithFile:@"fg.png"];
sprite.anchorPoint = CGPointZero;
[self addChild:sprite z:10];

Right now we’re just adding sprites that will not be part of the physics simulation. We add the sprites that are on the back of the scene first and work our way to the front.

The default anchor point of CCSprite is the middle of the sprite. I’m changing it to the left-bottom corner of the image to make it easier to place them.

You probably noticed that a lot of Y coordinates are using the constant FLOOR_HEIGHT that we have not defined yet. Since this is used in many places it’s easier to use the constant so we can change this later if we change the floor height a bit. So let’s create this constant. On the top of this file, right after the PTM_RATIO definition, add this:

#define FLOOR_HEIGHT    62.0f

Let’s click Run to check out how we’re coming. This is what I got:

w00t, it’s starting to look good already!

The repository tag for this point in the tutorial is BeforePhysics.