Viewport Controls
Top right: Display options and grid snapping controls for precise positioning and alignment
Umg System Overview
UMG System Overview
Section titled “UMG System Overview”Unreal Motion Graphics (UMG) Introduction
Section titled “Unreal Motion Graphics (UMG) Introduction”Unreal Motion Graphics (UMG) is Unreal Engine’s user interface system. This module covers the basic components used to create many different types of user interface designs. These components are the core to creating functional user interface.
We will also review ways to prototype designs before implementation with the purpose to solve problems before they occur. This design phase helps thoughtfully think through designs, construction, and implementation for future interface work.
Creating Unreal Engine Widgets
Section titled “Creating Unreal Engine Widgets”Widget Creation Process
Section titled “Widget Creation Process”To create a widget:
- Right-click the Content Browser
- Scroll down to User Interface category
- Choose Widget Blueprint
- Click the User Widget button
Widget Interface Layout
Section titled “Widget Interface Layout”When opening a widget, you’ll be placed on the Designer tab with several key areas:
Widget Palette
Top left: All standard user interface components listed under categories, plus custom widgets you create
Details Panel
Right side: Options for alignment, style, color, and many other component-specific settings
Adding and Configuring Widgets
Section titled “Adding and Configuring Widgets”- Add widgets: Drag and drop components from the palette onto the designer graph
- Component events: Scroll to bottom of details panel to find events for each UI component
- Event creation: Click the plus sign to create events on the event graph where you write code
Key Widget Events
Section titled “Key Widget Events”Pre-construct Event:
- Allows you to alter the UI in the editor through public variables
- Very helpful with modular design and creating tools
- Example: Create a boolean and click “Instance Editable” - when using this widget, you can check it on/off to show or hide text or images
Event Construct:
- Activated the moment this particular widget is created during gameplay
- Used for initialization that happens at runtime
Event Tick:
- Self-explanatory - activates every tick
- Use sparingly for performance reasons
Widget Programming Features
Section titled “Widget Programming Features”Like any other blueprint, widgets support:
- Variables: Store data specific to the widget
- Functions: Create reusable code blocks
- Overrides: More advanced functionality for inheritance
- Interfaces: Add through Class Settings for communication between blueprints
This covers the fundamental basics of Unreal Engine widgets and the UMG system structure.