UMG Widgets & HUD Design

ClaudusBridge provides 41 tools for complete UMG widget workflow — from creating Widget Blueprints to designing HUD layouts with anchors, styles, and runtime display.

---

Complete Widget Workflow

1. create_widget_blueprint     -> New WBP with CanvasPanel root
2. add_widget / add_text_block -> Add widgets to the tree
3. set_widget_anchor           -> Position with anchor presets
4. set_widget_layout           -> Set position, size, alignment
5. set_widget_style            -> Color, font, opacity
6. capture_editor_window       -> Visually verify in Designer
7. compile_widget_blueprint    -> Compile
8. start_pie + add_to_viewport -> Test in runtime

---

Available Widget Types

Use list_palette_widgets to see all 33 types:

Category	Widgets
Common	TextBlock, Button, Image, CheckBox, ProgressBar, Slider, EditableTextBox, MultiLineEditableTextBox, ComboBoxString, SpinBox, RichTextBlock
Panel	CanvasPanel, HorizontalBox, VerticalBox, Overlay, GridPanel, UniformGridPanel, WrapBox, ScrollBox, WidgetSwitcher
Container	SizeBox, Border, ScaleBox, BackgroundBlur, InvalidationBox, RetainerBox, ExpandableArea
Visual	Spacer, Throbber, CircularThrobber
List	ListView, TileView, TreeView

---

Anchor Presets

Use set_widget_anchor with 14 presets:

Preset	Position
top_left	Top-left corner
top_center	Top center
top_right	Top-right corner
center_left	Middle left
center	Dead center
center_right	Middle right
bottom_left	Bottom-left corner
bottom_center	Bottom center
bottom_right	Bottom-right corner
stretch_top	Full width, top
stretch_bottom	Full width, bottom
stretch_left	Full height, left
stretch_right	Full height, right
fill	Fill entire canvas

Or set custom anchors with min_x, min_y, max_x, max_y (0.0 to 1.0).

---

Building a Game HUD

Step 1: Create the Widget Blueprint

curl -X POST http://localhost:3000/mcp \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{
    "name":"create_widget_blueprint","arguments":{"name":"WBP_GameHUD","path":"/Game/UI"}}}'

Step 2: Add Health Bar

# Add ProgressBar
add_widget(path="/Game/UI/WBP_GameHUD", parent="RootCanvas", widget_class="ProgressBar", widget_name="HealthBar")

# Anchor to top-left
set_widget_anchor(path="...", widget="HealthBar", preset="top_left")

# Position and size
set_widget_layout(path="...", widget="HealthBar", pos_x=80, pos_y=20, size_x=250, size_y=25)

# Green color, 75% fill
set_widget_style(path="...", widget="HealthBar", percent=0.75, color=[0.1, 0.85, 0.1, 1])

Step 3: Add Label

add_text_block_to_widget(widget_path="...", parent="RootCanvas", name="HPLabel", text="HP", font_size=20, color={r:1, g:0.2, b:0.2, a:1})
set_widget_anchor(path="...", widget="HPLabel", preset="top_left")
set_widget_layout(path="...", widget="HPLabel", pos_x=20, pos_y=15, size_x=55, size_y=35)

Step 4: Capture and Verify

# Capture the Widget Designer window
capture_editor_window(mode="by_title", title="WBP_GameHUD")

Always visually verify after each widget addition.

---

Widget Reflector

Use get_widget_reflector for full debug information about every widget in the tree:

curl -X POST http://localhost:3000/mcp \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{
    "name":"get_widget_reflector","arguments":{"path":"/Game/UI/WBP_GameHUD"}}}'

Returns for each widget:

• Name, class, is_variable
• Visibility, is_enabled, render_opacity
• Slot: position (pos_x, pos_y), size (size_x, size_y), alignment
• Anchors: min_x, min_y, max_x, max_y
• Parent name, child count
• Type-specific: text content, percent value

---

Runtime Testing

# Compile first
compile_widget_blueprint(widget_path="/Game/UI/WBP_GameHUD")

# Start PIE
start_pie()

# Add widget to viewport
add_widget_to_viewport(widget_path="/Game/UI/WBP_GameHUD")

# Capture to see the HUD in-game
capture_editor_window(mode="active")

---

Widget Events

List available events

get_widget_events(widget_path="/Game/UI/WBP_GameHUD", widget_name="VolumeSlider")
# Returns: OnValueChanged, OnMouseCaptureBegin, OnMouseCaptureEnd, etc.

Bind an event

bind_widget_event(widget_path="/Game/UI/WBP_GameHUD", widget_name="VolumeSlider", event_name="OnValueChanged")

---

Widget Animations

Create animated transitions for your UI:

# Create animation
create_widget_animation(path="...", name="FadeIn", duration=0.5)

# Add opacity track
add_animation_track(path="...", animation="FadeIn", widget="HealthBar", property="RenderOpacity",
    keyframes=[{time:0, value:0}, {time:0.5, value:1}])