Widget Blueprints
Widget Blueprints are UE’s UI system (UMG). BlueprintAI supports creating widget assets, adding and configuring widget components, setting properties, and wiring events.
Creating a Widget Blueprint
Section titled “Creating a Widget Blueprint”Create a Widget Blueprint called WBP_HUD in /Game/UI
Adding widgets
Section titled “Adding widgets”Add a CanvasPanel as the root of WBP_HUD Add a TextBlock called HealthText inside the CanvasPanel Add a ProgressBar called HealthBar below HealthText
Common widget types: CanvasPanel, VerticalBox, HorizontalBox, Overlay, TextBlock, Button, Image, ProgressBar, Slider, CheckBox, EditableText, ScrollBox, Border, SizeBox, UniformGridPanel.
Setting properties
Section titled “Setting properties”Set the text on HealthText to “Health: 100” Set the fill color on HealthBar to red Set the font size on HealthText to 24 Set the padding on HealthBar to 8 on all sides
Layout and anchors
Section titled “Layout and anchors”Anchor HealthText to the top-left with a position of (20, 20) Set the size of HealthBar to (200, 20) with auto-size disabled
Binding properties
Section titled “Binding properties”Bind the percent property of HealthBar to a function called GetHealthPercent Bind the text of HealthText to a function called GetHealthText
Bindings connect widget properties to Blueprint functions that return the value each frame.
Events
Section titled “Events”On the OnClicked event of a Button called PlayButton, open level “MainMenu” Wire the OnValueChanged event of a Slider to a function called OnMusicVolumeChanged
Variables and widget references
Section titled “Variables and widget references”Add a variable of type BP_PlayerState (object reference) called PlayerState to WBP_HUD
Widget Blueprint variables work the same as regular Blueprint variables and can hold references to other actors, components, or data objects.
import { Aside } from ‘@astrojs/starlight/components’;