🎨 Creating Widgets

Widget Styling and Appearance

Every widget has appearance properties that control how it looks. Understanding these properties lets you transform default widgets into polished, game-ready UI elements that match your art style.

Color and Opacity

Most widgets have color properties that accept both color and alpha (transparency):

Color and Opacity: A single property combining RGB color with alpha. Found on Text, Image, Progress Bar fill, and more. Alpha of 1.0 is fully opaque; 0.0 is fully transparent.

Tint: Multiplies the widget's color. Useful for colorizing images or creating hover effects without changing the base asset.

Background Color: Available on some widgets like Border. Sets the background behind content.

Colors in UMG use Linear Color (not sRGB), which means values can exceed 1.0 for HDR/bloom effects.

Figure: Different color and opacity configurations.

Fonts and Text Styling

Text widgets have extensive styling options:

Font Family: The typeface used. UE5 includes Roboto by default. You can import custom fonts (.ttf, .otf) and create Font assets.

Font Size: Size in points. Larger sizes are crisper; very small sizes may become unreadable.

Font Style: Regular, Bold, Italic, etc. Depends on what styles your font file includes.

Letter Spacing: Space between characters. Positive values spread letters apart.

Line Height: Space between lines of multi-line text.

Justification: Left, Center, Right alignment.

Text Shadow: Adds a shadow behind text for better readability against complex backgrounds.

Importing Custom Fonts

1. Drag a .ttf or .otf file into Content Browser
2. Unreal creates a Font Face asset
3. Right-click → Create Font → name it (e.g., "MyGameFont")
4. In the Font asset, add your Font Face to the Default Font Family
5. Use this Font asset in Text widget properties

Figure: Text styling variations including size, style, spacing, and shadows.

Images and Materials

Image widgets can display textures, materials, or nothing (for colored rectangles):

Brush: The main property that controls what's displayed. Can be set to:

• Image: A texture asset (PNG, JPG imported into UE)
• Material: A material or material instance for animated/procedural graphics
• None: Displays Tint color only (solid color rectangle)

Draw As: How the image is rendered:

• Box: Stretches to fill (can distort)
• Border: 9-slice scaling—corners stay fixed, edges stretch
• Image: Displays at original size or specified size
• Rounded Box: Adds rounded corners

9-Slice (Border mode): Essential for scalable UI elements like buttons and panels. Define margins that don't stretch, allowing the middle to scale while corners remain crisp.

Figure: Different Draw As modes for Image widgets.

Padding and Margins

Spacing is controlled through Slot properties and widget-specific padding:

Padding: Space inside a widget, between its edge and its content. Available on panels and some widgets like Button.

Margin: Space outside a widget, between it and siblings. Set in the Slot section of Details when a widget is inside a panel.

Both use four values: Left, Top, Right, Bottom. In many cases you can use "uniform" mode to set all four at once.

Render Transforms

Every widget has Render Transform properties for visual adjustments without affecting layout:

