Rasterloom · UI

Nine-slice UI in Unity: why a panel stretches wrong

A nine-slice sprite is the cheapest way to get panels, buttons and bars of any size from one small texture. It only works if the art follows three rules and four Unity settings are right. Here are both.

What Unity actually does with a sliced sprite

You set four borders on a sprite. They cut it into nine pieces, and when the Image is resized, each piece is treated differently:

• The four corners never scale. They are drawn at their native size whatever the panel size.
• The top and bottom edges scale horizontally only.
• The left and right edges scale vertically only.
• The centre scales in both directions (or is skipped if Fill Center is off).

A common description says the edges are "repeated". With Image Type = Sliced they are not repeated, they are stretched. That is why the rules below matter: anything that cannot survive being stretched along one axis does not belong in an edge.

The three rules for the art

1. Edges must be uniform along their stretch axis. A top edge can change from top to bottom (a bevel, a highlight line, a shadow) but must look the same along its whole width. A rivet, a notch or a gradient that runs left to right in the top edge gets smeared when the panel widens.
2. Everything with a shape lives in the corners. Rounded corners, ornaments, rivets and corner brackets go inside the border area, where nothing scales.
3. The centre must be flat or seamless. A flat fill or a very soft vertical gradient survives any stretch. A texture or a pattern in the centre stretches into mush; if you need one, use Image Type = Tiled instead, which repeats the centre and edges rather than stretching them.

The Unity settings that matter

1. Borders in the Sprite Editor

Select the texture, open Sprite Editor, and drag the green border handles (or type L, T, R, B in pixels). The borders should sit just inside the last pixel that has shape, for example the end of a rounded corner.

2. Image Type = Sliced

On the UI Image component set Image Type to Sliced. If the dropdown warns that the sprite has no border, step 1 was skipped or not applied.

3. Pixels Per Unit Multiplier

Sliced images draw their corners at the sprite's own pixels-per-unit relative to the canvas. If the corners look too thick or too thin, change Pixels Per Unit Multiplier on the Image rather than redrawing the art: 2 makes the corners half as big, 0.5 twice as big. One sprite can then serve small buttons and large windows.

4. Import settings

For crisp UI: Compression None (block compression puts colour artefacts along one-pixel outlines), Generate Mip Maps off (mips are what make UI soft when the canvas scales down), Wrap Mode Clamp, and Mesh Type Full Rect. For pixel art use Point filtering; for smooth UI use Bilinear.

Four mistakes that look like bugs

• Corners look blurry at small sizes. Mip maps are on, or the canvas is scaling the whole UI below 1:1. Turn mips off and check the Canvas Scaler reference resolution.
• A thin line appears between pieces. The sprite is packed in an atlas without padding, or compression bled neighbouring pixels into the border. Add padding and turn compression off.
• The panel can't get smaller than the source. A sliced image smaller than its left plus right border has no room for the corners. Use a smaller border, or a higher Pixels Per Unit Multiplier.
• A bar fills from the wrong side or squashes its ends. Fill amount and slicing are different features. For health bars, slice the background and use a separate filled image, or mask a sliced image with a RectMask2D so the end caps keep their shape.

Ready-made sets

The Rasterloom 9-slice UI kits are built to these rules, with borders already set in Unity, so every panel, button and bar stretches to any size from one small sprite. They are listed on the packs page.