Start Building

With movement, weapons, enemies, and a level in place, the next step is UI/UX: a HUD that shows health and ammo, a crosshair or reticle, and menus (pause, game over, main menu) so the player always knows their state and can control the game. This lesson gets you to a working in-game HUD and at least one menu in Unreal Engine 5.

You will finish with health and ammo on screen, a visible crosshair, and a pause menu that stops the game and resumes correctly.

Why UI comes next

Until now the player could shoot and take damage, but they had no on-screen feedback for health or ammo, and no way to pause or restart. UI gives feedback (how much health, how many bullets) and control (pause, quit, restart). Start with a minimal HUD and one menu; you can add more screens and polish later.

We will use UMG (Unreal Motion Graphics) and Widget Blueprints for all UI. The HUD is a widget added to the viewport; menus are separate widgets that you show or hide and that can capture input when open.

Step 1: Create the HUD widget

  1. Create a Widget Blueprint

    • In the Content Browser, right-click and choose User Interface > Widget Blueprint. Name it e.g. WBP_HUD.
    • Open it. You will work in the Designer (visual layout) and the Graph (logic).

  2. Add health and ammo text (or progress bars)

    • Drag Text blocks onto the canvas. Name them e.g. Text_Health and Text_Ammo.
    • Position them (e.g. bottom-left for health, bottom-right for ammo) and set a default value like "100" and "30 / 90" so you can see them in design.
    • Alternatively use Progress Bar for health (fill 0–1) and Text for ammo. Bind the progress bar's Percent to a variable or function that returns Current Health / Max Health.

  3. Add a crosshair

    • Add an Image (or a simple shape) at the center of the screen. Use a small texture (dot, cross, or circle) or a colored rectangle. In the Designer, anchor it to center and set position so it stays in the middle.
    • Optionally make it a retacle that expands when shooting or moving; for this lesson a static center crosshair is enough.

  4. Bind health and ammo to game data

    • In the Widget Blueprint Graph, create variables or binding functions that read from the player. The usual approach: the HUD widget does not own the data; it gets it from the Player Controller or the Player State.
    • In your player Blueprint (or a component on it), expose health and ammo (e.g. getter functions or variables with "Instance Editable" or replication). In the HUD widget, use Bind on the Text or Progress Bar to call a function that gets the player reference (Get Player Character or Get Owning Player) and reads health/ammo.
    • Update the text or progress each tick, or use Event Dispatchers on the player that the HUD listens to (e.g. "On Health Changed") so you only update when values change.

Pro tip: Keep the HUD widget lightweight. Do not run heavy logic in the HUD; just read and display. Game logic stays in the Character or Player Controller.

Step 2: Add the HUD to the viewport

  1. Create the HUD in the Player Controller

    • Open your Player Controller Blueprint (or the one used by your game mode). In Event BeginPlay (or when the pawn is possessed), Create Widget from your WBP_HUD class, then Add to Viewport. Store a reference to the widget if you need to update it later (e.g. pass the player reference to the widget so it can bind).
    • Ensure the widget is added with the correct ZOrder so it draws on top of the 3D view (default is fine).

  2. Pass the player reference to the HUD

    • When you create the widget, call a custom Set Player or Initialize function on the widget and pass the player Character (or Player Controller). Inside the widget, store this reference and use it in your health/ammo bindings so the widget always reads from the correct pawn.

  3. Test in play

    • Run the game. You should see health, ammo, and crosshair. Shoot to see ammo decrease; take damage to see health decrease. If values do not update, check that the widget is reading from the right player and that the player exposes health/ammo correctly.

Common mistake: Adding the HUD in the Character's BeginPlay instead of the Player Controller. The Player Controller is the right place because it persists across pawn changes (e.g. death and respawn) and owns the viewport.

Step 3: Pause menu

  1. Create a Pause Menu widget

    • Create another Widget Blueprint, e.g. WBP_PauseMenu. Add a panel (e.g. semi-transparent background) and buttons: "Resume," "Restart," "Quit to Main Menu" (or "Quit Game").
    • Center the panel on screen. Buttons can call Blueprint functions that you will implement in the widget or in the Player Controller.

  2. Show/hide and input

    • In the Player Controller, create a variable to track whether the game is paused. When the player presses the pause key (e.g. Escape), toggle pause: Set Game Paused (Unreal's built-in node) and Create Widget for the pause menu (if not already created) and Add to Viewport (or set visibility to Visible). When unpausing, Remove from Parent (or set visibility to Hidden) and Set Game Paused false.
    • Ensure that when the pause menu is open, input mode is set to UI Only (Set Input Mode UI Only) so the player can click buttons and the game does not receive movement or shoot input. When resuming, set input back to Game Only.

  3. Wire the Resume button

    • In the pause menu widget, the Resume button's On Clicked should call a function on the Player Controller (e.g. "Unpause") that hides the widget and unpauses the game. You can get the Player Controller from the widget with "Get Owning Player."

Pro tip: Use Set Input Mode UI Only and optionally Set Show Mouse Cursor true when the pause menu is open so the player can click. Reverse both when closing the menu.

Step 4: Game over and feedback

  1. Game over screen (optional)

    • When the player's health reaches zero, you may want to show a "Game Over" widget (with Restart and Quit). Create WBP_GameOver, add it to the viewport from the Player Controller or from the Character when death happens. Use the same input mode (UI Only) so the player can click Restart or Quit.
    • Restart can call Open Level (same level name) or your custom restart logic. Quit can call Quit Game or open the main menu level.

  2. Hit feedback

    • Optionally add a brief damage vignette or red flash when the player takes damage (a full-screen image or overlay that fades out). This can be part of the HUD widget or a separate widget that you show/hide with animation. Keep it subtle so it does not obscure the view.

Step 5: Mini challenge – UI checklist

Before moving on, verify:

  • [ ] Health and ammo are visible and update when the player takes damage or shoots.
  • [ ] A crosshair or reticle is visible at screen center.
  • [ ] Pause (e.g. Escape) opens a pause menu and pauses the game; Resume closes the menu and unpauses.
  • [ ] Input is UI-only when a menu is open (mouse visible, no movement/shoot).
  • [ ] Optionally: game over screen when the player dies, with Restart or Quit.

If the HUD does not update, check that the widget is bound to the correct player and that health/ammo are exposed. If the pause menu does not capture input, ensure Set Input Mode UI Only is called when the menu opens.

Troubleshooting

HUD not visible: Ensure the widget is added to the viewport in the Player Controller (or that the correct Player Controller class is used by the Game Mode). Check that the widget's visibility is Visible and that it is not behind another full-screen widget.

Health/ammo not updating: Ensure the widget has a reference to the player (or Player Controller) and that it reads the current health/ammo each frame (or listens to events). If the player is recreated (e.g. respawn), the HUD may need to refresh its reference.

Pause does not stop the game: Use the Set Game Paused node with the correct boolean. Ensure the pause menu is shown and input mode is UI Only so the player cannot move or shoot while paused.

Buttons do not respond: Set Input Mode to UI Only when the menu is open and ensure the widget (and buttons) are visible and not blocked by another widget. Check that button On Clicked is wired to your resume/unpause logic.

What is next

With a HUD and pause menu, the player has clear feedback and control. In Lesson 10: Audio Design & Sound Implementation you will add weapon sounds, footsteps, music, and ambient audio so the FPS feels and sounds complete.

For more on UMG and UI in Unreal, see Unreal Engine 5 UMG UI Designer and our Unreal Engine Guide. Found this useful? Bookmark the course and try adding a main menu or an options screen. When you are ready, head to Lesson 10 for audio.