• Translation: Move the widget visually (doesn't affect layout/hit detection)
• Scale: Resize the widget visually
• Shear: Skew the widget
• Angle: Rotate the widget
• Pivot: Point around which rotation and scaling occur

Render transforms are great for animations and effects but remember: they're visual only. The widget's actual bounds don't change, so hit detection may not match what's displayed.

Common Widgets Deep Dive

Let's explore the most frequently used widgets in detail, including their key properties and common use cases.

Button

Buttons are the primary interactive element in UI. They respond to clicks/taps and have visual states for feedback.

Button Structure

A Button widget is actually a container—it can hold child widgets. The typical structure is:

Button
└── Text (or Image, or both)

The button provides the interactivity; the child provides the visual content.

Button States

Buttons have visual styles for different states:

• Normal: Default appearance
• Hovered: Mouse is over the button
• Pressed: Button is being clicked
• Disabled: Button is not interactive (Is Enabled = false)

Each state can have its own image/color in the Style section of Details.

Figure: Button states provide visual feedback for interaction.

Button Events

Buttons fire several events you can bind to:

• On Clicked: Fires when button is pressed and released (most common)
• On Pressed: Fires immediately when button is pressed down
• On Released: Fires when button is released
• On Hovered: Fires when mouse enters button area
• On Unhovered: Fires when mouse leaves button area

To bind an event, select the button and scroll to the Events section in Details. Click the + next to the event to create a handler in the Graph.

Text Block

Text Block displays text—static or dynamic. It's the workhorse of UI information display.

Key Properties

• Text: The content to display. Can be set directly or bound to a variable/function
• Font: Family, size, and style settings
• Color and Opacity: Text color with transparency
• Justification: Left, Center, Right alignment
• Wrapping Policy: How text wraps when it exceeds available width
• Auto Wrap Text: Automatically wrap at widget boundaries

Rich Text

For text with multiple styles (bold words, colored phrases), use the Rich Text Block widget instead. It supports markup like:

<Bold>Important</> text with <Red>color</>

Rich Text requires a Data Table defining your styles.

Image

Image widgets display textures or materials. They're used for icons, backgrounds, character portraits, and decorative elements.

Key Properties

• Brush → Image: The texture to display
• Brush → Draw As: Box, Border (9-slice), Image, or Rounded Box
• Brush → Tint: Color multiplied with image
• Brush → Image Size: Override the displayed size
• Color and Opacity: Overall color/transparency of the image

Using Materials

For animated or procedural images, use a Material:

1. Create a Material with User Interface material domain
2. Build your material (animated patterns, effects)
3. In Image widget, set Brush → Image to your Material

This enables animated backgrounds, procedural patterns, and dynamic effects impossible with static textures.

Progress Bar

Progress bars visualize a value between 0 and 1. Perfect for health, experience, loading, and timers.

Key Properties

• Percent: Fill amount from 0.0 (empty) to 1.0 (full)
• Fill Type: Direction of fill (Left to Right, Right to Left, etc.)
• Is Marquee: Animated "loading" style when true
• Style → Background Image: The unfilled portion appearance
• Style → Fill Image: The filled portion appearance
• Fill Color and Opacity: Color of the fill

Figure: Progress bars for different purposes using various styles.

Slider

Sliders let users select a value within a range—perfect for volume controls, brightness settings, and similar options.

Key Properties

• Value: Current position (0.0 to 1.0 by default)
• Min Value / Max Value: Range endpoints (can be customized)
• Step Size: Increment size (0 for continuous)
• Orientation: Horizontal or Vertical
• Style: Appearance of bar and handle

Slider Events

• On Value Changed: Fires whenever value changes (continuously while dragging)
• On Mouse Capture Begin: Fires when user starts dragging
• On Mouse Capture End: Fires when user releases

Check Box

Check boxes toggle boolean settings—enable/disable features, agree to terms, select options.

Key Properties

• Is Checked: Current checked state
• Checked State: Unchecked, Checked, or Undetermined (for tri-state)
• Style: Appearance for each state

Check Box Events

• On Check State Changed: Fires when state changes, provides new state as parameter

Editable Text / Text Box

For user text input—player names, chat messages, search fields.

Key Properties

• Text: Current content
• Hint Text: Placeholder shown when empty
• Is Read Only: Whether user can edit
• Is Password: Obscure input with dots

Text Input Events

• On Text Changed: Fires on every keystroke
• On Text Committed: Fires when Enter is pressed or focus is lost

Widget Composition and Reusability

Professional UI isn't built by styling every element individually—that leads to inconsistency and maintenance nightmares. Instead, you create reusable widget components that can be combined to build complex interfaces. One styled button definition used everywhere; change it once, it updates everywhere.

User Widgets (Custom Widget Components)

A User Widget is a Widget Blueprint that can be used as a component inside other Widget Blueprints. Create a styled button once, then drop it into any menu or HUD.

Why User Widgets?

• Consistency: Same look everywhere without manual copying
• Maintainability: Update one widget, all instances update
• Encapsulation: Internal complexity hidden behind simple interface
• Reusability: Use across multiple screens and even projects

Creating a User Widget

1. Create a Widget Blueprint as normal (right-click → User Interface → Widget Blueprint)
2. Design your component (e.g., a styled button with icon and text)
3. Add variables that should be configurable (button text, icon, colors)
4. Mark variables as Instance Editable and Expose on Spawn
5. Use this widget inside other Widget Blueprints by dragging from Palette → User Created

Figure: A User Widget defined once can be instanced in multiple locations. Updating the definition updates all instances.

Exposing Variables

For a User Widget to be configurable, expose variables that other widgets can set:

1. Create a variable in your User Widget (e.g., ButtonText of type Text)
2. Select the variable and in Details:
   • Check Instance Editable — allows setting per-instance in parent widget
   • Check Expose on Spawn — allows setting when created dynamically
3. Use the variable in your widget's design (bind text to it, etc.)

When you place this User Widget in another Widget Blueprint, the exposed variables appear in the Details panel, allowing you to configure each instance differently.

Event Dispatchers for Communication

User Widgets need to communicate events to their parents—"button was clicked," "slider value changed." Event Dispatchers enable this.

Creating an Event Dispatcher:

1. In your User Widget, open the My Blueprint panel
2. Under Event Dispatchers, click + to add one
3. Name it descriptively (e.g., OnButtonClicked)
4. Optionally add parameters (the data to pass when fired)

Calling the Dispatcher:

1. When the internal event happens (button clicked), call the dispatcher
2. Drag the dispatcher into the graph and select "Call"

Binding in Parent Widget:

1. In the parent widget, get reference to your User Widget instance
2. Drag from it and search for "Bind Event to [DispatcherName]"
3. Create a custom event to handle the callback

flowchart LR
    subgraph UserWidget["WBP_StyledButton"]
        B["Button Clicked"] --> C["Call OnButtonClicked"]
    end
    
    subgraph ParentWidget["WBP_MainMenu"]
        D["Bind to OnButtonClicked"] --> E["Handle Click"]
        E --> F["Start Game / Open Settings / etc."]
    end
    
    C -.->|"Event Dispatcher"| D
    
    style B fill:#c62828,color:#fff
    style C fill:#667eea,color:#fff
    style D fill:#667eea,color:#fff
    style F fill:#4CAF50,color:#fff
                

Figure: Event Dispatchers let child widgets communicate with parents.

Named Slots

Sometimes you want a User Widget that accepts arbitrary content—like a panel frame that can contain anything. Named Slots enable this.

1. In your User Widget Designer, add a Named Slot widget where content should go
2. Give it a descriptive name (e.g., "ContentSlot")
3. When using this widget in a parent, drag child widgets into the slot

Named Slots are perfect for:

• Styled containers (fancy borders around any content)
• Card layouts (title bar + content area)
• Scroll views with custom frames

Widget Switching and Visibility

Complex UIs often show/hide different panels. Use the Widget Switcher panel:

1. Add a Widget Switcher to your layout
2. Add multiple child widgets (each is a "page")
3. Only one child is visible at a time
4. Call Set Active Widget Index or Set Active Widget to switch

This is more efficient than showing/hiding multiple overlapping widgets—only the active widget processes input and ticks.

Figure: Widget Switcher shows one child at a time, perfect for tabbed interfaces.

Organizing Your Widgets

As your UI grows, organization becomes crucial:

Folder Structure:

Content/
└── UI/
    ├── Components/     (Reusable User Widgets)
    │   ├── WBP_StyledButton
    │   ├── WBP_HealthBar
    │   └── WBP_ItemSlot
    ├── Screens/        (Full-screen widgets)
    │   ├── WBP_MainMenu
    │   ├── WBP_PauseMenu
    │   └── WBP_Inventory
    ├── HUD/            (In-game overlays)
    │   ├── WBP_PlayerHUD
    │   └── WBP_DamageIndicator
    └── Common/         (Shared assets)
        ├── Fonts/
        ├── Icons/
        └── Materials/

Naming Conventions:

• WBP_ prefix for all Widget Blueprints
• Descriptive names: WBP_MainMenuButton not WBP_Button1
• Group related widgets: WBP_Inventory_Slot, WBP_Inventory_Panel

Hands-On: Create a Styled Menu Button

Let's create a reusable button component with custom styling, hover effects, and an Event Dispatcher. This button can then be used throughout your game's menus.

Step 1: Create the Button Widget

1. Right-click in Content Browser → User Interface → Widget Blueprint
2. Name it WBP_MenuButton
3. Open it in the Widget Editor

Step 2: Design the Button Layout

1. From Palette, drag a Button into the canvas
2. Select the button, in Details:
   • Set Size X: 300
   • Set Size Y: 60
3. Drag a Text widget inside the Button (as child)
4. Rename the Text to ButtonText
5. In Text Details:
   • Set Text: "Button" (placeholder)
   • Set Font Size: 24
   • Set Justification: Center
   • Check Is Variable (so we can access it in Graph)

Step 3: Style the Button

Select the Button widget and expand the Style section in Details:

Normal State:

1. Under Style → Normal, click the dropdown and select "None" for Image
2. Set Tint to your primary color (e.g., #667EEA - a nice purple-blue)

Hovered State:

1. Under Style → Hovered, set Image to "None"
2. Set Tint to a lighter version (e.g., #8B9CF9)

Pressed State:

1. Under Style → Pressed, set Image to "None"
2. Set Tint to a darker version (e.g., #5560D4)

Figure: Three button states with color variations for visual feedback.

Step 4: Create Exposed Variables

Switch to the Graph view and create variables:

1. In My Blueprint panel, under Variables, click +
2. Create LabelText (Type: Text, Default: "Button")
3. Select it, in Details:
   • Check Instance Editable
   • Check Expose on Spawn

Step 5: Bind Text to Variable

1. Switch back to Designer view
2. Select the ButtonText widget
3. In Details, find Text property
4. Click the Bind dropdown next to it
5. Select Create Binding
6. This creates a function—inside it:
   • Get LabelText variable
   • Connect to the Return Value

Now the button text will display whatever LabelText is set to!

Step 6: Create Event Dispatcher

1. In Graph view, find Event Dispatchers in My Blueprint panel
2. Click + to add one
3. Name it OnClicked

Step 7: Handle Button Click

1. Select the Button widget (in Designer or Hierarchy)
2. In Details, scroll to Events section
3. Click + next to On Clicked
4. This adds an event node to your Graph
5. From this event:
   • Drag OnClicked (Event Dispatcher) into graph
   • Select Call
   • Connect the execution wire

Figure: Button click calls the Event Dispatcher, which parents can bind to.

Step 8: Compile and Save

1. Click Compile
2. Click Save

Step 9: Create a Main Menu Using the Button

1. Create a new Widget Blueprint: WBP_MainMenu
2. Add a Canvas Panel as root
3. Add a Vertical Box (centered using anchor)
4. In Palette, find User Created → WBP_MenuButton
5. Drag three instances into the Vertical Box
6. Select each and set LabelText in Details:
   • First: "Play Game"
   • Second: "Options"
   • Third: "Quit"

Step 10: Bind Event Dispatchers

1. Switch to Graph view in WBP_MainMenu
2. For each button instance:
   • Drag the button variable into graph
   • Drag from it and search "Bind Event to On Clicked"
   • Create custom event (e.g., "OnPlayClicked", "OnOptionsClicked", "OnQuitClicked")
3. Implement each handler:
   • Play: Open Level or Print String "Starting Game"
   • Options: Print String "Opening Options"
   • Quit: Quit Game node

Step 11: Test

1. Create a test level or use existing
2. In Level Blueprint or Player Controller, add WBP_MainMenu to viewport on BeginPlay
3. Set Input Mode UI Only
4. Set Show Mouse Cursor = True
5. Play and test your menu!

Bonus Challenges

1. Add Icon: Add an optional Image widget next to text, expose Icon texture variable
2. Hover Sound: Play a sound on the On Hovered event
3. Click Sound: Play a click sound before calling the dispatcher
4. Scale Animation: Use Render Transform to slightly scale up on hover
5. Disabled State: Add logic to show disabled appearance when Is Enabled is false

Summary

In this lesson, you've learned how to move beyond default widget appearances to create polished, professional UI. From styling individual elements to building reusable components, you now have the skills to create consistent, maintainable user interfaces.

Key Concepts

Widget Styling: Every widget has appearance properties—colors with alpha, fonts with size and style, images with draw modes. Use these to match your game's visual identity. 9-slice (Border mode) is essential for scalable UI elements.

Text Styling: Font family, size, style, spacing, shadows, and justification all contribute to readable, attractive text. Import custom fonts to maintain brand consistency.

Button States: Buttons have Normal, Hovered, Pressed, and Disabled states. Each can have unique styling to provide clear visual feedback during interaction.

Common Widgets: Text Block for displaying information, Image for graphics, Progress Bar for values, Slider for user input ranges, Check Box for toggles, and Text Box for text input. Each has specific properties and events.

User Widgets: Reusable components created as Widget Blueprints. Define once, use everywhere. Update the definition and all instances update automatically.

Exposed Variables: Mark variables as Instance Editable and Expose on Spawn to allow configuration per-instance. Bind widget properties to these variables.

Event Dispatchers: Enable child widgets to communicate events to parents. The child calls the dispatcher; parents bind handlers to respond.

Widget Switcher: Efficiently shows one child widget at a time, perfect for tabbed interfaces and multi-page menus.

Styling Quick Reference

Widget Events Quick Reference

Best Practices

• Create reusable components: Any UI element used more than twice should be a User Widget
• Use Event Dispatchers: Keep widget logic encapsulated; communicate through dispatchers
• Expose only necessary variables: Don't expose everything—just what needs configuration
• Name widgets descriptively: ButtonText, HealthBar, not TextBlock_3
• Use consistent styling: Define colors, fonts, and sizes once and reuse
• Test button states: Verify all states look good and provide clear feedback
• Use 9-slice for scalable elements: Buttons, panels, and frames should scale without distortion
• Organize your UI folder: Separate Components, Screens, HUD, and Common assets

Figure: The workflow for creating professional, reusable UI components.

What's Next?

Now that you can create and style widgets, the next lesson focuses on HUD Elements. You'll learn how to create in-game UI that updates in real-time—health bars that reflect actual player health, ammo counters that decrease when shooting, and objective markers that point to goals. This is where UI meets gameplay!

Knowledge Check