0:00Introduction

In this tutorial, we create a health bar and health text display on the screen using UMG in Unreal Engine 5. Hello, welcome to Cerdas Inovasi Digital. In this tutorial, we create a user interface or HUD in Unreal Engine 5 using UMG. A red health bar and health text appear on the screen when the game is played. Let's start! Create a new project from the TetherPerson template, name it 'belajar UI', and then be creative. Right-click in the Content Browser, select User Interface, then Widget Blueprint. Select User Widget, name it 'wbp underscore hud', then double-click to open the UMG Designer. The widget is still empty. In the T palette, search for canvass panel and drag it into the hierarchy. Canvass panel is a container that represents the entire screen. Search for progress bar and drag it into the canvass. This progress bar will be our health bar. In the Details panel, set position to 40, 40, and size to 400x35, so the bar is in the top-left corner. Fill the percent to 0.75, meaning 75% health. Then change the fill color to red. Add text below the bar, position at 40, 90, and fill the text with 'health 75%'. Click compile and save, then close the Widget Blueprint. Now the widget should appear when the game starts. Click the Blueprints button in the toolbar, then open level Blueprint. From the event begin play, drag the pin and add create Widget, then select the class 'wbp underscore hud'. From the return value, add add to via port, so the widget appears on the screen. Click compile, close level Blueprint, then save all. Press play. The health bar in red and health text appear in the top-left corner of the screen, and remain visible as the character moves. Done. You've created your first HUD using UMG. Next, the percentage can be connected to the character's health variable so the bar decreases when attacked. Don't forget to subscribe, like, and share. Goodbye. Want to master game development with Unreal Engine? Cerdas Inovasi Digital offers complete Unreal Engine courses, game development services, 3D character creation, and sells ready-to-use project files. Contact us via WhatsApp or visit cerdasinovasidigital.com Thank you for watching!