How to Make a Game Like Jetpack Joyride using LevelHelper and SpriteHelper [Cocos2D Edition] – Part 2

This is a post by special contributor Bogdan Vladu, an iOS application developer and aspiring game developer living in Bucharest, Romania.

Update 1/9/2013: This tutorial is now deprecated. We now have a newer, updated version of this tutorial, check it out!

Welcome back to our Jetpack Joyride tutorial series! In this tutorial series, we are making a game similar to Jetpack Joyride using Cocos2D and Box2D, and the LevelHelper and SpriteHelper tools.

So far, we’ve got a working level with background art that scrolls continuously. Check out how we did it in Part One.

By now, you should be pretty comfortable working with LevelHelper and SpriteHelper, at least when it comes to the basics like adding objects to the levels.

In this second part of the tutorial, we’ll focus on adding some movement and activity to the game. Lasers, coins, a flying player-character, the beginnings of collisions… it’s all coming up!

To follow along with this tutorial, you’ll need to have the RocketMouse project where we left off in part one. If you don’t have this already, you can grab a copy of the project so far here.

So let’s get that mouse flying!

Getting Started

The next step in creating our Jetpack Joyride game is to add some elements that the player will directly interact with: lasers and coins. Adding these elements is also a good way to begin learning how to implement animations and sensors using LevelHelper.

Since we want the lasers to go on and off, we need to make them animations. As for the coins, we want to know when the player collides with them, but we don’t want the player to bounce off them. To do this, we need to make them sensors.

Having grappled with the basics of animation and collision response, we’ll expand the concepts to other elements of our game, including the player. We’ll learn how to create tags to track collisions, then put it all together with some actual code!

Before we get started, you might want to open your current LevelHelper project and save the level as level03 (this way you’ll have the old level to look back on). If you do this, be sure to add the new Level into your Xcode project, and update the line that selects the level to choose level 3 like so:

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@"level03"];

Working With Animations: Adding Lasers

How we’ll use the animations in gameplay is fairly simple. When the player makes contact with a laser, we’ll just test what frame the animation is on. If it’s the frame with the laser-off sprite, we’ll leave the player alone. If it’s the frame with the laser-on sprite, then we’ll kill the player.

To create an animation for our lasers, go to the available sprites list on the right panel in LevelHelper, and Control-Click (or right-click) on one of the laser sprites. Then choose “Open SpriteHelper scene” from the menu.

SpriteHelper will open with the correct scene. Navigate to the Animation section, click the + button to create a new animation, then double click on the animation name and call it “Laser.”

Now go in the sprites list and select the vertical laser. Go back to the animation section and click Add Frame. This will add the two sprites to the animation.

Arrange the frames in the correct order (off and then on, or laser1 and then laser2) by clicking the up and down arrows. Set the speed to 3 and make sure the Start At Launch and Loop Forever options are checked.

When you’re done, hit Command-S to save the scene.

Now let’s switch back to LevelHelper and work with the animation we just created. You’ll see that an Animations section has already been added for you in LevelHelper, as in the image below.

There are two ways to activate the animation. I will demonstrate both.

The first way is to drag the animation into the level just as we did with the sprites.

The second way is to attach the animation to a sprite that’s already in the level. In this case, I’m adding the animation to the laser sprite.

Go to the sprites section. We haven’t added the laser sprites to the level yet, so drag one of them (doesn’t matter which) from the list into the level, and make sure that sprite is selected. Then go to the General Properties section and select the Laser animation from the list.

Continue adding lasers to the level, until a satisfying amount of danger has been achieved. You can rotate and scale the lasers by using the handles that appear when you select a sprite.

My level now looks like this:

If you look at the laser shape you can see that the sprite is a full quad.

In our game we want the mouse to die only when it hits the actual laser in the sprite (the yellow part), so let’s make the shape smaller.

To do this we can define a shape like we did for the dog and cat, or we can modify the Shape Border property under the Physics menu using predefined values. Since you already know how to create a shape with points, let’s try it the second way.

Select the laser1 image from inside the Images section of LevelHelper. Right click on it and select Open SpriteHelper Scene.

Once the SpriteHelper scene is open, click on the “laser1” sprite. Because the laser is an animation, we need to modify the physics properties of the first frame of the animation – in this case the “laser1” sprite. Animations have the physics properties of the first frame.

