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

Adding Run Animation Frames

First, you’re going to add frames to the run animation. Make sure both the Animation view and the Project view are visible. In the Animation view, select the run animation.

In the Project view, open the Sprites folder and expand the mouse_sprite_sheet.

Select all the run animation frames: mouse_run_0, mouse_run_1, mouse_run_2, mouse_run_3. Drag the frames to the Animation view's timeline as shown below:

Here is how the timeline should look like after you have added the frames.

Adding the Fly Animation Frame

Believe it or not, the fly animation consists of only one frame. Select the fly animation in the Animation view.

In the Project view find the mouse_fly sprite and drag it to the timeline, just as you did with the run animation. But this time you only need to add one sprite.

Why would someone want to create an animation with only one frame? This makes it much easier to switch between the running and flying mouse states using the Animator transitions. You’ll see this in a moment.

Adjusting the Animator and Run Animation Settings

Run the scene. You will notice something is not quite right: Your poor mouse is stuck in a perpetual insane sprint! Sadly, the GIF can't fully represent the insanity here.

Since the run animation was added first, the Animator component set it as the default animation. Therefore the animation starts playing as soon as the scene runs. To fix the animation speed, select the run animation in the Animation view and set the Samples property to 8 instead of 60.

Select the mouse GameObject in the Hierarchy and find the Animator component in the Inspector. Select the Update Mode dropdown box and change Normal to Animate Physics.

As the game is using physics, it's a good idea to keep animations in sync with physics.

Run the scene. Now the mouse should be walking at a sensible rate.

However, the mouse continues to walk even while it is in the air. To fix this, you need to create some animation transitions.

Creating Animation Transitions

To use the Animator Transitions mechanism, you’re going to need one more Unity window. In the top menu, choose Window ▸ Animator to add the Animator view, and ensure you have the mouse GameObject selected in the Hierarchy. Currently you have two animations there: run and fly. The run animation is orange, which means that it is the default animation.

However, there is no transition between the run and fly animations. This means that the mouse is stuck forever in the run animation state. To fix this you need to add two transitions: one from run to fly, and another back from fly to run.

To add a transition from run to fly, right-click the run animation and select Make Transition, then hover over the fly animation and left-click on it.

Similarly, to add a transition from fly to run, right-click the fly animation. Select Make Transition, and this time hover over the run animation and left-click.

Here is the process of creating both transitions:

This has created two unconditional transitions, which means that when you run the scene the mouse will first play its run state, but after playing the run animation one time, the mouse will switch to the fly state. Once the fly state is completed, it will transition back to run and so forth.

Switch to the Animator while the scene is running. You will see that there is a constant process of transitioning between the animations:

Adding a Transition Parameter

To break this vicious circle, you need to add a condition that controls when the fly animation should transition to the run animation and vice versa.

Open the Animator view and find the Parameters panel in the top left corner, which is currently empty. Click the + button to add a parameter, and in the dropdown select Bool.

Name the new parameter isGrounded.

Select the transition from run to fly to open transition properties in the Inspector. In the Conditions section, click the plus to add isGrounded and set its value to false.

While you are here, you’ll prevent against any lag or transition between the animation states. Uncheck Has Exit Time and click the disclosure arrow to expand the Settings for the transition. Set the Transition Duration to 0.

Do the same with the transition from fly to run, but this time set the isGrounded value to true.

This way the mouse state will change to fly when isGrounded is false, and to run when isGrounded is true.

While you still have yet to pass in the parameters, you can test the transitions right now. Run the scene, then make sure the Animator view is visible and check/uncheck the isGrounded while the game is running.

Checking if the Mouse is Grounded

There are many ways to check if the game object is grounded. The following method is great because it provides visual representation of the point where the ground is checked, and it can be quite useful when you have many different checks, such as ground check, ceiling check, or others.

What gives this method visual representation is an Empty GameObject added as a child of the player character, as shown below.

Create an Empty GameObject, then drag it over the mouse GameObject in the Hierarchy to add it as a child object. Select this GameObject in the Hierarchy and rename it to groundCheck. Set its Position to (0, -0.7, 0).

To make it visible in the scene, click on the icon selection button in the Inspector and set its icon to the green oval. You can really choose any color, but green is truly the best.

Here is what you should get in the end:

The MouseController script will use the position of this Empty GameObject to check if it is on the ground.

Using Layers to Define What is Ground

Before you can check that the mouse is on the ground, you need to define what is ground. If you don’t do this, the mouse will walk on top of lasers, coins and other game objects with colliders.

You’re going to use the LayerMask class in the script, but to use it, you first must set the correct Layer to the floor object.

Open the Prefabs folder in the Project view and expand the room1 Prefab. Select the floor inside the Prefab.

In the Inspector, click on the Layer dropdown and choose the Add Layer... option.

This will open the Tags & Layers editor in the Inspector. Find the first editable element, User Layer 8, and enter Ground in it. All previous layers are reserved by Unity.

Next, select the floor within the room1 Prefab once again and set its Layer to Ground.