Get a Health Bar in Just 5 Minutes with Unreal Engine 5.5!

Get a Health Bar in Just 5 Minutes with Unreal Engine 5.5!

Published: January 02, 2025 • Series: UI and HUD • Level: beginner

unreal ue5 health ui blueprints hud

This is Rambod and today we build a simple health bar system with a clean UI in Unreal Engine 5.5. We will set up a widget, add health logic, and connect it to gameplay so damage reduces the bar in real time.

1) Prepare the health icon

  • Download a health icon (any PNG works).
  • Make sure its alpha is set to zero and body color is white.
  • Import it into your project by dragging it into the Content Drawer.
  • Save the asset.

2) Create the health bar widget

  • Right click in the Content Drawer → User Interface → Widget Blueprint.
  • Name it WBP_UI or HUD.
  • Open it and add a Canvas Panel.
  • Inside it, add a Progress Bar.
  • Set size (around 100×100 or 150×150).
  • For the Background Image, pick the health icon and set it to Draw As: Image.
  • For the Fill Image, use the same icon and tint it red to represent health.
  • Set the progress percentage to 1.0 to preview.
  • Configure the bar to fill from bottom to top.
  • Compile and save.

3) Show the widget in the game

  • Open your Third Person Character Blueprint.
  • In Event Begin Play, create a Create Widget node.
  • Select the WBP_UI class.
  • Add an Add to Viewport node.
  • Now when you play, the health bar appears on screen.

4) Add the health variable

  • In the character blueprint, create a float variable named Health.
  • Set default value to 200.
  • Compile and save.

5) Handle damage

  • Add an Event Any Damage node.
  • Subtract the damage value from the Health variable.
  • This updates health whenever damage is applied.

6) Create a damage trigger

  • Create a new Blueprint Actor called BP_Damage.
  • Add a Box Collision (size ~200×200×200).
  • In the Event Graph, add On Component Begin Overlap.
  • Cast the overlapping actor to your character.
  • If valid, call Apply Damage with a value of 10.
  • Place this actor in the level to test.

7) Bind health to the progress bar

  • Open the widget.
  • Select the progress bar and create a Binding for percentage.
  • In the binding function:
    • Get Player Character → Cast to your character.
    • Access the Health variable.
    • Divide health by 100 to normalize between 0 and 1.
    • Return the result.
  • The bar now updates automatically with gameplay.

Wrap up

When you step into the damage box, the player loses health and the bar decreases in real time. This is a clean and functional health system with UI in under 5 minutes. Perfect for beginners and a solid base to expand on.

For more Unreal Engine tutorials, visit rambod.net, subscribe on YouTube, or watch this tutorial here: Watch on YouTube.