With laser1 selected, go to the Physics menu and enter 70 and 40 for the Shape Border values. This will make the shape of the sprite be equal to the sprite size, minus the values you enter here. You can see the visual representation in the view.

Back in LevelHelper, we can see that all lasers have been updated with the correct shape.

Now select all lasers and add them to our parallax. Enter 1 and 0 for the ratio.

Save the level, and if you build and run your game it will now have animating lasers!

Working With Sensors: Adding Coins

Now for the coins. Remember, we want to make the coins sensors so that the mouse can pass straight through them without bouncing off, but still allow us to detect when there is a collision.

To make the coins sensors, select the coin sprite from the sprites list inside LevelHelper, right click (or Control-Click) and choose Open SpriteHelper Scene.

With the SpriteHelper scene opened, select the coin sprite and check the Is Sensor, Is Circle and Can Sleep options on the Physics menu. Then save the scene.

• Is Sensor: makes the body trigger a collision, but not a collision response.
• Is Circle: makes the shape of the body circle-based.
• Can Sleep: speeds up simulation of the physics.

Now add the coin sprite to the level and place it as you see fit. Use the Clone Tool to easily clone the coin with the direction offset you prefer.

Now my level looks like this:

Add the coins to the parallax, set the ratio to 1 and 0 and save the level. Compile and run your project, and now you have coins!

The project with all of our work up to this point can be downloaded here.

Adding the Player

Now that we have a good-looking level with all the basic components, let’s create the player and its accompanying animations.

Open SpriteHelper and go to File\New to create an empty sprite sheet. Then in Finder, navigate to the directory where you saved the art for this game. Once you’re there, select and drag onto the SpriteHelper window all the mouse sprites and the rocket flames.

We now need to create one single image with the art we just imported. This is an essential step before creating the animation. All engines supported by LevelHelper and SpriteHelper expect that frames in an animation are part of the same image file.

Switch to the Sheet Editor menu if you aren’t there already and deselect Crop, because we don’t want to trim the frames of the mouse animation. Click Pack Sprites to arrange all the sprites into the sprite sheet.

Next, switch to the Animation section of SpriteHelper. We’ll we’ll create all the animations we need here, exactly as we did for the laser.

Using the same technique you learned earlier, create five animations with the properties listed below.

If you forgot how to create animations, for each animation, click the + button, and double click to name it. Then select the required frames for that particular animation, set the speed, and make sure to check the Loop Forever option for the one that needs to loop.

1) Animation Name: mouseRun
Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_1_run, rocketmouse_2_run, rocketmouse_3_run, rocketmouse_4_run

2) Animation Name: flame
Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocket_flame1, rocket_flame2

3) Animation Name: mouseFly
Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_5_fly

4) Animation Name: mouseDie
Start At Launch: YES
Loop Forever: NO
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_7_die, rocketmouse_8_die

5) Animation Name: mouseFall
Start At Launch: YES
Loop Forever: NO
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_6_fall

Once you’re done, hit Command-S to save the scene. In the Save dialogue, navigate to the Images folder inside your Xcode project Resources folder, and save the scene as “mouse.”

Back in LevelHelper, we can find all of our new animations in the Animation section.

Drag the mouseRun animation onto the main screen (the one with a red border). Place it just to the left of the screen.

Then drag the flame sprite and place it right under the red tank on the back of the mouse.

The result should look something like this:

If you look closely, you’ll see that the flame sprite is on top of the red tank. Let’s put it behind the tank, so it looks more like the flame is coming out of the tank. Do this this, select the flame sprite and under General Properties, set Z Order to -1.

If you run the level at this point using Scene Tester (press Test Level button) you might or might not be able to see the mouse.

This is because the sprites are rendered using batch nodes (all the sprites at the same time). To make the mouse be on top of all the other sprites in the level, we need to change the Z Order of the batch node (the image file).

Inside LevelHelper go to the Images section and double click on the Z Order field for mouse.png. Enter a value of 4.

We want the player to always be on top of everything, and we’re going to add more images soon. That’s why we’re putting a larger value here.

Running the level now, you can see the mouse running on the scene, but it does not perform any collisions.

It actually is performing collisions with the dogs and cats, but because the mouse and other objects are all static, nothing happens.

Time to make the mouse and the flame sprites dynamic! Open the SpriteHelper scene for the mouse:

Then select all the sprites and make them dynamic. Because we don’t want the mouse to rotate when it collides with any other sprite, select the Fixed Rotation option also.

