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

Creating a Basic Level

Let’s start by creating a level with a scrolling floor and wallpaper background.

We first want to create a continuous scrolling parallax that will move from right to left. To do this, let’s decide how big our parallax will be. You can make it as big as you want.

Let’s make our game world the size of 8 screen sizes. Click the Game World Size button.

In the Width field, enter 3840. This is 480 (the width of the iPhone screen) multiplied by 8.

Now let’s create the background. Drag the bg sprite on to the level, and place it right at the beginning of the first screen. The first screen should be on the left side, and is denoted by a red border.

Now drag a bg_window sprite right next to that so they are next to each other, creating a seamless wall with a window.

Now we’re going to duplicate these sprites so that they cover all of our screens. With the two background sprites selected, set the clone direction via the relevant UI control on the left sidebar as shown in the image below. Select the right center segment so that the cloning will create new copies of the objects to the right of the current objects.

Then click the + button (marked in the image below). This is the clone button. (Alternatively, you could press Command+D). Continue pressing this button until the background sprites cover all sections of all eight screens. Do not go any further.

Note: You can scroll the level in LevelHelper by holding control as you drag the level, by dragging with the right mouse button pressed, or by swiping with two fingers over the trackpad. You can zoom in and out by holding the option key as you scroll the mouse wheel or by pinching the trackpad.

Let’s add these images to a continuous scrolling parallax. Navigate to the Parallax tab (the one that says “P”) and press the New Parallax button.

With the parallax selected, check the Continuous Scrolling option, “Right to Left” direction and enter a speed of about 150.

Now select all the background sprites in the level by going to the Level Navigator and click the Add Selected Scene Sprite(s) button in the parallax section.

There are still some adjustments to make to our continuous scrolling parallax.

Select all the sprites in the parallax list and set the Movement Ratio to “1”. This ratio and the speed determine the rate at which the sprites will move through the parallax.

In this case, the sprites will move at the rate of 1*150 (ratio*speed). If we want other sprites to move at a different rate, we can modify the ratio accordingly (e.g. 0.4*150).

If you run Scene Tester right now you will see the continuous parallax in action!

How to install Scene Tester:

1. Press the “Scene Tester” button.
2. Choose YES in order to go to the download page.
3. On the web page press on the “Download Scene Tester” link.
4. Unzip the LHSceneTester.zip file once downloaded.
5. Run the LHSceneTester.app directly at least once.
6. If on Lion or Mountain Lion choose Open when asked.
7. Close Scene Tester.
8. Inside LevelHelper tap on the “Scene Tester” button again.
9. Choose Browse and point to “LHSceneTester.app” file.

Now the installation is complete. You only need to do this once.

If a line appears along the point where two sprites meet, this is a common issue in games caused by the movement of the objects that are pixel perfect next to each other. To fix this, select all the sprites and give a 1.02 (or an appropriate value) to the Scale X property (this will make the sprites be just a little bit on top of each other). (Remember, the Scale X property is on the Properties Navigator and you might currently be on the Parallax Navigator – so switch tabs :])

Let’s save this level and run it as an Xcode project. Inside LevelHelper, go to File\Save Level As.

In the dialog box, enter “level01” and click Save. (You might need to make sure that the destination folder is correctly set to the Levels folder that you created earlier …)

By saving the level, we caused LevelHelper to update the Levels section. Switch to the Project Navigator and then go to the Levels to see the level file. By double clicking on a level, you can open that level inside LevelHelper.

Now let’s move back to Xcode. Open your RocketMouse Xcode project if it’s not open already. Right click or Control-click on the Resources folder inside Xcode, and select Add Files To “RocketMouse.”

A new window will appear. Navigate to the Resources folder on your hard drive and select both the Images and the Levels folders. Then press the Add button to copy them to the Resources folder in Xcode.

Your Resources folder in Xcode should now look like this:

Back in LevelHelper, navigate to the “Supporting Code” tab. Choose Cocos2d with Box2D, choose the 1.4.9 branch and latest code revision (You might need to tap the triangle next to the Branch header to expand the list of revisions). After that, press on the “Update Supporting Code to Selected Revision” button.

This will download the latest LevelHelper API code to your machine. Check back here regularly in order to stay up-to-date. Read the logs to see what was fixed or added in the API.

Now you can generate the supporting code for your project. Choose File/Generate Code/Cocos2d With Box2D(Objective C++)

In the new window navigate to your project. Choose the folder where you want the API to be generated (usually where HelloWorldLayer.mm file is located). Choose “Manually add supporting code in your Xcode project”:

With the code generated, go back to Xcode and add the new files by Control+clicking on the “HelloWorldLayer.mm” file and choosing “Add Files to Rocket Mouse”. Select the “LevelHelper” folder and click “Add”:

Now that we have all the necessary files in the Xcode project, lets use the LevelHelper API.

Navigate to HelloWorldLayer.h and add the following import statement:

#import "LevelHelperLoader.h"

Also add a variable of type LevelHelperLoader that we will use to load the level file:

    LevelHelperLoader* loader;

Switch to HelloWorldLayer.mm and add the following code to init just after the [self initPhysics]; line:

        loader = [[LevelHelperLoader alloc] initWithContentOfFile:@"level01"];
        [loader addObjectsToWorld:world cocos2dLayer:self];

It is important that you load the level after the Box2D world is created.

Because the above code allocates memory, we must also release it. Find dealloc and add the following lines at the very top:

[loader release];
loader = nil;

It is very important that you release the LevelHelperLoader object before deleting the Box2D world or else you will have a crash when you replace the scene.

That’s all it takes to run your level – pretty cool eh?
You can download the project as it stands up to this point from here.