How to Make a Game Like Jetpack Joyride in Unity 2D – Part 1

With the release of Unity 4.3, developers no longer had to use third party libraries or create their own solutions to build 2D games. They now had access to a 2D toolset right out of the box. Combined with some of the standard Unity tools, making 2D games in Unity was no longer a painful process, it was … dare I say … fun. :]

In this tutorial, you are going to make something equally as fun. It’s a game that doesn’t feature any irritated or flailing birds, rather it involves a mouse and his jetpack. Can you guess the game? (Hint: it’s in the title of this tutorial)

Yes, it’s Jetpack Joyride. Cue the oohs and ahhs.

Jetpack Joyride is a game that was released from Halfbrick Studios in 2011. It’s a very easy game to understand. Steal a jetpack, and fly away with it. Collect the low hanging coins and avoid the lasers. In essence, it’s a fun twist on an endless runner that controls well with touch screens. Touch the screen to fly up. Release the screen to drop back down. Avoid the obstacles to stay alive as long as you can.

In your game, you will be steering a mouse through a very long house, similarly collecting coins and avoiding lasers. Granted, not everyone hangs coins from their walls, but I’m guessing a few of you have at least a couple high wattage lasers hanging about their house. :]

This is the first part of a three part series. In this tutorial, you’ll learn how to work with physics in Unity, how to use sorting layers to organize your sprites, how to use colliders to define your world limits, and even how to kill a mouse or two. :]

In part two, you’re going to move the mouse forward through randomly generated rooms simulating an endless level. In addition, you’ll add a fun animation to make the mouse run when it is grounded.

In part three, you will add lasers, coins, sound effects, music and even parallax scrolling. By the end of this part, you will have fully functional game (albeit with a lower mice population, for sure).

Getting Started

To get started you will need some art, sound effects and music for the game. I’ve prepared a package that contains everything that you need. You can download it here: RocketMouse_Unity_Resources

Creating and Configuring the Project

Open Unity and create new project by choosing File\New Project….

When the Project Wizard window opens, click Set in Create new Project tab to set a directory for your project. Type RocketMouse in Save As field to name the project and choose a folder in which you want to store this project. Click Save when you’re done.

Don’t rush clicking Create Project button. Before that, you need to choose 2D in the combo box labeled Set up defaults for:. After that, you can safely click Create Project.

Although setting defaults to 2D when creating new project supposed to be the only thing you need to change to switch Unity to 2D mode, sometimes this doesn’t work. Well, at least it didn’t work several times for me, including this one. So it is better to make sure you are in 2D mode.

Making Sure You’re in 2D Mode

Here is a list of things you need to check to make sure everything is setup for a 2D project:

1. Select Edit\Project Settings\Editor to open the Editor Settings in the Inspector.
   In the Default Behavior Mode section, make sure Mode is set to 2D, as it is shown on the screenshot below.
   
2. In the Scene view’s control bar make sure 2D mode is enabled.

3. Select Main Camera in the Hierarchy and make sure that the Projection is set to Orthographic and its Position is set to (0,0, -10).

After checking and adjusting all settings, it is a good time to save the scene.
Create a folder named Scenes in the Project browser. Then open the Save Scene dialog by selecting File\Save Scene or using a ⌘S (Ctrl+S on Windows) shortcut. Navigate to the Scenes folder you just created, name the scene RocketMouse.unity and click Save.

Configuring Game View

Switch to the Game view and set your Game view size to a fixed resolution of 1136×640. If you don’t have this resolution option in the list, create it and name it iPhone Landscape.

Select Main Camera in the Hierarchy. In the Inspector, inside the Camera component, set Size to 3.2.

Save the scene. There are no big changes in Unity window from the project creation, but you’ve done several very important configuration steps. Without them the game wouldn’t work the way it should.

Adding the Player character

In this section of the tutorial you will add the player character who happens to be a cool mouse with a jetpack. Hell yeah!

