Category: UX & UI

Improved: Divider Styling with Custom Material

Side-by-side comparison of two UI dividers in Unreal Engine. The top one uses a UMG border and looks pixelated. The bottom one is using a custom material-based divider with improved styling.

Replaced UMG borders with a custom material to enhance visual quality, styling, and flexibility for slim UI dividers. Unreal Engine’s default borders often appeared pixelated when used with narrow elements. The new material resolves this issue and supports real-time control over sharpness, color gradients, and dynamic adjustments during play.

Synchronized Hover States for Labels

GIF showing mouse cursor hovering over list buttons in the AVE II, with matching POI labels in the 3D scene reacting simultaneously to reflect the hover state.

Two-way communication between UI list items and POI labels. When a button is hovered in the list, the corresponding POI label reflects the hover state, and vice versa. The Game Instance acts as a centralized mediator for synchronized visual feedback.

Expandable POI Labels on Hover

Mouse cursor hovering over a POI label in AVE II, with the label expanded to reveal the full name.

Hover-based label behavior for POIs. When the user hovers over a screen space label or POI geometry, the label expands to reveal the full name, improving readability without cluttering the scene.

Optimized POI Label Opacity and Rotation

Replaced the constant per-frame (Tick) distance and opacity calculations from the original ArchViz Explorer with an optimized hybrid approach: Timer-based distance checks: The distance to the camera is now updated at fixed intervals (e.g., every 0.5 seconds) to reduce unnecessary calculations. Smooth interpolation: Opacity transitions are handled by a lightweight Tick function using interpolation, ensuring […]

Block Input Propagation on UI Elements

Prevents unintended camera movement or interactions when the user starts a touch or mouse drag on a UI element (like a panel or border). Blocks input from reaching the PlayerController by using overrides (OnMouseButtonDown / OnTouchStarted). This ensures the Input system doesn’t respond when the user is interacting with the interface.

Two-Handle Range Slider

Screenshot of custom dual-handle slider widgets used for filtering units in AVE II for the Unreal Engine

Custom dual-handle range slider for defining both lower and upper bounds. This widget features snapping logic that utilizes normalized values for precise filtering. Replaces Unreal Engine’s default single-handle slider, which only supports an upper limit.