Menu Texture Starter Pack

Generated source PNGs live in:

ProjectPrivate/UI/MenuTextureSources/

These are deterministic UI textures for the minimal System Link menu direction: tintable white masks, cyan/amber example outlines, transparent frames, divider lines, corner brackets, and a light scanline overlay.

For how the UMG Draw As: Box margins work, see Docs/NineSliceUIBrushes.md.

#Assets

• T_SL_Menu_Button_Frame_Cyan.png - normal button outline.

• T_SL_Menu_Button_Frame_Selected.png - focused/selected button outline with amber accent.

• T_SL_Menu_Button_Chamfer_Cyan.png - normal chamfered button outline.

• T_SL_Menu_Button_Chamfer_Selected.png - focused/selected chamfered button outline.

• T_SL_Menu_Button_ConceptFrame_Cyan.png - minimal concept-style button outline with inner rails.

• T_SL_Menu_Button_ConceptFrame_Selected.png - concept-style selected outline with a left focus bracket.

• T_SL_Menu_Button_AsymChamfer_Cyan.png - concept-style asymmetric button with only upper-right and

bottom-left chamfers.

• T_SL_Menu_Button_AsymChamfer_Selected.png - selected asymmetric button with a left focus bracket.

• T_SL_Menu_Button_AsymDoubleRail_Cyan.png - asymmetric button with double top/bottom HUD rails.

• T_SL_Menu_Button_Notched_Cyan.png - button with a stepped top-right notch and bottom-left chamfer.

• T_SL_Menu_Button_SplitRail_Cyan.png - asymmetric button with interrupted interior rails.

• T_SL_Menu_Panel_Frame_Cyan.png - large panel outline/fill.

• T_SL_Menu_Panel_Chamfer_Cyan.png - large chamfered panel outline/fill.

• T_SL_Menu_ActionBar_Frame.png - bottom prompt/action bar outline.

• T_SL_Menu_Divider_Cyan.png - cyan separator line.

• T_SL_Menu_Divider_Amber.png - amber separator line.

• T_SL_Menu_Corner_Cyan.png - standalone cyan corner bracket.

• T_SL_Menu_Corner_Amber.png - standalone amber corner bracket.

• T_SL_Menu_ChamferCorner_Cyan.png - standalone cyan chamfer corner.

• T_SL_Menu_ChamferCorner_Amber.png - standalone amber chamfer corner.

• T_SL_Menu_Scanline_Overlay.png - subtle fullscreen scanline overlay.

Preferred tintable masks:

• T_SL_Menu_Button_Frame_White.png

• T_SL_Menu_Button_Frame_Selected_White.png

• T_SL_Menu_Button_Chamfer_White.png

• T_SL_Menu_Button_Chamfer_Selected_White.png

• T_SL_Menu_Button_ConceptFrame_White.png

• T_SL_Menu_Button_ConceptFrame_Selected_White.png

• T_SL_Menu_Button_AsymChamfer_White.png

• T_SL_Menu_Button_AsymChamfer_Selected_White.png

• T_SL_Menu_Button_AsymDoubleRail_White.png

• T_SL_Menu_Button_AsymDoubleRail_Selected_White.png

• T_SL_Menu_Button_Notched_White.png

• T_SL_Menu_Button_Notched_Selected_White.png

• T_SL_Menu_Button_SplitRail_White.png

• T_SL_Menu_Button_SplitRail_Selected_White.png

• T_SL_Menu_Panel_Frame_White.png

• T_SL_Menu_Panel_Chamfer_White.png

• T_SL_Menu_ActionBar_Frame_White.png

• T_SL_Menu_Divider_White.png

• T_SL_Menu_Corner_White.png

• T_SL_Menu_ChamferCorner_White.png

• T_SL_Menu_Scanline_Overlay_White.png

Modal/dialog frames:

• T_SL_Menu_Modal_Command_White.png - balanced command/dialog panel.

• T_SL_Menu_Modal_Asym_White.png - asymmetric dialog panel matching the button language.

• T_SL_Menu_Modal_Alert_White.png - dialog panel with heavier left alert bracket.

Cyan preview variants are also generated for those three modal frames.

Use the white versions for production widgets and set the actual color from the UMG brush tint, CommonUI button style states, or material parameter. The cyan/amber versions are examples/reference.

#UMG Brush Setup

For button and panel frames:

1. Import the PNGs into /Game/SystemLink/UI/Menus/Textures.

1. In the texture asset, use the UI/no-mip settings below.

1. In UMG, use the texture as an Image or Border brush.

1. Set Draw As to Box for scalable frames.

1. Suggested margins:
• Button frame: left/right 0.05, top/bottom 0.18.
• Chamfer button frame: left/right 0.07, top/bottom 0.22.
• Concept button frame: left/right 0.045, top/bottom 0.18.
• Asymmetric chamfer button frame: left/right 0.055, top/bottom 0.22.
• Asymmetric double-rail button frame: left/right 0.055, top/bottom 0.22.
• Notched button frame: left/right 0.11, top/bottom 0.22.
• Split-rail button frame: left/right 0.055, top/bottom 0.20.
• Panel frame: 0.05 on all sides.
• Chamfer panel frame: 0.07 on all sides.
• Modal frames: 0.08 on all sides.
• Action bar frame: left/right 0.03, top/bottom 0.20.

Chamfer corners can be used two ways:

1. Use T_SL_Menu_Button_Chamfer_White / T_SL_Menu_Panel_Chamfer_White as a full 9-sliced brush.

1. Place T_SL_Menu_ChamferCorner_White as a separate Image in one corner, then mirror/rotate it for

the other corners when you want a more custom panel silhouette.

For the minimal pause/main-menu concept, prefer T_SL_Menu_Button_AsymChamfer_White. It matches the asymmetric button language more closely than the older all-corners chamfer frame: only the upper-right and bottom-left corners are cut.

For the scanline overlay:

1. Add it as a fullscreen Image over the darkened gameplay background.

1. Set opacity around 0.08 to 0.16.

1. Keep it non-hit-testable.

#Icon Texture Settings

Use these settings for menu icon alpha textures, especially packed masks where different icons live in different RGBA channels:

Setting	Value
Compression Settings	UserInterface2D (RGBA) / TC_EDITOR_ICON
sRGB	Off
Mip Gen Settings	NoMipmaps
Filter	Bilinear

Avoid Masks / TC_MASKS for packed UI icon textures. It is fine for some simple masks, but it can create visible blocky edge artifacts when sampling individual channels for UMG icons. UserInterface2D (RGBA) keeps the channels cleaner for button icons and alpha masks.

For material-driven icons:

• Keep the source art as clean white-on-transparent or channel-packed masks.

• Use the material's channel picker (0 = Alpha, 1 = Red, 2 = Green, 3 = Blue, 4 = RGB luminance).

• If edges still look slightly dirty, raise IconEdgeThreshold a little, for example 0.52 to 0.58.

• Use IconEdgeSoftness to tune antialiasing/feather after the channel is sampled.

#Regenerating

Run:

powershell -ExecutionPolicy Bypass -File Tools\generate_menu_ui_textures.ps1

The generator is intentionally simple so colors, stroke width, and corner lengths can be tuned quickly.