Before you start, make sure you have downloaded the package with resources for this game. After unpacking the archive you should see two directories inside: Sprites and Audio. While you will be using a bunch of the Sprite files, you will not be using any of the audio files until another part of the tutorial. Just remember that you have them :]

Importing Game Assets

To add all the assets in one go simply select both Sprites and Audio folders and drag them to the Project browser, next to the Scenes folder that you created earlier.

That’s it, you’ve just added all required assets. At this point it might seem that there are many strange files. Don’t worry, most of the images are just decorations and backgrounds. Apart from that there are images for the mouse character, the laser and the coin objects.

Adding Player to the Scene

It is time to actually add something to the scene. Open the Sprites folder in the Project browser and find a sprite named mouse_fly within this folder. Drag this sprite to the scene.

Doing this will create an object in the Hierarchy named mouse_fly (just as the image used to create it).

Select mouse_fly in the Hierarchy and make following changes in the Insepector:

1. Change its name to mouse, since this will better describe the player character.
2. Set its Position to (0, 0, 0). You will move the mouse to its final position a bit later, but right now it is better to place it right at the screen center, so that you can see it better.
3. Add a Circle Collider 2D component, by clicking Add Component in the Inspector. In the drop down menu select Physics 2D and then choose Circle Collider 2D.
4. Set the Radius of the Circle Collider 2D component to 0.5.
5. Add a Rigidbody 2D component, by clicking Add Component and selecting Physics 2D\Rigidbody 2D.
6. Enable the Fixed Angle checkbox inside the Rigidbody 2D component.

Here is an image demonstrating all the steps:

The green circle in the Scene view shows the collider. You must have noticed that its size changed when you changed the Radius property of the Circle Collider 2D component.

Colliders define a shape that are used by the physics engine to determine collisions with other objects. You could have created a more pixel-perfect collider by using a Polygon Collider 2D component, like in screenshot below:

However, using complex colliders makes it harder for the physics engine to detect collisions, which in turn, creates a performance penalty. Just imagine how much easier it is to check if a circle collides with a rectangle, as opposed to when two complex polygons collide.

This is why it is recommended that you use simple colliders whenever possible. As you will see, a circle collider works really well for this game. The only adjustment was the radius of the collider, in order for the collider to match the original mouse image.

While colliders define the shape of the object, the Rigidbody is what puts your game object under the control of the physics engine. Without a Rigidbody component, the GameObject is not affected by gravity. Thus, you cannot apply force and torque to the GameObject, and so on.

In fact you even can’t detect collisions between two GameObject, even though both may have Collider components. One of the objects must have a Rigidbody component.

However, while you want the mouse to be affected by the gravity and collide with other objects, you don’t want its rotation to be changed. Fortunately, it is easy to solve by enabling the Fixed Angle property of the Rigidbody 2D component.

Run the scene and watch as the mouse falls down, affected by the gravity force.

But wait! Why did the mouse fall down at all? You didn’t add any gravity to the Rigidbody… or did you? In fact, when you added the Rigidbody 2D component, it was given a default Gravity Scale of 1. This tells the system to make the character fall using the default gravity of the physics engine.

Creating Script to Control Jetpack

Don’t let that mouse fall down into the abyss. Not on my shift :]

You need to add a script that will enable the jetpack and apply force to the mouse object to move it up and keep from falling.

To add a script to the mouse object follow these steps:

1. In the Project browser, create a new folder called Scripts, just as you created the Scenes folder before. Make sure that this folder is selected, since Unity will add a new script to the currently selected folder.
   
2. Select Assets\Create\C# script in the top menu and name the script MouseController.
3. Drag MouseController script over mouse in the Hierarchy to add it to the mouse game object. This will add a Script component and set its Script property to MouseController script.

Can't add script behaviour MouseController. The scripts file name does not match the name of the class defined in the script!

