web analytics

How to Use 9 Slice Image in Unity 5

Lets say we have a narrative game , for that we  need to have different sizes of dialog box . But we can achieve this using only one Dialog box image .Good thing that Unity’s UI supports 9 Slice Images by Default (Image)

unity 9 slice 2

Lets say we have above dialog box sprite.
1.  Right click –> UI –> Image and assign your dialog box image to it.

unity 9 slice 1

2.  We want to have a dialog box larger than that. What we do now?, we scale it , Right?
unity 9 slice 3

See when we scales the box , the the glow effect stretches and corners  are not preserved . If we want to preserve the corners , we will make the image 9 Sliced .

How to create 9 Slice Image :

unity 9 slice image,unity ui tutorial,unity sprite editor , learn unity
1. Click on the image you want to 9 Slice and Set the Texture type to Sprite  and click on Sprite Editor

unity 9 slice 4
2. Use the sprite editor to slice the sprite .Now you will see small green points at the  mid of every edge
unity 9 slice 5

3. Now drag the points like shown in below image
unity 9 slice 6

4. Now hit apply and select the image and set its Image property as below
unity 9 slice 7

5. Now Voila !
unity 9 slice 8

Now you can resize the dialog box  to any size , the glow and the corners will be preserved.

* 9 Slice Images can help you in reducing game size by minimizing the image size

How  9 Slice sprite works –

unity 9 slice 9

In 9 slice the sprite is divided into 9 parts (virtually) .

1,3,7,9 Does not scale
4,6 Scales vertically only
2,8 Scales horizontally only
5 Scales horizontally and vertically
unity 9 slice10

 

unity 9 slice image,unity ui tutorial,unity sprite editor , learn unity

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *