Files
2026-04-20 07:36:23 +02:00

1.9 KiB
Raw Permalink Blame History

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:

  • Normalbutton_*_normal.png (same margin 0.3333)
  • Hoveredbutton_*_hover.png
  • Pressedbutton_*_pressed.png

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