How to Make a Game Like Jetpack Joyride using LevelHelper, SpriteHelper [Cocos2D 2.X edition] – Part 1

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

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

In this tutorial series, we will create a game similar to Jetpack Joyride using latest Cocos2D and Box2D. (Prefer Corona? Check out the Corona version of this tutorial!)

If you haven’t played Jetpack Joyride yet, you should check it out – it’s an incredibly polished and fun game, and best of all it’s free! :]

You could make this game with Cocos2D alone, but it would take a lot of time. To make things simpler, we’re going to use two tools written by yours truly – LevelHelper and SpriteHelper.

If you aren’t familiar with these tools, here’s a quick synopsis:

• LevelHelper is a tool that makes creating levels much easier. You literally drag and drop sprites onto the scene!
• SpriteHelper is a tool that creates the sprite sheets, physics shapes and animations for your games quickly and easily.

This is going to be a complex game, and we have a lot to do, so this series will be spread over four parts. In this first part, we’ll first spend some time setting up LevelHelper. Then we’ll create a basic level with a continuous scrolling parallax, and learn how to use SpriteHelper to add and modify our art.

By the end of this series, not only will you have earned valuable experience with these tools – you will have an exciting, sophisticated game to play!

This tutorial assumes you have some basic familiarity with Cocos2D and Box2D. If you are new to either of these game frameworks, you should check out our Cocos2D and Box2D tutorials first.

Getting Started

To get started, you just need to download several things:

• LevelHelper and SpriteHelper, if you don’t have them already.
• Art for the game by Vicki Wenderlich, which you can download here.
• Latest version of Cocos2d (we will use version 2.1 beta 4) which you can download here.

Note: LevelHelper supports all versions of Cocos2D. As a general rule, it is better that you first go through the official step by step guide of LevelHelper which can be found under the Documentation section of www.gamedevhelper.com.

Installing Cocos2d Templates

After downloading Cocos2d 2.1 beta 4, unzip the archive. Open “Terminal” app and drag “install-templates.sh” file over the “Terminal” window.
Press Enter.
If you get an error saying that the templates are already installed, repeat the process again but add “-f” at the end of the terminal command before pressing Enter.

w00t you’ve installed the template! Now let’s try it out.

Creating Our Xcode Project

Open Xcode and choose File\New\New Project from the main menu.

Select the iOS\Cocos2d v2.x\Cocos2d iOS with Box2D template, and click Next.

In the next dialog, name your product “RocketMouse” (no spaces) and if you want, give an identifier or leave the default one. Click Next when ready.

Compile and run the project to test that everything is working:

Nice – soon you will see how easy it is to integrate LevelHelper and load some levels! :]

Cleaning Up What We Don’t Need

We could extend the template code from here, but to give you the best understanding of how everything works we’re going to start from scratch.

So let’s clean up everything we don’t need from the template code.

Keep reading to clean this up yourself, but if you’re feeling particularly lazy, you can download the cleaned up project and just skim over these steps :P

Inside Xcode, navigate and click on HelloWorldLayer.h and delete the Box2D PTM_RATIO define and the spriteTexture_ variable.

With the header file cleaned, navigate and click on HelloWorldLayer.mm file. Clean the source as pointed in the next images.

Note: When working with Box2D, all source files must have a “.mm” extension in order to tell Xcode to compile using the Objective C++ compiler since Box2D is a C++ library. If the extension is “.m”, Xcode will compile that file with the Objective-C compiler and Box2D will give lots of errors.

Preparing for LevelHelper

Let’s create two folders in the Resource folder of our Xcode project. While we don’t really need to do this, keeping our project organized will make our work easier!

In Finder, navigate to your Xcode project, open its Resources folder, and create two sub folders named “Images” and “Levels”. Important: Create these in Finder, not Xcode!

You should end up with something like this:

Creating a LevelHelper Project

Now that the project set up is complete, we can finally start creating our level with LevelHelper!

LevelHelper will keep things organized in projects. This means level files are part of the project and its mandatory that you save them inside a subfolder of the project.

So let’s create a new project with LevelHelper. Open it up and go to File\New Project:

A new window will appear. In the Project Name field, enter “RocketMouse,” the name of our project and press Next.

In the project settings window choose “Universal” and Landscape orientation. (default settings) and press Next.

Note: When you want to create a game for all models of iPhone and iPad, you generally want to choose Universal with Landscape or Portrait orientation. LevelHelper will automatically use image.png on iPhone2G/3G/3GS, image-hd.png on iPhone 4/4S/5,iPad1/iPad2,iPad Mini and image-ipadhd.png on iPad3/4.

The final step is to save the project file. Choose the topmost folder of your project. The folder where the Xcode project file is located.

LevelHelper will use this folder as the main project folder. Everything you save and edit with LevelHelper must be located somewhere inside this folder. The Mac App Store version of LevelHelper will have sandbox access to this folder. Trying to open something outside this project folder will be restricted by sandbox and will give an error.

Now the LevelHelper window should look something like this:

But we have no image, no nothing! Time to start adding our art.

Adding Art to Our LevelHelper Project

To add our art, we need to use SpriteHelper, so go ahead and open it up.

Now navigate to where you saved the art pack for this tutorial. Select the art inside the “objects” folder and drag it inside SpriteHelper.

SpriteHelper can contain multiple sheets per document so lets go ahead and rename this sheet to “objects” by changing the “Sheet Name” property.
Press enter so the change will take effect.
The resulting scene should look similar to this (sprites may be packed differently)

You might see that some sprites are trimmed and/or rotated so that the packing takes the smallest amount of space possible.

Note: Crop: means the empty space around the sprites will be removed entirely. This should not be used with sprites part of an animations as the position of a particular sprite in a frame may be changed.

Trim: means the empty space around the sprites will be removed but added back when the sprite is loaded in the game engine. This is useful for animations as the position of the frame is not changed.

Save the scene inside the Images folder that we created earlier in the Resource folder. Go to File\Save As.

Give a name to the SpriteHelper document and choose “Universal” since we are creating a universal project.

If you look inside Images folder you will see that SpriteHelper has created 3 images. One for each type of device.

The name of the image files has the following format:

[SpriteHelper Document Name]_[Sheet Name][device suffix].[extension];

So in our case, we named the SpriteHelper Document “RocketMouseAssets”
The sheet was named “objects”
And we used “png” file as the extension.

This will result in:
RocketMouseAssets_objects.png – to be used by iPhone 2G/3G/3GS
RocketMouseAssets_objects-hd.png – to be used by iPhone4/4S/5, iPad1/2,Mini
RocketMouseAssets_objects-ipadhd.png – to be used by iPad3/4

If you look inside the LevelHelper window now, you’ll see that the art has automatically been added for you.

LevelHelper keeps track of all the changes inside the project folder. Every time you add, remove or modify a file inside this folder, LevelHelper will automatically update its content.

Note: If you do not see the art in LevelHelper, click the refresh button (marked by a red circle in the image above).