How do I set an element to be visible but non-interactive?

You should use the HitTestInvisible (value 3) or SelfHitTestInvisible (value 4) enum values to allow an element to be seen while preventing it from blocking mouse clicks or touch events.

Which ReactUMG slot types are compatible with these enums?

These values apply to most standard ReactUMG slots including OverlaySlot, VerticalBoxSlot, HorizontalBoxSlot, BorderSlot, ButtonSlot, and GridSlot.

Why is the Center value 2 instead of 1 in ReactUMG?

In Unreal Engine's underlying Slate system, index 1 typically represents Left or Top alignment, while index 2 is the standardized value for Center. This skill helps developers remember this non-intuitive mapping.

What is the difference between Collapsed and Hidden visibility?

Collapsed (value 1) removes the element from the layout entirely so it occupies no space. Hidden (value 2) makes the element invisible but preserves the space it takes up in the UI flow.

ReactUMG Alignment Enums

Name: ReactUMG Alignment Enums
Author: 15195999826

by15195999826

Game Development

Provides quick reference and validation for Unreal Engine ReactUMG layout alignment and visibility enum values.

About

This skill assists developers working with ReactUMG in Unreal Engine by providing accurate enum values for horizontal alignment, vertical alignment, and Slate visibility. It specifically addresses common pitfalls, such as the confusion between index 1 and index 2 for centering, ensuring that UI components like Border, Overlay, and Box slots are positioned correctly without manual trial and error. By using this skill, developers can avoid common layout bugs and speed up the creation of game interfaces.

Key Features

Support for various slot types including Overlay, VerticalBox, and Grid
Correction of common 'Center=1' logic errors in UI development
0 GitHub stars
Visibility state reference for Visible, Collapsed, and Hidden modes
TypeScript code snippets for immediate implementation
Quick lookup for EHorizontalAlignment and EVerticalAlignment values

Use Cases

Centering UI elements within an Unreal Engine HUD using ReactUMG
Managing UI performance by correctly toggling Collapsed vs Hidden states
Configuring complex grid and box layouts for game menus

About

Key Features

Support for various slot types including Overlay, VerticalBox, and Grid
Correction of common 'Center=1' logic errors in UI development
0 GitHub stars
Visibility state reference for Visible, Collapsed, and Hidden modes
TypeScript code snippets for immediate implementation
Quick lookup for EHorizontalAlignment and EVerticalAlignment values

Use Cases

Centering UI elements within an Unreal Engine HUD using ReactUMG
Managing UI performance by correctly toggling Collapsed vs Hidden states
Configuring complex grid and box layouts for game menus