Using 9-Sliced Images in Unity UI
Basics of 9 slicing in Unity
If you are a game developer or a designer working with Unity, you might have encountered situations where you need to display images with dynamic sizes or aspect ratios, such as UI panels, backgrounds, or buttons. Stretching or scaling the image might result in blurry or distorted visuals, which can negatively impact the overall look and feel of your game.
That’s where 9 sliced images come in handy. 9 sliced images are a technique for dividing an image into 9 sections and then stretching only the middle sections while keeping the corners and edges intact. This allows the image to retain its visual quality while adapting to different sizes and aspect ratios.
In addition to improving visual quality, using 9 sliced images in Unity also has memory and disk space advantages. Since only the middle sections of the image are stretched, the overall size of the image is smaller compared to scaling or stretching the entire image. This means that the game will use less memory and require less disk space, which is especially important for mobile or low-end devices with limited resources. Additionally, using 9 sliced images can also improve the performance of your game by reducing the amount of texture filtering and sampling required. Overall, using 9 sliced images is a smart and efficient way to enhance the visual quality of your game while optimizing memory usage and disk space.
How to use 9 slices images
To use a 9 sliced image simply prepare a sprite where corners will stay the same size, edges and middle will stretch. Then on Unity inspector set Mesh Type to “Full Rect” and open “Sprite Editor”.
On the Sprite Editor windows set the borders to reveal corners and edges that will be stretched.
Finally, simply add this sprite to an Image on a UI canvas and set its image type to “Sliced”. Whatever you set the image width and height, the image will change its size without blurring or deforming.
Using these settings results in below image where a 250x400 px image is generated using 82x180 px saving memory and disk space usage and providing flexibility to use different sized images on different parts of UI.
