Use a Sliced Sprite to make a UI image

The right side of the picture above displays the texture of original size. The left side displays the effect of choosing Sliced mode and enlarging the size property.

To use a 9-sliced image effect that can be infinitely enlarged, we need to cut the image asset into a 9-slicing at first. First open the Sprite Editor, select the image asset in Assets, then click the Edit button on the bottom of Inspector. If the height of your window is not large enough, you might need to scroll Inspector downward to see the button at the bottom.

We click and drag the four split lines at the top, bottom, and sides respectively and cut the image into a 9-slicing. The nine areas will apply different zooming in/out strategies when the Sprite size changes, which is as illustrated below:

And the following picture illustrates the state of zooming in/out in different areas (the picture comes from ):

After cutting, don’t forget to click the green check mark on the upper right corner of Sprite Editor to save modifications to the asset.

After you have prepared the 9-sliced asset, you can modify the draw mode of the Sprite and modify the to make a UI element that can specify any size.

1. Then drag the control point with the to enlarge the size property of the node. You can also modify the property value directly in the Inspector. Because the image asset has been set to 9-slicing, no matter how much the Sprite zooms in, there will be no vagueness or distortion.

When using tools or directly modifying the size property of Sliced ​​Sprite, note that the size property value cannot be negative, otherwise it cannot be displayed normally in Sliced ​​mode.