Quick answer: a Widget Component shows a UMG widget on an actor, like a health bar over an enemy or a screen on a wall.
- Add a Widget component to your actor Blueprint.
- In Details > User Interface, set Widget Class to your Widget Blueprint.
- Choose Space: World puts it in the 3D scene, Screen draws it flat on the screen at the actor’s position.
- Set Draw Size to the size your widget was designed at.
To make it clickable in World space, add a Widget Interaction Component to your player.
World or Screen space?
- World: the widget is a flat panel in the level. Walls can hide it and it gets smaller with distance. Use it for in-game screens, control panels and VR menus.
- Screen: the widget is drawn as normal 2D UI that follows the actor. It always stays readable. Use it for nameplates, health bars and markers.
Pick the space in the Details panel. Changing it later during gameplay doesn’t work reliably.
Add a 3D widget in Blueprint
- Create a Widget Blueprint, for example WBP_HealthBar.
- In your actor Blueprint, click Add > Widget.
- Set Widget Class, Space and Draw Size.
- Rotate the component so its red X arrow points toward the player. That’s the front of the widget.
- To talk to the widget, in BeginPlay call Get User Widget Object and Cast To your Widget Blueprint.
Blurry text
The widget is drawn at Draw Size pixels and then stretched to fit. If it looks blurry, raise Draw Size and scale the component down, instead of scaling a small widget up.
Widget Component in C++
Add "UMG" to your module’s Build.cs, then:
// Header
UPROPERTY(VisibleAnywhere)
TObjectPtr<UWidgetComponent> HealthBarComponent;
// Constructor
HealthBarComponent = CreateDefaultSubobject<UWidgetComponent>(TEXT("HealthBar"));
HealthBarComponent->SetupAttachment(RootComponent);
HealthBarComponent->SetWidgetSpace(EWidgetSpace::Screen);
HealthBarComponent->SetDrawSize(FVector2D(200.0, 30.0));
Set the Widget Class in the Blueprint child, then in BeginPlay get the widget with GetUserWidgetObject() and cast it.
Make 3D widgets clickable
World space widgets don’t receive normal mouse clicks.
- Add a Widget Interaction Component to your player character or controller.
- For a mouse, set its Interaction Source to Mouse. For VR, attach it to the motion controller.
- On click, call Press Pointer Key and Release Pointer Key with Left Mouse Button.
Widget not showing?
- Widget Class isn’t set.
- You’re looking at the back. The front faces the red X arrow. Turn on Two Sided to see both sides.
- Draw Size is 0.
- On a dedicated server there’s no widget at all; it only exists on clients.
Widget not clickable?
- There’s no Widget Interaction Component, or it doesn’t send Press and Release Pointer Key.
- Interaction Distance is too short.
- Something invisible blocks the trace between the player and the widget.
Our UMG Piano Keys widget works on a Widget Component too.
FAQ
How do I make a health bar above an enemy?
Use a Widget Component in Screen space, attached above the head, with a progress bar widget.
Why is my widget so big in the world?
Draw Size is in pixels but shown in world units. Scale the component down.
Are Widget Components expensive?
Each World space widget renders its own texture. For many widgets, lower the redraw rate under Rendering, or use Screen space.