Using the empty project we created in the previous part, we will now learn how to add a background and some fancy clouds.

Adding a background

Your first background will be static. We will use the following image:

(Right click to save the image)

Import the image in the “sprites” folder. Simply copy the file in it, or drag and drop it from the explorer.

Do not worry about the import settings for now.

In Unity, create a new Sprite game object in the scene.

What is a sprite?

In general, we call “sprite” a 2D image displayed in a video game. Here, it’s a Unity specific object made for 2D games.

Add the texture to the sprite

We will now select the actual sprite to display. Make sure that “New Sprite” is selected and look at the inspector. Set the Sprite property to the “background” image:

(You have to click on the small round icon at the right of the input box to show the “Select Sprite” inspector)

You can see that some other sprites are there. Those are the default images used by uGUI (the Unity UI system).

Well, we have set a simple sprite displaying a cloudy sky background. You can think it was a bit complicated just for that. In fact, we could have dragged the sprite from the “Project” tab directly right into the “Scene”.

Let’s reorganize the scene.

In the “Hierarchy” pane, select the New Sprite. Rename it in Background1 or something you will easily remember.

Then move the object to where it belongs: Level -> Background. Change its position to (0, 0, 0).

A quick exercise: duplicate the background and place it at (20, 0, 0). It should fit perfectly with the first part.

Sprite layers

The next statement will seem pretty obvious, but it has some consequences: we are displaying a 2D world.

This means that all images are at the same depth, ie. 0. And you (as well as the graphics engine) don’t really know who’s going to be displayed first.

Sprite layers allow us to tell Unity what is in the front and what is in the back.

In Unity, we can change the “Z” of our elements, and this will allow us to have layers. This is actually what we were doing in this tutorial before the Unity 5 update.

But we thought that it was a good idea to use Sprite Layers.

On your “Sprite Renderer” component, you have a field named… “Sprite Layer”, currently set to Default.

If you click on it, a short list will show:

Let’s add some layers to fit our needs (use the “+” button):

Apply the Background layer to our background sprite:

Adding background elements

Also known as props. These elements aren’t used to improve the gameplay but to visually enhance the scene.

Here are some simple flying platform sprites:

(Right click to save the image)

As you can see, we got two platforms in one file. This is a good way to learn how to crop sprites with the Unity tools.

Getting two sprites from one image

1. Import the image in your “sprites” folder
2. Select the “platforms” sprite and go to the inspector
3. Change “Sprite Mode” to “Multiple”
4. Click on “Sprite Editor”

In the new window (“Sprite Editor”), you can draw rectangles around each platform to slice the texture into smaller parts:

Call the platforms “platform1” and “platform2”.

Now, under the image file, you should see the two sprites separately:

Adding them to the scene

We will proceed like for the background sprite: create a new Sprite and select the “platform1” sprite (or drag them one by one from the “Project” to the “Scene” tab). Repeat for “platform2”.

Set their “Sprite Layer” to “Platforms”.

Place them in the Middleground object.

And… it’s working! I’m still amazed how simple it is now (to be honest, it was a bit tricky without the 2D tools, involving quad and image tiling).

Prefabs

Save those platforms as prefabs. Just drag’n’drop them inside the “Prefabs” folder of the “Project” pane from the “Hierarchy”:

By doing so, you will create a Prefab based exactly on the original game object. You can notice that the game object that you have converted to a Prefab presents a new row of buttons just under its name:

Creating prefabs with the platform objects will make them easier to reuse later. Simply drag the Prefab into the scene to add a copy. Try to add another platform that way.

You are now able to add more platforms, change their positions, scales and planes.

You can put some in background or foreground too. Remember that the “Background”, “Middleground” and “Foreground” objects are just folders. So you need to set the right “Sprite Layer” (Platforms) and change the “Order in Layer”.

Use -10 for far platforms, and increase this number as you reach the foreground. An example:

It’s not very fancy but in two chapters we will add a parallax scrolling and it will suddenly bring the scene to life.

Camera and lights

Well. In the previous version of this tutorial (for Unity 4.2), we had a long and detailed explanation on how to set the camera and the lights for a 2D game.

The good news is that it’s completely useless now. You have nothing to do. It just works™.

Next step

You have just learned how to create a simple static background and how to display it properly. Then, we have taught you how to make simple sprites from an image.

In the next chapter, we will learn how to add a player and its enemies.