Creating floating health bars
In this section, you will learn how to create a floating health bar above the character's head. Let's go back to Content Browser and create a new Widget Blueprint (for this example, I'll name it MyFloatingHealthbar) and open it.
In the Designer tab, you can see an option called Fill Screen at the top-right corner of the visual designer. Click on that and change it to Custom:
The Custom mode will let you assign the width and height of this widget. Let's set the width and height to 256 and 32. Now, we will drag and drop a new Progress Bar into the visual designer and use the following settings:
Set the Anchors to the very last anchor (this is the Fill Anchor). Anchor helps the widget stay in its position with different screen sizes. This avoids the widget being cropped off the screen. In addition to the fill anchor, there are other preset anchors too, such as fill bottom left side, fill right side, fill bottom area, fill top area, top left, center, right corners...