public class NewBehaviourScript

It is time to write some code. Open the MouseController script by double clicking it either in the Project browser or in the Inspector. This will open the MouseController.cs file in MonoDevelop.

Add the following jetpackForce public variable just inside the class definition:

public float jetpackForce = 75.0f;

This will be the force applied to the mouse when the jetpack is on.

Next, add the following method inside the class:

    void FixedUpdate () 
    {
        bool jetpackActive = Input.GetButton("Fire1");
 
        if (jetpackActive)
        {
            rigidbody2D.AddForce(new Vector2(0, jetpackForce));
        }
    }

The FixedUpdate method is called by Unity at a fixed time step. All physics related code is written in this method.

In FixedUpdate you check if the Fire1 button is currently pressed. Fire1 is defined by default in Unity as a left mouse button click, the left Control key on a keyboard, or a simple screen tap in the case of an iOS app. For this game, you want the jetpack to engage when the user touches the screen. Therefore, if Fire1 is currently pressed, the code will add a force to the mouse.

The rigidbody2D property simply returns the Rigidbody 2D component attached to the current game object or null if there is no Rigidbody 2D component attached. The AddForce method simply applies the force to the rigidbody. It takes a Vector2 that defines the direction and the magnitude of the force to apply. You will move the mouse forward later, so right now you only apply the force to move the mouse up with the magnitude of jetpackForce.

Run the scene and hold your left mouse button to enable the jetpack and make the mouse move up.

Adjusting the Gravity

The jetpack works, but you can see several problems straight away. First, depending on your perspective, the jetpack force is too strong; or the gravity is too weak. It’s far too easy to send the mouse flying off the top of the screen, never to be seen again. Rather than change the jetpack force, you can change the gravity setting of the entire project. By changing the gravity setting globally, you set a smarter default for the smaller iPhone screen. And besides, who doesn’t like the idea of controlling gravity? :]

To change the gravity force globally chose Edit\Project Settings\Physics 2D. This will open the Physics 2D Settings of the project in the Inspector. Find the Gravity field and set its Y value to -15.

Run the scene again. It should be much easier to keep the mouse within the game screen.

Don’t worry if you’re still having difficulties keeping the mouse within the game screen. Try making your Game view bigger or adjust the jetpackForce or Gravity settings. The values recommended here work well when you run the game on the iPhone. Of course, adding a floor and a ceiling will help keep the mouse in sight, so you’ll add those next.

Adding the Floor and the Ceiling

As you might have guessed, adding a floor and a ceiling is a relatively simple exercise; all you really need is an object for the mouse to collide with at the top and bottom of the scene. When you created the Mouse object earlier, it was created with an image so the user can visually track where the object is throughout the game. The floor and ceiling, however, can be represented by empty GameObjects as they never move and their location is relatively obvious to the user.

Choose GameObject\Create Empty to create empty object. You won’t see it on the screen right now… What do you expect? It’s empty! Select GameObject in the Hierarchy and make following changes in the Inspector:

1. Rename it to floor.
2. Set its Position to (0, -3.5, 0).
3. Set its Scale to (14.4, 1, 1).
4. Click Add Component and add a Box Collider 2D component by selecting Physics 2D\Box Collider 2D.

Now you should see a green collider at the bottom of the scene:

Don’t worry too much about the magic numbers in the Position and Scale properties; they will make more sense later as more elements get added to the Scene.

Run the scene. Now the mouse falls on the floor and stays there.

However if you activate the jetpack, the mouse still leaves the room since there is no ceiling.

I’m sure you can add a ceiling yourself. Set its Position to (0, 3.7, 0), and don’t forget to rename it to ceiling.

Now there is both a floor and a ceiling present in the scene.

And if you run the game you will see that the mouse will never fly off the top or fall off the bottom of the scene.

Using a Particle System to Create Jetpack Flames

