How to Make a Game Like Jetpack Joyride using LevelHelper and SpriteHelper [Corona 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 LevelHelper and SpriteHelper!

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

In this tutorial series, we will create a game similar to Jetpack Joyride using Corona SDK. (Prefer Cocos2D? Check out the Cocos2D 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 Corona SDK 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 and physics shapes 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!

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.
• The LevelHelper Corona SDK template, which you can download here.

Installing the LevelHelper Template

After you have download the template file, unzip the file (if its not already unzipped by Safari) and rename the new folder from “CoronaSDK LevelHelper Template” to RocketMouse.

w00t you’ve installed the template! Now let’s try it out. Run the template in Corona, and you will see something like this:

Examining the Code

Open up main.lua, and you’ll see that there is very little code:

local ui = require ("ui")
local physics = require("physics")
local fps = require("fps");
physics.start()
--comment next line to disable debug drawing
physics.setDrawMode( "hybrid" ) 
display.setStatusBar( display.HiddenStatusBar )
require "LevelHelperLoader"

loader = LevelHelperLoader:initWithContentOfFile("testLevel.plhs")
loader:instantiateObjects(physics)
loader:createPhysicBoundaries(physics)

First we create and start the physics engine. We also enable debug draw for the physic engine in order to see how shapes are simulating.

We then load our LevelHelper level – let’s go over the lines that do this in detail.

• require “LevelHelperLoader”: This will tell lua that we need to use the class provided in that file and it should look at it.
• loader = LevelHelperLoader:initWithContentOfFile(“testLevel.plhs”): This line will load our LevelHelperLoader instance in a variable called “loader” with the content of the level file specified.
• loader:instantiateObjects(physics): This line will actually load the level, using physics into Corona SDK engine.
• loader:createPhysicBoundaries(physics): This line creates the physic boundary (invisible screen edge to not let the dynamic bodies get out of view), but in this tutorial we don’t care about this and you can just remove it.

Next open up config.lua and take a look:

application = 
{
	content = 
	{ 
		fps = 60,
		width = 320,
		height = 480, 
		scale = "letterbox"
	},
	
	LevelHelperSettings = 
	{
		imagesSubfolder = "Images",
		levelsSubfolder = "Levels",
		directorGroup = nil
	}
}

The first “content” part is the generic Corona SDK settings, determining how the view is set up.

The second “LevelHelperSettings” is the setup for the LevelHelperLoader class. It tells the loader class where it should read the image and level files.

The last line “directorGroup” is the group inside which you want to put all sprites from the level. We’ll talk more about this soon.

Take some time to look through main.lua and make sure you understand the basic idea of what’s going on so far. We’ll build up from here! :]

Creating a LevelHelper Project

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

Beginning with version 1.4, LevelHelper will keep things organized in projects. This means level files are part of the project rather than individual files, as they used to be.

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

A new sheet window will appear. In the Project Name field, enter “RocketMouse,” the name of our project. Leave the Screen Size as the default, “iPhone Landscape (480×320).”

Note: When you want to create a game for all models of iPhone and iPad, you generally want to choose iPhone with Landscape or Portrait orientation. LevelHelper will automatically use SD on iPhone2G/3G/3GS and HD on iPhone4/4S and iPad1/iPad2.

If you want to create a game only for iPad, use the iPad template and inside SpriteHelper, unselect “Save SD” when creating the sprite sheets.

For iPad there is also an option to not stretch graphics. That won’t work for this tutorial, because we will be using continuous scrolling parallaxes.

Under “SpriteHelper scenes and image files directory,” choose the “Images” folder from your CoronaSDK project folder, and click Open.

Under “Path to source code,” select the RocketMouse folder (the main CoronaSDK project folder). This is the folder where LevelHelper will generate the code needed to load the level in CoronaSDK. Click Open.

This setting tells LevelHelper where to automatically generate code, when needed.

Under “Engine” select “Corona SDK”. Here you are selecting what code you want LevelHelper to automatically generate for you. For this tutorial, we will use Corona SDK, but as you can see LevelHelper supports several other engines/configurations as well!

Make sure that the “Auto generate code when needed” option is selected. This tells LevelHelper to generate the code when there’s been an update to the code, or after you’ve added new tags to your project.

Under “LevelHelper scenes directory,” choose the Levels folder, and click Open.

The final Project setting window should look something like this:

Note: Next to every major feature inside LevelHelper there is a “?” button. Click it to view a movie explaining that feature.

When you’re done, click the Create New Project button. A new window will appear asking you to save the project to a file.

Save the new file in the same folder as the Corona project (RocketMouse.lhproject).

Now the LevelHelper window should look something like this:

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