How to Make a Game Like Jetpack Joyride in Unity 2D – Part 1
Learn how to create a game like Jetpack Joyride in Unity 2D in this three part tutorial series. By Mark Placzek.
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 in Unity 2D – Part 1
35 mins
- Getting Started
- Creating and Configuring the Project
- Configuring the Game View
- Adding the Player Character
- Importing Game Assets
- Adding the Player to the Scene
- Slicing The Mouse Sprite Sheet
- Creating a Script to Control the Jetpack
- Adjusting the Gravity
- Adding the Floor and the Ceiling
- Using a Particle System to Create Jetpack Flames
- Creating a Particle System
- Improving the Flames
- Creating a Level Section
- Adding the Room Background
- Using Vertex Snapping
- Using Sorting Layers
- Decorating the Room
- Where to Go From Here?
Adjusting the Gravity
The jetpack works, but you can see several problems straight away. First, depending on your perspective, the jetpack force is either 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
Adding a floor and a ceiling is a relatively simple exercise; all you 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 could 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 an empty object. You won’t see it on the screen. What do you expect? It’s empty!
Select the new GameObject in the Hierarchy and make the following changes in the Inspector:
- Rename it to floor.
- Set its Position to (0, -3.3, 0).
- Set its Scale to (14.4, 1, 1).
- 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 you add more elements 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 ceiling. If you need a hint, check the spoiler below.
[spoiler title=”Need help adding a ceiling?”]
Choose GameObject ▸ Create Empty to create the object. Select it in the Hierarchy and make the following changes in the Inspector:
- Change its name to ceiling.
- Set its Position to (0, 3.7, 0).
- Set its Scale to (14.4, 1, 1).
- Click Add Component and add a Box Collider 2D component.
[/spoiler]
Now there is both a floor and a ceiling present in the scene. Run the game, and try as you might, 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 flair — or is that 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 ▸ Effects ▸ Particle System. You’ll notice a change to the scene immediately: the Particle System will show its default behavior in 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 the Particle System over the 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 the Particle System in the Hierarchy and changing the following in the Inspector:
- Rename the Particle System to jetpackFlames.
- Set its Position to (-0.62, -0.33, 0) to move it to the jetpack nozzle.
- Set its Rotation to (65, 270, 270) to set the direction at which the particles will be emitted.
- 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 the Emission section and set Rate over Time to 300. Make sure you don’t uncheck the checkbox to the left of Emission section and disable it.
- Expand the Shape section. Make sure Shape is set to Cone, set Angle to 12 and Radius to 0.1. Finally set the Randomize Direction to 1.
Here is how the particle system should look:
If your jetpack flames look different, make sure you’ve set all the settings shown on this screenshot: