Recommended: Add NSDT Scene Editor to your 3D toolchain
3D Toolset: NSDT Jianshi Digital Twin
Make UI images that can be stretched arbitrarily
The core design principle of the UI system is to automatically adapt to various device screen sizes. Therefore, when making the UI, we need to correctly set the size (size) of each control element, and make the size of each control element adapt to the size of the device screen. Automatic stretch fit to size. In order to achieve this, it is necessary to use images in the nine-square grid format to render these elements. In this way, even if a small original image is used, a background image covering the entire screen can be generated. On the one hand, it saves space in the game package, and on the other hand, it can flexibly adapt to different layout needs.
The right side of the picture above shows the display of the original texture size, and the left side shows size the display effect after selecting Sliced mode and enlarging the attributes.
Jiugongge segmentation for editing image resources
To use the nine-square grid image effect that can be infinitely enlarged, we need to first divide the image resources into nine-square grid. First open the Sprite Editor , select the image resource in the Resource Manager , and then click the Edit button at the bottom of the Property Inspector . If your window isn't tall enough, you may need to scroll down in the Property Inspector to see the buttons below.
After opening the Sprite editor , you can see a green line around the image, indicating the position of the current nine-square grid dividing line. Move the mouse to the dividing line, and you can see that the cursor shape changes. At this time, you can press and drag the mouse to change the position of the dividing line.
We drag the four dividing lines up, down, left and right respectively to divide the image into nine grids. sizeDifferent scaling strategies will be applied to the nine areas when the Sprite size ( ) changes, as shown in the figure below:
The following figure describes the scaling of different areas (picture from Yannick Loriot's blog):
After completing the splitting, don't forget to click the green check in the upper right corner of the Sprite Editor to save the modifications to the resources.
Set the Sprite component to use Sliced mode
After preparing the resources for Jiugongge segmentation, you can modify the display mode of the Sprite and size create UI elements with arbitrarily specified sizes through modifications.
- First select the Sprite node in the scene and set the Sprite's
Typeproperties toSliced. - Then drag the control point with the rectangular transformation tool to make the node's
sizeattributes larger. You can also modify properties by entering values directly into the Property Inspectorsize. If the image resources are produced in the form of a nine-square grid, no matter how the Sprite is enlarged, there will be no blur or deformation.
Precautions
When using the rectangular transformation tool or directly modifying size the properties of the Sliced Sprite, note size that the property value cannot be a negative number, otherwise it cannot be displayed normally in Sliced mode.