How does this skill handle CanvasPanelSlot offsets?

It provides specific mapping rules where Position X/Y and Size X/Y map to Left/Top and Right/Bottom Offsets depending on whether you are using Point Anchors or Range Anchors.

Do I need to learn new property names for standard slots?

No. For 17 out of the 18 slot types, the TypeScript definitions in ReactUMG match the Unreal Engine Blueprint properties exactly; only CanvasPanelSlot requires special mapping.

Which slot types are supported by this skill?

It supports all 18 major UMG slot types, including CanvasPanel, VerticalBox, HorizontalBox, UniformGrid, Overlay, and ScrollBox slots.

Can this skill help with responsive UI design?

Yes, it includes specific implementation patterns for Range Anchors and percentage-based positioning to ensure UI elements scale correctly across different resolutions.

ReactUMG Layout Configurator

Name: ReactUMG Layout Configurator
Author: 15195999826

by15195999826

Game Development

Streamlines UI layout and positioning in Unreal Engine using standardized ReactUMG slot mapping rules.

About

This skill serves as a comprehensive guide for developers working with ReactUMG in Unreal Engine, specifically focusing on the complexities of the Slot layout system. It clarifies the non-intuitive mapping between Unreal Engine's Blueprint properties and TypeScript definitions, particularly for CanvasPanelSlots where 'Position' and 'Size' translate to specific 'Offset' values based on anchor types. By providing patterns for 18 different slot types—including Grid, VerticalBox, and Overlay slots—it ensures developers can implement responsive game interfaces, sidebars, and HUDs with precision and consistency.

Key Features

0 GitHub stars
Direct translation between Blueprint UI settings and TypeScript code
CanvasPanelSlot mapping for Point and Range anchors
Reference patterns for 18 distinct UMG slot types
Pre-configured layouts for sidebars, toolbars, and dialogs
Guidance on LayoutData, ZOrder, and AutoSize properties

Use Cases

Building responsive game menus that adapt to different screen aspect ratios
Converting existing UMG Blueprints into ReactUMG TypeScript components
Implementing complex grid-based inventory systems or HUD overlays

About

Key Features

0 GitHub stars
Direct translation between Blueprint UI settings and TypeScript code
CanvasPanelSlot mapping for Point and Range anchors
Reference patterns for 18 distinct UMG slot types
Pre-configured layouts for sidebars, toolbars, and dialogs
Guidance on LayoutData, ZOrder, and AutoSize properties

Use Cases

Building responsive game menus that adapt to different screen aspect ratios
Converting existing UMG Blueprints into ReactUMG TypeScript components
Implementing complex grid-based inventory systems or HUD overlays