Game UI in Unity · Reference
Nine-slice cheat sheet
The import settings, Sprite Editor borders and Image settings that make one pixel-art panel work at any size.
Compressed from Lesson 1.
Every number comes from assets/build-examples.py.
The rule
A panel slices cleanly only where its rows and columns repeat. The border on each side is the number of rows or columns outside the band of pixel-identical rows and columns through the centre. Corners keep their size; edges stretch along one axis; the centre stretches along both. Anything drawn inside a stretched band smears.
Import settings for a pixel-art panel
| Field | Value | Why |
|---|---|---|
| Texture Type | Sprite (2D and UI) | Image needs a Sprite, not a Texture |
| Sprite Mode | Single | one panel per file |
| Pixels Per Unit | leave at 100, the same as the Canvas Scaler’s Reference Pixels Per Unit | one sprite pixel = one UI unit |
| Mesh Type | Full Rect | slicing “might not work correctly” with Tight |
| Filter Mode | Point (no filter) | bilinear blurs a one-pixel bevel |
| Compression (Default tab) | None | block compression smears flat colour |
| Generate Mipmap | off | UI is never minified enough to need them |
Sprite Editor
- Select the sprite, click Sprite Editor in the Inspector.
- Type L, R, T, B in pixels, or drag the green lines inward.
- Apply.
Image component
| Field | Value |
|---|---|
| Source Image | the sliced sprite |
| Image Type | Sliced (stretch edges) or Tiled (repeat edges) |
| Fill Center | on for a panel; off for a frame |
| Pixels Per Unit Multiplier | 1; raise it to make the drawn border thinner without re-importing |
Resize with the Rect Tool (T), never with Scale. Width and height change; the border stays the same number of pixels.
Measured borders, Kenney Pixel UI Pack
| Panel family | Files | L | R | T | B | Note |
|---|---|---|---|---|---|---|
| colored (plain) | 5 | 3 | 3 | 3 | 5 | bottom shadow |
| colored (pressed) | 5 | 2 | 2 | 2 | 2 | no shadow |
| outline (plain) | 4 | 3 | 3 | 3 | 5 | bottom shadow |
| outline (pressed) | 4 | 3 | 3 | 3 | 3 | |
| ancient (riveted) | 12 | 3 | 3 | 3 | 5 | for Tiled only: one past the 2 2 2 4 frame; stretch-safe band for Sliced is only 14×1 px |
30 panels in total; 9 have the same border on all four sides; 18 are flat enough that the visible frame is the stretch-safe border.
When it goes wrong
| Symptom | Cause | Fix |
|---|---|---|
| Blurry edges | Filter Mode Bilinear, or Compression on | Point, None |
| Corners squashed | Image Type is Simple | Sliced |
| Bottom edge smeared, others fine | border assumed symmetric | measure B separately |
| Rivets or studs become dashes | decoration inside a stretched band | Tiled, border past the decoration |
| Panel cannot shrink | L+R or T+B larger than the panel | smaller borders |
| Slicing ignored entirely | Mesh Type Tight | Full Rect, reimport |