Building the scene

Now that we have some assets to build with, we can start building our first town, by placing images within the scene.

Adding the town background

Returning to the scene view, you should see the following:

If, however, we add our town background texture to the scene by dragging it to either the project Hierarchy or the scene view, you will end up with the following:

Our player has vanished! The reason for this is simple: Unity's sprite system has an ordering system that comes in two parts.

Sprite sorting layers

Sorting Layers (Edit | Project Settings | Tags and Layers) are a collection of Sprites, which are bulked together to form a single group. Layers can be configured to be drawn in a specific order on the screen, as shown in the following screenshot:

Sprite Sorting Order

Sprites within an individual layer can be sorted, allowing you to control the draw order of sprites within that layer. The sprite Inspector is used for this purpose, as shown in the following screenshot:

Note

Sprite's Sorting Layers should not be confused with Unity's rendering layers. Layers are a separate functionality used to control whether groups of GameObjects are drawn or managed together, whereas Sorting Layers control the draw order of Sprites in a scene.

The reason our player is no longer visible is she is behind the background. As the two sprites are in the same layer and have the same sort order, they are simply drawn in the order that they are in the project Hierarchy.

Updating the scene sorting layers

To resolve the update of the scene's sorting layers, let's organize our Sprite rendering by adding some Sprite sorting layers. Open up the Tags and Layers Inspector pane, as shown in the following screenshot (by navigating to Edit | Project Settings | Tags and Layers) and expand the Sorting Layers menu:

You can add new sorting layers by selecting the plus sign. Add the following Sorting Layers:

• Background
• Middleground
• Foreground

These layers need to be listed in the ordered they are bulleted. Images in the sorting layer on the top of the list will appear to be the furthest back and images in the sorting layer on the bottom of the list will appear to be the closest. You should see the following:

Tip

You can reorder the layers underneath the default anytime by selecting a row and dragging it up and down the sprite's Sorting Layers list.

With the layers set up, we can now configure our GameObjects accordingly. Select the background to view its Inspector. In the Sprite Renderer component, Background will now be available in the drop-down menu for Sorting Layer, as shown in the following screenshot:

Now, set the Sorting Layer on our background Sprite to the Background layer, as shown in the following screenshot:

Now, select the player GameObject and set its Sorting Layer to Middleground. You should now see the player in front of the background, as follows:

Building out the scene

Before we add more objects to the scene, let's add a few more background images to expand the size of the scene. First, set the background's Transform position to (0,0,0). Now, duplicate the background twice by selecting the image and pressing Ctrl + D two times. Using the move controls (or by adjusting the transform x position) move background (1) to the right of background and background (2) to the left of background. Make sure you do not see spaces between the background images. You should now have the following:

It can be rather cumbersome to have a bunch of objects in your hierarchy. Also, sometimes you want objects to be grouped together so that you can move them as a single object. You can create empty objects in your scene and use them in a similar fashion as folders to group objects together.

From the Create drop-down menu, select Create Empty, as shown in the following screenshot:

Rename the new GameObject Backgrounds and set its Transform position to (0,0,0). Now, select the three background images and drag them until you are hovering over the Backgrounds GameObject in the Hierarchy. This will make the background images children of the Backgrounds GameObject. Now, you can move all of the background images at once. You can also minimize the arrow next to Backgrounds to declutter your Hierarchy, as shown in the following screenshot:

Now add the sidewalk and road sprites to the scene. When you do so, you will notice they appear behind the background. Change their GameObject names to sidewalk and road, respectively. For the road, change its Sorting Layer to Background and its Order in Layer to 1, as shown in the following screenshot:

For the sidewalk, change its Sorting Layer to Background and its Order in Layer to 2, as shown in the following screenshot:

Duplicate each of them once. Create an empty GameObject named Roads and an empty GameObject named Sidewalks to contain the groups. Make sure you set each of these empty GameObjects' Transform position to (0,0,0) before making the Sprites children of the empty GameObjects. Move the sidewalks and roads into position so that your scene looks like the following:

Right now our character is floating in the air and can walk places other than the road and sidewalk, but we will fix that shortly.