Umg Components And Panels

UMG Components and Panels

Common UMG Components

The common UMG components are the most frequently used elements in UI design:

Basic Interactive Elements

Button

Standard clickable element for user interactions and navigation

Checkbox

Toggle control for boolean options and settings

Image

Display textures, icons, and visual elements

Border

Wrap widgets with decorative images or backgrounds

Advanced Display Components

• Name Slot: Used in modular workflows to create flexible widget containers
• Progress Bar: Frequently used for health, mana, stamina, or experience displays
• Rich Text Block: Provides advanced features to stylize text with multiple formatting options
• Slider: Most commonly used for game options menus or selecting values in inventory systems

All components can be fully customized with your own images and texture files. Each component provides various options for:

• Color and style customization
• Position and alignment settings
• Programming events (clicking buttons, checking checkboxes, slider updates)

Event Programming

To create events for components:

1. Select the component
2. Scroll down to bottom of details panel
3. Find available events section
4. Click the plus sign to create the event on the graph

Special Component Notes

Border Component: By default, you can’t parent widgets to other elements. Border allows you to parent widgets to an image, creating more complex layouts.

Name Slot: Creates modular workflow where you can insert any widget into the slot, making templates more flexible.

Progress Bar Customization: While standard progress bars are thin horizontal or vertical bars, through custom images and texture files, you can create any visual style (globes, orbs, custom shapes).

Rich Text Block Setup: Requires additional configuration:

• Will show “undefined font” when first added
• Requires a Data Table with Rich Text Style Row struct
• Allows multiple text styles within single text block

Input Components

Input components allow players to provide information to the game:

Dropdown and Selection

• Combo Box (Key): Generates other widgets for dropdown options
• Combo Box (String): Text-based dropdown options only
• Spin Box: Lets players choose numerical values, similar to slider but in box form

Text Input Systems

• Editable Text: Basic single-line text input for chat systems, usernames, or password fields
  • Has simple checkbox to obscure text, making it suitable for passwords
• Multiline Text: Allows users to hit Enter and go to new lines
• Text Box: Effectively same as Editable Text with different background styling applied

Text Input Features

Hint Text: Slightly transparent placeholder text that tells players what the field is for - improves usability by providing context.

Password Mode: IsPassword checkbox declares if text will be obscured or not, essential for secure input fields.

Programming Input Events

For ComboBox Key: Use “On Generate Content Widget” binding to create widgets dynamically for dropdown content.

ComboBox String: Typically uses simple text-based options with straightforward setup.

Spin Box Controls: Has settings for minimum and maximum values with increment controls.

All input components have standard position, color, and style options available in their details panels.

Panel Components

Panel components are the foundation that hold all UI content in various organizational patterns:

Basic Layout Panels

Canvas Panel:

• Standard blank board for free-form positioning
• Default panel when creating new widgets
• Allows precise pixel positioning

Grid Panels:

• Grid Panel: Automatically sizes objects in grid formation, supports weighted entries for spanning multiple cells
• Uniform Grid Panel: Locks each object to identical sizes in grid formation

Linear Layout Panels

• Horizontal Box: Evenly places components in a row
• Vertical Box: Evenly places components in a column
• Stack Box: Can dynamically swap between horizontal and vertical orientation
• Wrap Box: Automatically adjusts component layout based on available space

Specialized Panels

Overlay: Easily align objects on top of each other with layering control.

Scale Box: Maintains aspect ratio regardless of size changes - keeps proportions consistent.

Scroll Box: Enables scrolling when content exceeds container size. Can be set to horizontal or vertical scrolling.

Size Box: Allows precise size control with override options for width and height constraints.

Widget Switcher: Creates tab-based system where each tab is a separate canvas panel with its own index:

• First canvas panel = index 0
• Second canvas panel = index 1, etc.
• Requires code to swap between tabs (typically done through buttons)
• Use Set Active Widget Index to change active tab

Panel Navigation and Control

For Horizontal/Vertical/Stack Boxes: Use arrow controls in the details panel to easily adjust object positioning within the container.

Widget Switcher Programming: By default, you cannot change pages without code. Create buttons that use Set Active Widget Index with appropriate values to enable tab switching.

These panel components provide the structural foundation for organizing and presenting your UI elements in logical, user-friendly arrangements.