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. 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 […] By .
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
How to Make a Game Like Jetpack Joyride using LevelHelper, SpriteHelper [Cocos2D 2.X edition] – Part 1
30 mins
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.
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).
Note: If you do not see the art in LevelHelper, click the refresh button (marked by a red circle in the image above).
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.
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:
- Press the “Scene Tester” button.
- Choose YES in order to go to the download page.
- On the web page press on the “Download Scene Tester” link.
- Unzip the LHSceneTester.zip file once downloaded.
- Run the LHSceneTester.app directly at least once.
- If on Lion or Mountain Lion choose Open when asked.
- Close Scene Tester.
- Inside LevelHelper tap on the “Scene Tester” button again.
- 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.