Now that you’ve got the mouse moving at the user’s every will, it’s time to add some flare. In this section, you’ll make the jetpack shoot flames when the mouse goes up. Why flames? Because everything’s better with flames!

There are many different ways you can show flames coming out of the jetpack, but my personal favorite is using a Particle System. Particle systems are used to create a lot of small particles and simulate effects like fire, explosions, fog; all based on how you configure the system.

Creating a Particle System

To add a Particle System to the scene choose GameObject\Create Other\Particle System. You’ll notice a change to the scene immediately; the Particle System will show it’s default behavior in the the Scene when the object is selected.

This is a good start, but right away you should notice some problems. First, the particle system always stays in the middle of the screen, regardless of where the rocket mouse flies. To make the particles always emit from the jetpack, you’ll need to add the Particle System as a child of the mouse. In the Hierarchy, drag Particle System over mouse to add it as a child. It should look like the following screenshot:

Now that the Particle System moves correctly, configure it to resemble flames by selecting Particle System in the Hierarchy and changing the following in the Inspector:

1. Rename the Particle System to jetpackFlames.
2. Set its Position to (-0.62, -0.33, 0) to move it to the jetpack nozzle.
3. Set its Rotation to (65, 270, 270) to set the direction at which the particles will be emitted.
4. Still in the Inspector, find the Particle System component and set following properties:
   • Set Start Lifetime to 0.5
   • Set Start Size to 0.3
   • Click on Start Color and set Red to 255, Green to 135, Blue to 40 and leave Alpha at 255. You should get a nice orange color.
   • Expand Emission section and set Rate to 300. Make sure you don’t uncheck the checkbox to the left of Emission section and disable it.
   • Expand Shape section. Make sure Shape is set to Cone and set Angle to 12 and Radius to 0.1. Finally enable the Random Direction checkbox.

Here is how the particle system should look right now:

If your jetpack flames are different make sure you’ve set all the settings shown on this screenshot:

Improving the Flames

The flames are looking okay, but you’ll notice that the flame particles stop suddenly, as if they hit an invisible wall at the end of the particle emitter. You can fix this by changing the color of the particles as they fall further from the jet pack.

Select jetpackFlames in the Hierarchy and search for a section called Color over Lifetime in the Particle System component. Enable it by clicking the white circled checkbox to the left of the section name. Expand the section.

Click the white color box within Color over Lifetime to open the Gradient Editor. It should look like this:

Select the top slider on the right and change the Alpha value to 0. Then close the Gradient Editor.

Run the scene. Now jetpack flames look much more realistic.

Creating a Level Section

Remember that the mouse should glide through an endless room, avoiding lasers and collecting coins. However, it will take an eternity to create an endless room by adding everything by hand :] You got the joke, right?

Anyway, you’re going to create a few different level sections and will add a script that will randomly add them ahead of the player. As you might imagine, this can’t all be done at once! You’ll start by simply adding a few background elements in this tutorial.
In Part 2, you’ll start creating additional rooms for the mouse to fly through.

This is how one level section might look like:

The process of creating level section (let’s call one section a room) consists of 3 steps:

• Adding the background
• Adding the floor and the ceiling
• Adding decorative objects (book shelf, mouse hole, and so on)

Adding Room Background

Make sure the Scene view and the Project browser are visible. In the Project browser open the Sprites folder and drag the bg_window sprite to the scene. You don’t need to place it in a precise location; you’ll take care of that in a minute.

Right now your background will be on top of the mouse object. We will sort this out later, so for now just ignore the mouse. Select bg_window in the Hierarchy and set its Position to (0, 0, 0).

After placing the central section of the room, you need to add few more sections. One to the left and one to the right of the window.

This time use the bg sprite. Find bg in the Project browser and drag it to the scene two times. First time to the left, and second time to the right of bg_window. Don’t try to place it precisely. Right now you only need to add it to the scene.

You should get something like this:

Looks like a room by Salvador Dali, doesn’t it? :]