For the two rocket flame sprites, we also need to check the Is Sensor option. This is because later we’re going to be attaching the flame to the rocket tank.

Save the scene when you’re done!

Running Scene Tester again, we will see the mouse falling out of the screen. This is because the mouse is responding to gravity. Let’s make him stay on the screen.

Click the Physic Boundaries button.

From the Physic Boundaries window, click Create.

We’ve now created the boundary, but we want to edit it so that it’s right under the mouse in the middle of the floor, where the mouse will walk. Inside the Physic Boundaries window, click Edit.

You will now see four red handles on the corners of the physic boundary. Drag any of the bottom handles to move the boundary so that it’s under the mouse’s feet.

You should have something similar to this:

When you’re satisfied with your physic boundary, press the Editing button to stop the editing process.

Running the level in Scene Tester, you will see the mouse collides with the dogs and cats and stays on the screen, but, alas, there is yet another problem!

This time, the flame is falling off the screen. That’s because it’s a sensor and so it does not collide with any object and isn’t attached to the mouse’s body. But w can connect the flame to the mouse by creating a distance joint.

Go to the Joints section inside LevelHelper, select Distance Joint from the list and click the green + button.

Now let’s select the sprites we want the joint to connect.

Select the joint from the list (if not already selected), then on the Body A property, click and hold the circle icon. Then drag your mouse over the flame sprite. When the text says rocket_flame_1, release the mouse. (This is exactly the same process as connecting an outlet inside Interface Builder in Xcode.)

Now repeat the process for Body B, only this time select the mouse.

Now let’s put the joint’s anchor points closer together.

Select A in the joint property, drag the handle that shows the flame sprite, and put the anchor right on top of the tank.

Repeat the process for the other anchor point. Select anchor B, drag the handle and put the anchor point next to the other.

If you run the level in the Scene Tester, you’ll see the flame now stays attached to the mouse. w00t!

We now have almost everything we need in order to start coding the game!

Creating Tags to Perform Collisions

In order to perform collisions between our sprites, we need to have a way to register collisions between sprites of one type with sprites of other types.

We will need to separate our sprites into types using tags. So all dog sprites will have the tag “DOG” and all cat sprites will have the tag “CAT.”

To create the tags, inside LevelHelper click the Define Tags button.

In the Define Tags window, set the name for the new tag and click the Add button to create it. Create the following tags: DOG, CAT, LASER, COIN, PLAYER.

Now that we have the tags defined, we need to assign the tags to sprites.

Select all the dog sprites from the list of sprites on the left. Then under General Properties, assign the DOG tag to all of those sprites.

Repeat the process for all the sprites. Assign PLAYER to the mouse sprite, CAT to all the cat sprites, LASER to all the laser sprites, and COIN to all the coin sprites.

When you’re done, save the level with Command-S.

A project with all of our progress so far can be downloaded here.

Coding the Game Logic

We are now (finally) ready to start coding our game. So let’s move back to Xcode, open our project and start the real fun.

First let’s be sure to include the new art (mouse.png). At this point your resources folder should look something like the following:

In order control the movement of the parallax and allow the player to jump, we need to have a few variables that will point to the objects created by LevelHelper. Add these lines in HelloWorldScene.h inside the class definition.

LHParallaxNode* paralaxNode;
LHSprite*   player;
b2Body*     playerBody;
    
LHSprite*   rocketFlame;

Then outside the class definition, right before the @end and after +(id)scene;, add the following method signature:

-(void) retrieveRequiredObjects;

Inside HelloWorldScene.mm, define the new method wherever you see fit, but make sure it’s inside the class declaration. In my case, I placed it right after the init method.

-(void) retrieveRequiredObjects
{
    //Retrieve pointers to parallax node and player sprite.
    paralaxNode = [lh paralaxNodeWithUniqueName:@"Parallax_1"];
    NSAssert(paralaxNode!=nil, @"Couldn't find the parallax!");
    
    player = [lh spriteWithUniqueName:@"player"];
    NSAssert(player!=nil, @"Couldn't find the player!");
    
    playerBody = [player body];
    NSAssert(playerBody!=nil, @"Error taking the body from the player LHSprite.");
    
    rocketFlame = [lh spriteWithUniqueName:@"flame"];
    NSAssert(rocketFlame!=nil, @"Couldn't find flame sprite!");
        
    [rocketFlame setVisible:NO]; //You can do it in LH, but I do it here so you guys can see it in LH
}

