Skip to content

Menu roles and editable arrival motion ​

The original Outpost and Emberwatch menus use the same public IFButton and IFScreen features. Their trees, colors and animation are independently authored; Game Master's visual design is not included.

Give actions a clear hierarchy ​

Select an IFButton in the Widget Designer and set InterfaceForge → Button → Button Role, or call Set Button Role on an existing button.

RoleDefault presentationSample use
StandardTheme surface, normal outline; accent on hover/navigation focusSettings and Field journal
PrimaryAccent-tinted surface and accent outline, strengthened on emphasisBegin and Resume
QuietTransparent background/outline at rest; normal accent emphasis on focus/hoverMain-menu Quit
DestructiveDanger-colored label and Danger emphasisReturn to main menu, after confirmation

Roles style an action; they do not execute it, change its validation or add confirmation. Bind On Button Clicked to your public action/dialog graph as usual. Set Availability and the widget's Enabled state retain disabled presentation. Standard is the default, preserving existing buttons. Theme Accent, Danger, Surface, Outline, Text, Muted Text, padding and corner radius remain the shared defaults. A button's Theme Override can replace them locally.

For a custom button tree, implement On Appearance Updated to paint your own focus/hover/availability presentation. Read Button Role there if your design distinguishes these actions. The native role treatment styles the existing named FocusBorder and LabelWidget; it does not automatically recolor arbitrary child artwork. Always preserve a visible focus cue for Quiet actions. Dynamic label/model updates do not replace the button or its focus target.

Content-fit the pause card ​

In WBP_AshenPause, MenuSurface sits inside a normal Size Box. Height Override is cleared; Max Desired Height = 420. The card uses its desired content height at the normal scale, while the existing responsive parent and bounded action region handle larger type. This releases unused vertical space without shrinking text or removing any of the four actions. This is an editable example layout, not a required plugin container or a guarantee that arbitrary translated text will fit.

Author the arrival in Blueprint ​

Open either WBP_AshenMainMenu or WBP_AshenPause, select MenuArrive in the Animations panel. Its ordinary UMG timeline animates MenuSurface → Render Opacity from 0.82 at 0 seconds to 1 at 0.20 seconds. It changes readability gently without delaying input, async loading or Back. The background/scrim remains separate.

The saved graphs use these actual nodes:

flowchart TD
    A[Event On Activated] --> S[Sequence: existing activation behavior]
    S --> R[Stop Animation: MenuArrive]
    R --> O[Set Render Opacity: MenuSurface = 1]
    O --> B[Branch: ReduceMenuMotion]
    B -->|False| P[Play Animation: MenuArrive, one loop, Restore State true]
    D[Event On Deactivated] --> C[Stop Animation → Set Render Opacity = 1]
    U[Event On Preferences Updated] --> F[Break IFUIPreferences → Set ReduceMenuMotion]
    F --> T[Branch: Reduced Motion]
    T -->|True| C

Keep existing activation/deactivation behavior in the Sequence when adding decorative motion. Stop/reset the owned timeline on deactivation and when Reduced Motion becomes true. Disabling Reduced Motion on an already open menu does not replay its arrival. On Preferences Updated supplies the current preference on construction and live changes; no per-widget settings polling is needed.

Duplicate the screen, edit its timeline or replace MenuSurface, then supply the class to Push Screen or Push Screen Async. Use normal CommonUI stack pushes/removals for navigation. Directly deactivating the active stack widget removes that screen; it is not an animation restart operation. See custom animation recipe and menu data recipe for data and lifecycle details.

Expected: the menu arrives fully readable, Begin/Resume is distinct, Quiet Quit still reveals keyboard/controller focus, destructive Return remains guarded by confirmation, and changing Reduced Motion during arrival restores opacity to 1. Runtime scope and remaining device/presentation gates are recorded in menu hierarchy evidence.

UIForge v0.1.0 · Blueprint and C++ development documentation.

Enlarged documentation image

Enlarged documentation image