Use a Sliced Sprite to make a UI image
When developing UI, we usually use an image in a nine rectangle grid format to display US element, the size of which might be dynamically modified according to the requirements of fitting screen resolution. In this way, even a very small original picture can be used to generate a background image that can cover the whole screen. It will save the inclusive space of the game, on the other hand, it can flexibly fit different layout requirements.
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
The nine rectangle grid cutting of the image resource
To use a nine rectangle grid image effect that can be infinitely enlarged, we need to cut the image resource into a nine rectangle grid at first. There are two methods to open Sprite editor to edit the image resource:
- Choose image resource in resource manager, then click the edit button on the bottom of property checker. If the height of your window is not large enough, you might need to scroll property checker downward to see the button at the bottom.
- Choose the image node that you want to cut into a nine rectangle grid in scene editor. Then find and click the Edit button on the right side of the
Sprite Frameproperty in the Sprite component of property checker.
After opening Sprite editor, you will see there is a green line around the image, which indicates the position of the current split line of the nine rectangle grid. Drag the mouse to the split line, you will see the shape of the cursor change, then you can press down and drag the mouse to modify the position of the split line.
We drag the four split lines on the left/right/upper/lower side respectively and cut the image into a nine rectangle grid. 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 fromYannick Loriot's Blog）:
After cutting, don't forget to click the green check mark on the upper right corner of Sprite editor to save modifications to the resource.
Set Sprite component to use Sliced mode
After preparing the resource that has been cut into a nine rectangle grid, you can modify the display mode of the Sprite. And by modifying
size, you can create a UI element whose size can be arbitrarily designated.
- First, choose the Sprite node in the scene, set
Typeproperty of the Sprite as
- Then drag the controlling point by rectangle tool to enlarge the
sizeproperty of the node. You can also modify the
sizeproperty by directly inputting a numeric value into property checker. If the image resource is produced in a nine rectangle grid format, then no matter how much the Sprite zooms in, no vagueness or distortion will appear.
When using rectangle tool or directly modifying the
size property of a Sliced Sprite, don't set the value of
size as a negative number, otherwise it can't be displayed correctly in Sliced mode.
Continue on to read about Multi-resolution