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

Adding the Player to the Scene

Many animated game sprites are supplied in a sprite sheet, and our heroic mouse is no exception.

Slicing The Mouse Sprite Sheet

Frames of the running, flying and dying animation are contained within the mouse_sprite_sheet. Your first step is to slice it correctly.

Open the Sprites folder in the Project view and find mouse_sprite_sheet. Select it and set its Sprite Mode to Multiple in the Inspector, and then click Apply.

Then click the Sprite Editor button to open the Sprite Editor.

In the Sprite Editor click the Slice button near the left top corner to open the slicing options.

1. Set the Type field to Grid By Cell Size.
2. Set the Pixel Size to 162 x 156.
3. Click the Slice button.
4. You will see a faint grid immediately appear. Don’t forget to click the Apply button to save changes.

Still within the Sprite Editor, select the top left image to display its details. Click in the Name field and give the sprite a more appropriate name: mouse_run_0.

Rename the remaining sprites from top-left to bottom-right as follows:

• mouse_run_1
• mouse_run_2
• mouse_run_3
• mouse_fly
• mouse_fall
• mouse_die_0
• mouse_die_1

Click Apply again to save changes.

Close the Sprite Editor. Expand mouse_sprite_sheet in the Project view, and you will see that it was sliced into eight different sprites. Nice!

It is time to actually add something to the scene. Select the sprite named mouse_fly and drag it into the Scene view.

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

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

1. Change 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. Expand the constraints section within the Rigidbody 2D component. Enable the Freeze Rotation Z checkbox.

Here is an image demonstrating all the steps:

The green circle in the Scene view shows the collider; 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, as in the screenshot below:

However, using complex colliders makes it harder for the physics engine to detect collisions, which in turn creates a performance hit. A good rule is to always 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 so that it matched 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 things such as force and torque to the GameObject.

In fact, you wouldn’t even detect collisions between two GameObjects, even if both had Collider components. One of the objects must have a Rigidbody component.

However, while you want the mouse to be affected by gravity and collide with other objects, you don’t want its rotation to be changed. Fortunately, this is easy to solve by enabling the Freeze Rotation 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 a Script to Control the Jetpack

You won’t let that mouse fall down into the abyss. Not on your watch!

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

To add a script to the mouse object:

1. In the Project browser, create a new folder within the RW directory 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 Create ▸ C# Script in the top menu and name the script MouseController.
3. Drag the MouseController script over mouse in the Hierarchy to add it to the mouse GameObject. This will add a Script component and set its Script property to MouseController script.

It’s time to write some code. Open the MouseController script by double-clicking it either in the Project view or in the Inspector. This will open MouseController.cs in the editor of your choice.

Add the following jetpackForce 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.

Just below jetpackForce, add the following variable:

private Rigidbody2D playerRigidbody;

Next add the following code to the automatically generated Start method:

playerRigidbody = GetComponent<Rigidbody2D>();

When the game starts, you retain a reference to the player’s Rigidbody. You will need to access this component very frequently in this script, and you don’t want to create a performance hit every time you need to locate it.

Next, add the following method inside the class:

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

FixedUpdate() is called by Unity at a fixed time interval. All physics-related code is written in this method.

In FixedUpdate, you check if the Fire1 button is currently pressed. In Unity, Fire1 by default is defined 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.

AddForce 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 your hero 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.