If your UI elements in Unity start looking stretched when you resize them, you probably ran into one of the most common beginner problems. You make a button, a panel, or a dialogue box, scale it up, and suddenly the corners look wrong.
This happens because Unity normally treats the sprite like a regular image. When you make it wider or taller, the whole thing gets stretched. That is fine for some images, but it looks bad for UI elements with borders, corners, outlines, or pixel art details.
I made a short video showing the problem and the fix. This post is basically the written version of that video, but with more notes about how I would set up simple UI art as a game developer.
What the problem looks like
Here is what happens when the UI element is resized normally. The corners and borders stretch together with the rest of the image, so the whole thing starts to look distorted.
The actual fix is 9-slice
The fix for this is called 9-slice.
9-slice is one of those classic UI tricks that still feels really smart today. Instead of drawing a separate image for every possible button or panel size, you make one small sprite and tell the engine how it is allowed to stretch.
The corners stay untouched, the edges stretch only in one direction, and the middle fills the rest. That means one small button or panel sprite can be reused at many different sizes without destroying the corners.
This is especially useful in game development, because UI needs to adapt constantly. Menus, dialogue boxes, inventory slots, health bars, buttons, mobile layouts, PC layouts, different resolutions. You do not want to redraw everything manually for every size.
Unity explains this in its manual too. The sprite gets divided into nine areas. The corners keep their size, the edges stretch in one direction, and the center fills the remaining space. The official Unity explanation is here: Unity Manual: 9-slicing.
Setting it up in Unity
First, select the sprite you are using for your button or UI panel in the Project window.
In the Inspector, make sure the Texture Type is set to Sprite (2D and UI). Then open the Sprite Editor.
Inside the Sprite Editor, set the borders of the sprite. These borders tell Unity which parts should not be stretched normally. For a button or panel, you usually want the corners and the outline to stay inside the protected border area.
After setting the borders, apply the changes.
Then go back to the UI element in your scene. In the Image component, change the Image Type from Simple to Sliced.
This is the step that is easy to forget. Setting the borders in the Sprite Editor is not enough by itself. The UI Image also has to use the sliced image type.
Now when you resize the element, the corners should stay clean while the middle and edges stretch correctly.
My recommendation for simple UI art
For beginner game UI, I think pixel art is often a really good choice. Not because every game needs to be pixel art, but because pixel UI is easy to control.
With pixel art, you can make a button or panel very small, keep the design readable, and scale it in a predictable way. You do not need huge textures, complex gradients, or detailed art. A simple border, a clean fill area, and readable contrast are usually enough.
For example, you can make a small 16 by 16 pixel panel or button base. Then you protect the corners with 9-slice and let Unity stretch the center. That small sprite can become a small button, a wide button, or a larger panel.
This is the part that makes 9-slice so useful. You do not need to draw ten versions of the same UI box. You draw one good version and let the engine scale it correctly.
Pixel art import settings
If you are using pixel art UI, the import settings matter a lot.
For a 16 by 16 pixel UI sprite, I would usually set Pixels Per Unit to 16. That way, one Unity unit matches 16 pixels. It keeps the setup easy to understand, especially if you are also using 16 by 16 tiles or sprites in your game.
If your UI sprite is 32 by 32, setting Pixels Per Unit to 32 can also make sense. The important thing is consistency. If your game uses 16 pixel art, use 16. If your game uses 32 pixel art, use 32.
For UI size, I would not make the original sprite huge. Something like 16 by 16, 24 by 24, or 32 by 32 can already be enough for simple pixel UI, because 9-slice handles the scaling. The exact size depends on how detailed your corners and borders need to be.
For a very basic button, 16 by 16 can work. For a nicer panel with more corner detail, 32 by 32 or 64 by 64 gives you more room. I would only go larger if the UI art actually needs the detail.
The main thing is that the corner area needs enough pixels to look good. If the corners are only one or two pixels, the UI can look too simple. If the corners are too large, the button may need a minimum size before it looks right.
If your pixel art looks blurry
There is another common issue that can look similar at first. If your UI is pixel art and it looks blurry, the problem might not be 9-slice. It might be the import settings.
For pixel art, set the Filter Mode to Point (no filter). Unity’s manual describes Point filtering as the option that keeps textures blocky up close, while Bilinear and Trilinear smooth the texture. You can read the official texture import settings here: Unity Manual: Texture import settings.
I would also set Compression to None for pixel art UI. Pixel art does not need texture compression in the same way large realistic textures might. Compression can create artifacts, blurry edges, or strange color shifts. For small UI sprites, saving a tiny bit of memory is usually not worth making the interface look worse.
So if the UI shape is stretching wrong, use 9-slice. If the pixel art looks blurry, check the import settings. For pixel art UI, my default would be Filter Mode set to Point (no filter), Compression set to None, and Pixels Per Unit set consistently with the pixel size of the artwork.
Recommended beginner setup
For a simple pixel art UI setup, this is what I would personally start with:
Use small UI sprites, for example 16 by 16, 32 by 32, or 64 by 64 pixels. Set the Texture Type to Sprite (2D and UI). Use Point (no filter), Compression None, and keep Pixels Per Unit consistent with your art style.
If the artwork is based on 16 pixel tiles or 16 pixel sprites, use 16 Pixels Per Unit. If the artwork is based on 32 pixel sprites, use 32 Pixels Per Unit. For UI, consistency is more important than finding one perfect universal number.
Then use 9-slice for anything that needs to resize, like buttons, dialogue boxes, tooltips, inventory panels, shop windows, or menu backgrounds.
Final thoughts
For normal stretched UI elements, 9-slice is usually the fix. Set the borders in the Sprite Editor, apply the changes, and then set the Image Type to Sliced.
For pixel art UI, also check the import settings. A pixel art sprite can have correct 9-slice borders and still look bad if Unity is filtering or compressing the texture.
This is one of those small game dev techniques that is worth learning early. It saves time, keeps your UI clean, and lets you reuse simple art in a smart way.
No comments:
Post a Comment