Backgrounds and layers

Now that we have our hero in play, it would be nice to give her a place to live and walk around, so let's set up the home town and decorate it.

First, we are going to need some more assets. So, from the asset pack you downloaded earlier, grab the following assets from the Environments pack and place them in the Assets\Sprites\Environment folder:

• background.png
• skyline.png
• buildingsAndRoads.png
• townObjects.png

To slice or not to slice

As we progress through this book, you will notice that some assets are single textures, whereas others contain multiple images, and you may wonder which method is best to create your assets and why it is best.

The answer (as it is in a lot of these situations) depends on the needs of your title.

It is always better to pack many of the same types of images on to a single asset/atlas and then use the Sprite Editor to define the regions on that texture for each sprite, as long as all the Sprites on that sheet are going to get used in the same scene. The reason for this is when Unity tries to draw the Sprite to the screen, it needs to send the images to draw to the graphics card; if there are many images to send, this can take some time. If, however, it is just one image, it is a lot simpler and more performant with only one file to send.

There needs to be a balance; too large an image and the upload to the graphics card can take up too many resources; too many individual images and you have the same problem.

The basic rules of thumb are as follows:

• If the background is a full-screen background or a large image, then keep it separate.
• If you have many images and all are for the same scene, then put them into a single sprite sheet/atlas.
• If you have many images but all are for different scenes, then group them as best you can; common items on one sheet and scene-specific items on different sheets. You'll have several sprite sheets to use.

You basically want to keep as much stuff together as makes sense and not send unnecessary images that won't get used to the graphics card. Find your balance.

The town background

First, let's add a background for the town using the Assets\Sprites\Environment\background.png texture, as shown in the following screenshot:

With the background asset, we don't need to do anything to the import settings other than ensure it has been imported as a Sprite (2D and UI) (in case your project is in 3D mode), as shown in the following screenshot:

Background Import settings menu

There are two other Sprites that will be incorporated into the background and they are in the Assets\Sprites\Environment\skyline.png image file. The skyline.png image contains two rows of white skyscraper silhouettes. The following screenshot shows the image with its transparencies:

To have these Sprites display appropriately, we will have to manually slice the image into two Sprites using the Sprite Editor. We start editing this sprite sheet in the same way we edited the sprite sheet of the character in Chapter 2, Building Your Project and Character. Change the Sprite Mode to Multiple and load up the Sprite Editor using the Sprite Editor button, as shown in the following screenshot:

Loading the Sprite Editor 

Hit Apply, when prompted:

If you try to use the automatic slicing technique that we used for the character, each of the islands of buildings will be selected as separate Sprites. We do not want this. We want all the buildings in the top row to be a single Sprite and all the buildings in the bottom row to be a second Sprite. We will begin slicing this by using the Grid By Cell Count slice Type. Change the Column & Row setting to 1 and 2 as shown in the following screenshot, and then hit Slice:

You should now see the following:

Second Sprite Sheet 

This is almost what we want, except there is too much space at the bottom of the top sprite. When you select the top sprite, you will be able to adjust the Sprite's bounding box by dragging the edges to their desired location. Drag the bottom edge so that it at the very bottom of the buildings as shown in the following screenshot:

If you are having trouble seeing the buildings, you can select the Alpha/Color button at the top of the Sprite Editor, as shown in the following screenshot:

Doing so will make the opaque regions stand out from the transparent regions much more drastically, as shown in the following screenshot:

Once you have both rows of buildings boxed in, select Apply at the top of the Sprite Editor and then close the Sprite Editor.

Tip

Don't worry if you don't perfectly box in the two skylines. A little room on the top or bottom won't be the end of the world.

The town buildings and roads

Next we will add the town's buildings and roads from the Assets\Sprites\Environment\buildingsAndRoads.png file, as shown in the following screenshot:

These images can be separated quite well with the automatic slice setting. Follow the steps provided in Chapter 2, Building Your Project and Character, to automatically slice the image. When you have finished, you should have four images, as shown in the following screenshot:

The extra scenery

Now let's add some extra assets to the scene. If we look at the image containing all of the scene objects (Assets\Sprites\Environment\townObjects), we will see the following:

As with the other images, change its Sprite Mode to Multiple and run the Sprite Editor. Now perform Slice | Automatic on it. You should see the following:

Notice that one of the sprites, the mailbox, does not get detected very well; altering the automatic split settings in this case doesn't help, so we need to do some manual manipulation. Click on the two bounding regions around the scattered mail and delete them by pressing Delete with the two regions selected, the two regions that are highlighted in the following screenshot for clarification:

Manually change the size of the region that is around the mailbox so that it also includes the scattered mail, as shown in the following screenshot:

This gives us some nice additional assets to scatter around our town and give it a more interesting look, as shown in the following screenshot: