39 lines
1.9 KiB
Markdown
39 lines
1.9 KiB
Markdown
# 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.
|