With our main character in hand, let's give him a home and a place to walk around. In this chapter, we will cover the basics of creating immersive areas where players can walk around and interact, as well as some of the techniques used to manage those areas.
This chapter will give you some practical tips and tricks of the spritesheet system introduced with Unity 4.3 and how to get it to work for you.
Lastly, we will also have a cursory look at how shaders work in the 2D world and the considerations you need to keep in mind when using them. However, we won't be implementing shaders as that could be another book in itself.
The following is the list of topics that will be covered in this chapter:
- Working with environments
- Looking at sprite layers
- Handling multiple resolutions
- An overview of parallaxing and effects
- Shaders in 2D – an overview
Now that we have our hero in play, it would be nice to give him a place to live and walk around, so let's set up the home town and decorate it.
Firstly, we are going to need some more assets. So, from the asset pack you downloaded earlier, grab the following assets from the Environments pack, place them in AssetsSpritesEnvironment, and name them as follows:
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 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 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 rule of thumb is as follows:
- If the background is a full screen background or large image, then keep it separately.
- If you have many images and all are for the same scene, then put them into a spritesheet/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 spritesheets 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.
First, let's add a background for the town using the AssetsSpritesEnvironmentackground01 texture. It is shown in the following screenshot:
With the background asset, we don't need to do anything else other than ensure that it has been imported as a sprite (in case your project is still in 3D mode), as shown in the following screenshot:
For the steampunk environmental assets (AssetsSpritesEnvironmentenvironmentalAssets) that are shown in the following screenshot, we need a bit more work; once these assets are imported, change the Sprite Mode to Multiple and load up the Sprite Editor using the Sprite Editor button.
Next, click on the Slice button, leave the settings at their default options, and then click on the Slice button in the new window as shown in the following screenshot:
Click on Apply and close the Sprite Editor. You will have four new sprite textures available as seen in the following screenshot:
We saw what happens when you use a grid type split on a spritesheet and when the automatic split works well, so what about when it doesn't go so well? If we look at the Fantasy environment pack (AssetsSpritesEnvironmentenvironmentalAssets2), we will see the following:
After you have imported it and run the Split in Sprite Editor, you will notice that one of the sprites 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 as shown in the following screenshot:
In the previous screenshot, you can see that just two of the rocks in the top-right sprite have been identified by the splicing routine. To fix this, just delete one of the selections and then expand the other manually using the selection points in the corner of the selection box (after clicking on the sprite box). Here's how it will look before the correction:
After correction, you should see something like the following screenshot:
This gives us some nice additional assets to scatter around our towns and give it a more homely feel, as shown in the following screenshot:
