UE5 Health Bar UI

What You Will Build

By the end of this tutorial, your player will have a visible health bar on screen. When the player enters a damage trigger, health will decrease and the UI will update in real time.

The final setup includes:

• A health icon imported into Unreal Engine
• A Widget Blueprint used as the HUD
• A Progress Bar styled with the health icon
• A player health variable stored in the Character Blueprint
• Damage logic using Event Any Damage
• A test damage actor with Box Collision
• A binding that connects player health to the Progress Bar percent

This is a simple health system, not a full production character stats architecture. That is fine for this tutorial. The purpose here is to understand the foundation: how gameplay data drives UI.

Why Health Bars Matter

A health bar is one of the most common UI elements in games. It gives players immediate feedback about damage, danger, and survival. Without a clear health display, combat and hazard systems feel confusing because the player cannot easily understand their current state.

This setup is useful for:

• Player HUD health bars
• Enemy health indicators
• Boss health UI
• Survival game damage feedback
• Prototype combat systems
• Beginner Blueprint practice
• Learning how UI reacts to gameplay variables

The same idea can later be expanded into stamina bars, mana bars, shield bars, oxygen meters, hunger bars, and other gameplay status indicators.

Prepare the Health Icon

Start by preparing a health icon. You can use any PNG icon, but for the cleanest result, choose an icon with transparency and a white body. A white icon is useful because you can tint it inside Unreal Engine without editing the source image every time.

The recommended icon setup is:

• PNG format
• Transparent background
• White icon body
• Clean edges
• Simple readable shape

Import the icon by dragging it into the Content Drawer. After import, save the asset. If the icon background is not transparent, fix it before continuing. A bad icon with a solid background will make the health bar look cheap and messy.

Create the Health Bar Widget

Next, create the Widget Blueprint that will display the health bar.

1. Open the Content Drawer.
2. Right click in your UI folder.
3. Select User Interface.
4. Choose Widget Blueprint.
5. Select User Widget.
6. Name it WBP_HealthHUD or WBP_UI.
7. Open the widget.

A clearer name like WBP_HealthHUD is better than simply naming it HUD. As your project grows, generic names become harder to manage.

Inside the widget, add a Canvas Panel. The Canvas Panel allows you to position the health bar anywhere on the screen, such as the top left corner, bottom left corner, or near the player HUD area.

Add and Style the Progress Bar

Now add the visual bar that represents health.

1. Search for Progress Bar in the Palette.
2. Drag it into the Canvas Panel.
3. Position it where you want the health UI to appear.
4. Set a clear size, such as 150 x 150.
5. Select the Progress Bar and open the Details panel.

The Progress Bar has two important visual parts:

• Background Image: the empty or inactive part of the bar.
• Fill Image: the active filled part that represents current health.

For this tutorial, use the same health icon for both the background and fill. Set the background to a darker or more transparent look, then set the fill image to red. This creates a simple health icon style where the red fill visually represents remaining health.

In the Progress Bar settings:

• Set the background image to the health icon.
• Set the fill image to the same health icon.
• Tint the fill image red.
• Set the percent value to 1.0 for preview.
• Set the fill direction to bottom to top if you want the icon to drain vertically.

The percent value of a Progress Bar is normalized. That means:

1.0 = full
0.5 = half
0.0 = empty

This is important because your player health may be 200, 100, or any other number. The UI does not want raw health. It wants a value between zero and one.

Preview the Health Bar

Before connecting gameplay logic, preview the widget visually.

Set the Progress Bar percent to:

• 1.0 to preview full health
• 0.5 to preview half health
• 0.25 to preview low health

This helps you confirm that the fill direction, colors, and icon shape work correctly before you start debugging gameplay logic. If the visual setup is wrong, fixing it now is faster than trying to diagnose it after Blueprints are connected.

Compile and save the widget.

Add the Health Bar to Gameplay

The widget exists, but it will not appear in-game until you create it and add it to the viewport.

Open your player Character Blueprint, usually BP_ThirdPersonCharacter.

1. Go to the Event Graph.
2. Find or create Event Begin Play.
3. Add a Create Widget node.
4. Set the widget class to your health widget, such as WBP_HealthHUD.
5. Connect the return value to Add to Viewport.
6. Compile and save.

Now when the game starts, Unreal creates the health bar widget and displays it on screen.

Create the Player Health Variable

Next, create the health value that the UI will read.

In your Character Blueprint, create a new variable:

• Name: Health
• Type: Float
• Default value: 200

A float is useful because health systems often need decimal values later, especially if you add damage over time, armor scaling, regeneration, or multipliers.

In this beginner version, the max health is effectively 200. Later, for a cleaner system, you should create a second variable called MaxHealth. That is better than hardcoding the maximum value inside UI calculations.

Add Damage Logic with Event Any Damage

Unreal Engine includes a built-in damage event called Event Any Damage. This event runs when something applies damage to the actor.

In the Character Blueprint:

1. Right click in the Event Graph.
2. Search for Event Any Damage.
3. Get the current Health value.
4. Subtract the incoming Damage value.
5. Set Health to the result.

The basic logic is:

New Health = Current Health - Damage

This means if Health is 200 and the player receives 10 damage, the new health becomes 190.

For a beginner tutorial, this works. For a better version, clamp the health value so it never goes below zero:

New Health = Clamp(Current Health - Damage, 0, MaxHealth)

Without clamping, health can become negative if the player takes too much damage. That may not break the tutorial, but it is bad practice for a real game.

Create a Damage Trigger Actor

Now create a simple actor that applies damage when the player overlaps it. This gives you an easy way to test the health bar.

1. Right click in the Content Drawer.
2. Select Blueprint Class.
3. Choose Actor.
4. Name it BP_DamageTrigger.
5. Open it.

Add a Box Collision component:

• Click Add Component.
• Search for Box Collision.
• Set its size to around 200 x 200 x 200.
• Make sure overlap events are enabled.

In the Event Graph of BP_DamageTrigger, add:

1. On Component Begin Overlap from the Box Collision.
2. Cast the overlapping actor to your player character.
3. If the cast succeeds, call Apply Damage.
4. Set the damage amount to 10.

The logic is simple:

Player enters damage box
Cast to player character
Apply Damage = 10
Player receives Event Any Damage
Health decreases

Place the damage trigger in the level. When the player walks into it, the trigger applies damage.

Bind Health to the Progress Bar

Now connect the gameplay health value to the UI Progress Bar.

Open your health widget and select the Progress Bar. In the Details panel, find the Percent property and create a binding.

Inside the binding function:

1. Get Player Character.
2. Cast to your player Character Blueprint.
3. Get the Health variable.
4. Divide Health by the maximum health value.
5. Return the result.

Since this tutorial uses 200 as the starting health, the correct normalized calculation should be:

Health Percent = Health / 200

If your max health is 100, then use:

Health Percent = Health / 100

This part matters. A Progress Bar needs a value between 0 and 1. If you return raw health, the bar will not behave correctly.

A cleaner long-term setup is:

Health Percent = Health / MaxHealth

That way, if you change the player’s max health later, the UI still works without editing the widget logic.

Test the Health Bar

Now test the full system.

1. Place BP_DamageTrigger in the level.
2. Press Play.
3. Confirm the health bar appears on screen.
4. Move the player into the damage trigger.
5. Watch the health bar decrease.

If the bar decreases correctly, the gameplay logic and UI binding are connected.

If nothing happens, check the collision settings first. Most beginner errors with this setup come from overlap events not firing or the wrong actor being cast.

Blueprint Logic Summary

The widget creation logic is:

Event Begin Play
Create Widget: WBP_HealthHUD
Add to Viewport

The player damage logic is:

Event Any Damage
Health = Health - Damage

The damage trigger logic is:

On Box Begin Overlap
Cast to Player Character
Apply Damage: 10

The Progress Bar binding logic is:

Get Player Character
Cast to Player Character
Get Health
Health / MaxHealth
Return Percent

Important Improvement: Use Max Health

The quick version divides health by a fixed number. That works, but it is not ideal.

A better Character Blueprint should include:

• Health
• MaxHealth

Set both to 200 at the start. Then in the widget binding, calculate:

Health / MaxHealth

This makes the system easier to expand. If you later create upgrades, difficulty scaling, armor systems, RPG stats, or healing items, the UI will still work because it reads the actual max health instead of a hardcoded number.

Important Improvement: Clamp Health

Health should not go below zero and should not exceed max health.

After subtracting damage, use a clamp:

Health = Clamp(Health - Damage, 0, MaxHealth)

This prevents problems such as:

• Negative health values
• Progress Bar percent going below zero
• Healing pushing health above maximum
• Death logic firing inconsistently

This is a small fix, but it makes the system much more reliable.

Binding vs Event Based UI Updates

This tutorial uses a Progress Bar binding because it is fast and easy for beginners. The widget reads the player health and returns the correct percent.

For a small tutorial, this is fine. For larger projects, binding many UI values can become inefficient because bindings may be evaluated frequently.

Binding Method

• Easy to set up
• Good for beginners
• Requires less Blueprint wiring
• Can become messy if overused

Event Based Method

• More scalable
• Updates only when health changes
• Cleaner for larger HUD systems
• Requires more setup, usually with Event Dispatchers

Brutally honest: binding is okay for this five minute health bar. For a real combat system, use a Health Component and Event Dispatchers. That is the cleaner architecture.

How to Expand This System

Once the basic health bar works, you can expand it into a more complete player health system.

Add Healing

Create healing pickups that increase health and clamp the value back to max health.

Add Death Logic

When health reaches zero, trigger death animation, disable input, restart the level, or show a game over screen.

Add Damage Feedback

Add screen flash, camera shake, sound effects, or hit indicators when the player takes damage.

Add a Health Component

Move health logic into an Actor Component so it can be reused by the player, enemies, destructible objects, and NPCs.

Add Event Dispatchers

Use an event dispatcher such as OnHealthChanged to notify the UI only when health changes. This is much better for scalable UI architecture.

Add Enemy Health Bars

The same Progress Bar concept can be used with Widget Components above enemies to show health in world space.

Common Problems and Fixes

The Health Bar Does Not Appear

Make sure Create Widget and Add to Viewport are connected to Event Begin Play in the Character Blueprint. Also confirm that the correct widget class is selected.

The Health Bar Does Not Decrease

Check whether the damage trigger is applying damage correctly. Add a Print String after Event Any Damage to confirm that the player is receiving damage.

The Damage Trigger Does Nothing

Make sure the Box Collision has overlap events enabled. Also confirm the player collision setup allows overlap with the trigger.

The Progress Bar Is Always Full

The Percent binding may be returning the wrong value. Remember that Progress Bar percent must be between zero and one. Use Health / MaxHealth.

The Progress Bar Instantly Becomes Empty

Your division may be wrong. If Health starts at 200 but you divide by 100, the result starts at 2.0, which is invalid for a normalized Progress Bar. Use the correct max health value.

The Icon Looks Like a Box

Your icon probably does not have transparency. Use a PNG with a transparent background.

The Fill Direction Feels Wrong

Change the Progress Bar fill direction. For icon based health, bottom to top often looks better. For standard horizontal bars, left to right is usually clearer.

Frequently Asked Questions

Do I need C++ for this health bar?

No. This tutorial uses Blueprints only.

Can I use this system for enemies?

Yes, but for enemies you usually want a world space Widget Component above the enemy instead of a HUD widget added to the viewport.

Why does the Progress Bar use values from zero to one?

Unreal Progress Bars use normalized percent values. Zero means empty, one means full, and values between them represent partial fill.

Should I use binding for production UI?

For small widgets, binding is acceptable. For larger systems, update the UI through events when the value changes.

Can I change the health bar color based on low health?

Yes. You can change the fill color when health drops below a threshold, such as yellow below fifty percent and red below twenty percent.

Can this work with a modular Health Component?

Yes. A Health Component is the better long-term architecture. The widget would read health from the component instead of directly from the Character Blueprint.

Why is my health going below zero?

You need to clamp the health value after applying damage. Use Clamp Float with minimum zero and maximum equal to max health.

Conclusion

You now have a working health bar UI in Unreal Engine 5. The system uses a Widget Blueprint, Progress Bar, player health variable, Event Any Damage, Apply Damage, a Box Collision trigger, and a UI binding that converts health into a normalized Progress Bar value.

This is a simple beginner setup, but it gives you the foundation for more advanced systems. Once you understand how health data drives UI, you can build stamina bars, mana bars, shield bars, enemy health bars, and full combat HUDs.

Watch the full tutorial: Get a Health Bar in Just 5 Minutes with Unreal Engine 5

More Unreal Engine tutorials: rambod.net