How to Make a Game Like Jetpack Joyride using LevelHelper, SpriteHelper [Cocos2D 2.X 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 latest SpriteHelper and LevelHelper!

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 it from 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, they need to be 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. So they need to be 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 and then put it all together with some actual code!

Before you 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 refer to). If you do this, be sure to add the new Level to your Xcode project, and update the line that selects the level to choose the new level like so:

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

Working With Animations: Adding Lasers

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

To create an animation for your lasers, open SpriteHelper and start a new scene. Drag the laser animation frames on to the scene from the “animations/laser” directory from the assets for this tutorial.

Rename the sheet to “animations”. You will put all the animations in this sheet. You can also put each animation in its own sheet but loading a texture is expensive, so its better to have as few textures to load as possible.

Next, switch to the “Animation” tab and create a new animation by clicking on the “Create New Animation” button. Double click on the new animation and rename it to “laserAnim”. Select “Loop” and set a “Units of Time” to 1.2.

Now select the 2 laser sprites and tap the “Add frame” button.

With the laser_on frame selected, change the “Frame unit” to 0.4. What this will do is make the frame where the laser is on display for a shorter time period. With frame unit you control how long a frame will display in an animation. The time of a frame is calculated by multiplying “Units Of Time” with “Frame Unit”. In our case “laser_off” will show for 1 x 1.2 = 1.2 seconds and laser_on will show for 0.4 x 1.2 = 0.48 seconds.

Save the scene by going to File/Save As. Name it “Animations”.

Click the Save As button, navigate to your project’s Images folder, and save the new document.

Switch over to LevelHelper and you should see that the view has been updated to contain this new SpriteHelper document.

Note: If LevelHelper does not show the new document even after reloading, it might mean you saved the document to a location outside of the project folder. Check and if that’s the case, move it to the project folder.

Drag one of the animation frames on to the scene. With the laser sprite selected go to “Generic Animation Properties” and set the Animation to “laserAnim”. Now you have a sprite that will run the laser animation when the game runs. If, for example, you want to start the animation on this sprite manually via code, you can uncheck “Start At Launch”.

With the laser sprite selected, clone it as you learnt in part 1 to add more lasers to the scene till a satisfying level of danger is achieved. You can rotate and scale the lasers by using the handles that appear when you select a sprite.

By changing “Timer per frame” property inside LevelHelper (Generic Animation Properties section) you can make each laser animate differently.

My level now looks like this:

If you look at the laser sprite, it has no shape. So open the SpriteHelper document to create a shape for it.

The shape of an animations is the shape of the sprite that you dragged on to the level. The shape of an animation does not change. Changing a shape for every frame will make Box2D cancel collisions and will also result in poor performance.

Lets create the shape for the animation based on the “laser_on” sprite. Since you need a rectangle shape, you will not use the auto-trace feature. Instead, with laser_on selected, go to the “Physics” tab and tap “Create New Rectangle Shape”. Set the body type to Static and rename the fixture to “laserFixture”.

Note: You can have multiple shapes per body. During a collision event you can see which shape in the body has collided. This will make it easier to create certain game events like knowing when an enemy was shot in the head or torso. More about collisions soon.

Since the shape doesn’t need to cover the entire sprite, you will edit the shape and make it smaller. With the shape selected tap on the “Edit Shape” button. Now drag the corners of the quad shape to make it smaller. When you are satisfied press on the “Edit shape” button again to finish the editing.

Back in LevelHelper, you should see that all lasers have been updated with the correct shape. If you have the laser_off sprite displaying, you can always switch to the laser_on sprite by selecting the correct sprite frame under General Properties for the SH Sprite property.

Now select all the lasers and add them to the parallax node. Enter 1 for the x ratio.

Save the level. If you build and run your game it will now have animating lasers! (But don’t forget to add the new animation document that you added to the Images folder to your Xcode project before you build it …)