# Unreal 9-slice pack

Atlas layout (each file): **192 × 192 px**, 3×3 equal tiles of **64 × 64 px**.

## Import into Unreal (UMG)

1. Import the PNG as a Texture2D.
2. Open the Texture and set **Compression Settings = UserInterface2D (RGBA)**, **Mip Gen Settings = NoMipmaps**, **sRGB = true**.
3. Create (or open) a `Slate Brush` / Widget image and set:
   - **Image** = the texture
   - **Draw As** = `Box`
   - **Margin** = **L 0.3333 · R 0.3333 · T 0.3333 · B 0.3333** (exactly 1/3)

The box brush will now stretch the center and tile/stretch edges while keeping corners intact — resize freely.

## Files

| File                              | Radius | Use                                   |
| --------------------------------- | ------ | ------------------------------------- |
| `panel_rounded_big.png`           | 24 px  | Panel background — rounded            |
| `panel_rounded_small.png`         | 12 px  | Panel background — half-rounded       |
| `button_big_normal.png`           | 24 px  | Button — normal state                 |
| `button_big_hover.png`            | 24 px  | Button — hover state                  |
| `button_big_pressed.png`          | 24 px  | Button — pressed state                |
| `button_small_normal.png`         | 12 px  | Half-rounded button — normal          |
| `button_small_hover.png`          | 12 px  | Half-rounded button — hover           |
| `button_small_pressed.png`        | 12 px  | Half-rounded button — pressed         |

`*_guide.png` files are the same assets with dashed cut lines overlaid — **for reference only**, do not ship.

## Button states in UMG

Create a `Button` widget and set its Style:
- **Normal**   → `button_*_normal.png`  (same margin 0.3333)
- **Hovered**  → `button_*_hover.png`
- **Pressed**  → `button_*_pressed.png`

Keep the same margin on all three so the geometry stays consistent.