Using Vertex Snapping

You could just position every background element on the screen based each elements size, but moving objects by calculating these values all the time is not very convenient.

Instead you’re going to use Unity’s Vertex Snapping feature, which easily allows you to position elements next to each other. Just look how easy it is:

To use vertex snapping, you simply need to hold the V key after selecting, but before moving the GameObject.

If you run the game scene, or simply switch to the Game view you will see the mouse (the player character, not your actual input device) is behind the background. It’s as if your mouse is locked outside, trying to get back in. Don’t let your hero freeze outside!

Using Sorting Layers

To make the mouse appear on top of the room background, you’re going to use a feature called Sorting Layer. It will take only a moment to set everything up.

Select the mouse in the Hierarchy and search for the Sprite Renderer component in the Inspector. There you will see a drop down called Sorting Layer, which value is currently set to Default, as it is shown below.

Open the drop down and you’ll see a list of all the sorting layers that you currently have in your project. Right now there should be only Default.

Click on the Add Sorting Layer… option to add more sorting layers. This will immediately open the Tags & Layers editor.

Add following sorting layers, by clicking the + button.

1. Background
2. Decorations
3. Objects
4. Player

When you’re done the Tags & Layers editor should look like this:

Right now you’re going to need only Background and Player sorting layers. Other sorting layers will be used later.

Select mouse in the Hierarchy and set its Sorting Layer to Player. The mouse should immediately move to the front of the scene.

You should also move the background elements (two different bg objects and bg_window) to the background layer by selecting each object in the Hierarchy and changing it’s layer. This isn’t immediately necessary, but will help keep our house in order as you add more elements.

If you run the game, you will still notice one problem – your jetpack flames are behind the background.

You can try to find the Sorting Layer property in the Inspector for the jetpackFlames particle system, but you won’t find it. This is just a small reminder that Unity is initially a 3D game engine and some of its objects are still not fully updated to work in 2D world.

Fixing the Particle System Sorting Order

Even though there’s no Sorting Layer property for the jetpackFlames in the Inspector, that doesn’t mean you can’t access and change it with a script.

First, create a new C# script and call it Creating ParticleSortingLayerFix. Attach it to the jetpackFlames object. Stuck on how to do it? Check out the spoiler below:

Open the ParticleSortingLayerFix script by double clicking it in the Project browser or in the Inspector.

Add the following code in Start:

particleSystem.renderer.sortingLayerName = "Player";
particleSystem.renderer.sortingOrder = -1;

The first line sets the sorting layer for the particle system, and the second line sets the order of the object within the sorting layer. If you don’t set it to -1 then jetpack flames will be displayed on top of the jetpack, as is shown below:

Run the scene and you should see that jetpack flames are now displayed above the background.

However, if you stop the game and switch to the Scene view, the particle system will still be displayed behind the background. Unfortunately, you have to live with this. The flames’ Sorting Layer is set in code, so it won’t show up in the Scene UI. Maybe this will be fixed in some of the next Unity updates.

Decorating the Room

To decorate the room you can use any amount of bookcases and mouse holes from Sprites folder in the Project browser. You can position them anyway you want. Just don’t forget to set their Sorting Layer to Decorations.

This is how I decorated the room:

Now, this is starting to look like a real game!

Where To Go From Here?

I hope you liked the tutorial so far. Now that you have your hero the mouse flying up and down on a basic background, head over to Part 2 where your mouse will start to move forward through randomly generated rooms. You’ll even add a few animations to keep the game fun and engaging.

You can download the final project for this part here: RocketMouse_Final_Part1

I would love to hear your comments and questions below. See you in Part 2!

How to Make a Game Like Jetpack Joyride in Unity 2D – Part 1 is a post from: Ray Wenderlich

The post How to Make a Game Like Jetpack Joyride in Unity 2D – Part 1 appeared first on Ray Wenderlich.