A nice little feature of Unity that allows you to scale elements such as Sprites without distortion is 9-slicing. Essentially, what 9-slicing does is allow you to reuse an image at various sizes without needing to prepare multiple Assets. As the name suggests, it involves splitting the image into nine segments. An example of this splitting is shown in the following screenshot:

The following four points describe what will happen if you change the dimensions of the preceding image:

• If you change the four corners (A, C, G, and I), they will not change in size
• If you move sections B and H, they will stretch or tile horizontally
• If you move sections D and F, they will stretch or tile vertically
• If you move section E, the image will stretch or tile both horizontally and vertically

You can see these four points illustrated in the following screenshot:

By using 9-slicing, you can re-size the Sprite in different ways and keep the proportions. This is particularly useful for creating the walls within our environment that will create obstacles for our little Angel and enemies to navigate around.

We will need to do this for our ACSpriteEnviroBlock so that we can place it within our level for the player to navigate around. To do this, we need to make sure that the Sprite that we have created has been set up properly. First, you need to make sure the Mesh Type is set to Full Rect. To do this, select the Angel_Cake_Sprite_Atlas (contained in Project window | Asset | Sprites), then head to the Inspector and change Mesh Type from Tight to Full Rect, like in the following screenshot:

Now we need to define the borders of the Sprite. To do this, perform the following steps:

1. First, select the Sprite (Angel_Cake_Sprite_Atlas).
2. Next, in the Inspector, click the Sprite Editor button.

3. Now, click on the Sprite that you want to apply the 9-slicing to. In our case, this will be the ACSpriteEnviroBlock, like in the following screenshot:

Looking at the Sprite information box in the bottom-right corner, we need to adjust the values for the Borders of the Sprite. For this Sprite, we will use the value of 20 for L, R, T, and B (left, right, top, and bottom, respectively):

In some cases, you might need to tweak the position of the borders; you can do this by clicking and dragging the green dots located at the intersections of each border (top, bottom, and sides). You can see this in the following screenshot:

To test your 9-sliced Sprite, drag it from the Project window into the Scene, like in the following screenshot:

Next, in the Inspector, change the Draw Mode from Simple to Sliced, like in the following screenshot:

Now you can resize the ACSpriteEnviroBlock without it deforming. Give it a go! You should have something like the variations in the following screenshot:

You will notice that it isn't quite like the Sprite. This is okay, we can adjust this setting in the Inspector. Simply click on the Atlas Texture in the Project window and, in the Inspector, change the value of Pixels Per Unit to 250:

Click Apply, then click and drag another ACSpriteEnviroBlock onto the Scene and try to resize it. You will end up with something like the following screenshot:

As you can see, there is a little distortion. This just means that you will need to edit the Borders inside the Sprite Editor until you get the location of them correct. For now, tinker with the locations of the borders. In Chapter 3, Let's Make Some Prefabs, you will get the correct ones. Lastly, we will also cover other Draw Modes such as Tiled in later chapters with our third project. For now, this is all that you need to know to get you prepared for Chapter 3, Let's Make Some Prefabs.