Here we are taking pointers to the parallax by giving the unique name of the parallax assigned in LevelHelper.

Then we’re taking the pointer to the player sprite, also by giving the unique name. You might need to modify the unique name to read “player” as shown in the screenshot below if it isn’t set to that already.

Similarly, you should change the unique name of the flame to “flame” so it matches the code.

When you use spriteWithUniqueName to look up a sprite, you get a LHSprite* instance, which is a class derived from CCSprite. From this LHSprite* instance we take the pointer to the Box2d body of the player, because we will need to make the body jump later.

We then take the pointer to the flame sprite and make it invisible. We only need to see the flame when the player is flying. (We could also have done this inside LevelHelper by unchecking the Visible option in the General Properties section.)

Now that we have defined this new method, let’s call it (after we’ve loaded the level).

lh = [[LevelHelperLoader alloc] initWithContentOfFile:@"level03"]; // or level02 if you never changed it
	        
[lh addObjectsToWorld:world cocos2dLayer:self];
        
if([lh hasPhysicBoundaries])
    [lh createPhysicBoundaries:world];
        
if(![lh isGravityZero])
    [lh createGravity:world];
        
// Add this
[self retrieveRequiredObjects]; // Retrieve all objects after we’ve loaded the level.

Compile and run the code, and if the flame is invisible when you run it, you know it’s working so far! :]

Making the Player Fly

Now that we have retrieved the player from the loaded level, let’s make him fly!

Add the following inside the HelloWorldScene.h class definition:

float  playerVelocity;
bool   playerWasFlying;
bool   playerShouldFly;

We will use this to make the mouse fly when the user touches the screen.

Now inside HelloWorldScene.mm, replace the touch functions with the following:

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{    
    
    playerVelocity = 0.5f;
    playerShouldFly = true;    
    [rocketFlame setVisible:YES];
    [player startAnimationNamed:@"mouseFly"];
}
////////////////////////////////////////////////////////////////////////////////
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    
}
////////////////////////////////////////////////////////////////////////////////
-(void) cancelPlayerFly
{
    playerShouldFly = false;
    [rocketFlame setVisible:NO];
    playerWasFlying = true;
    playerVelocity = 0.0f;
}
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{       
    [self cancelPlayerFly];
}
- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event 
{
    [self cancelPlayerFly];
}

Inside the ccTouchesBegan method, we’re saying that when the user touches the screen, the player should start flying, the rocket flame should become visible and the flying animation should start on the player sprite.

Next we start the animation name “mouseFly” on the player LHSprite* instance that we retrieved in the retrieveRequiredObjects method.

When the player stops touching the screen, or the touch is canceled, we stop making the player fly by calling the new method “cancelPlayerFly.” We also hide the flame because the player is no longer flying.

But this isn’t enough. We set up when to show the player flying, but we haven’t implemented the actual flight. That requires adding the following at the end of the “tick” method:

if(playerShouldFly)
{
    playerBody->ApplyLinearImpulse(b2Vec2(0, playerVelocity), playerBody->GetWorldCenter());        
        
    playerVelocity += 0.01f;
                
    if(playerVelocity > 1.5f)
        playerVelocity = 1.5f;
}

Here, we check if the player should fly and if the test is true, we apply a linear impulse with a horizontal direction (on Y) on the mouse box2d body.

We then make the velocity bigger and bigger, so the player will look like they are taking off from the ground, gaining speed with time.

If the player’s velocity reaches a certain speed (1.5), we stop the speed from increasing further.

Compile and run the game, and now you can make the mouse fly by touching the screen!

Where to Go From Here?

You can download the full project up to this point here.

Thanks for staying with me this far! We’ve made a huge amount of progress for one tutorial. And we’re only at the end of Part Two!

You won’t want to miss Part Three, where we’ll fully implement collisions, animate the player’s flight and landings, and add sounds. We’ll also make the player die when it touches the dogs, cats or lasers and add a restart screen.

Then in the fourth and final part, we’ll add bunnies that will run through the level to give the player more scoring opportunities, add a score display, and finally, create a scrolling background scene that will be visible through the windows.

Clearly our fun is just getting started. Keep your questions, comments and suggestions coming!

This is a post by special contributor Bogdan Vladu, an iOS application developer and aspiring game developer living in Bucharest, Romania.