Add ui elements

UI/unreal_9slice/README.md

@@ -0,0 +1,38 @@
+# 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.