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.

Learn how to make a game like Jetpack Joyride with SpriteHelper and LevelHelper!

Learn how to make a game like Jetpack Joyride with SpriteHelper and LevelHelper!

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!