A Dynamic HP Bar UI in Unity
Today’s article is part of a Boss Fight Script that we’ll keep exploring in segments due to its length. This article will mainly focus on preparing the HP UI to make it programmable, the next article will be all about the code.
Objective: Set up a UI for an HP bar that will change color as it takes damage.
Adding the HP Bar UI
- Add an image via UI → Image and rename it to Border(I know here I renamed it to HP Bar but that was my bad, that step comes a little later). Any adequate name will do, but just know that this image will act as your HP Bar’s border. You can find a sprite and assign it to be the Border or you can make
2. Add a Sprite to the Border, or make the Border transparent.
Note: There’s a very neat Pixel Art Editor online that allows your to cuztomize your own HP Bar from a premade set or from scratch.
Using Pixilart
This is an optional part of the article where I show you how to create a Border for your HP Bar from scratch. You can skip ahead if you already have a sprite or otherwise.
To get started, go to File → New Drawing and select your parameters. I am personally sticking to 13x5.
Drawing a border is as easy as selecting the Rectangle tool and dragging it across. Now all you need to do is save your image.
Download your Image as PNG so that it keeps that Alpha/transparency. I chose to save my image with104x40 parameters. You can use the slider in the Download options to adjust this.
When importing your PNG, you just convert it to Sprite 2D.
Back to Setting Up the UI
If you don’t want a Border, you can make this area transparent.
Note: The examples from steps 3–6 don’t show the sprite. This is because the gif images were created before it was added. This does not affect the process.
Set the Sprite as Native Size. This might cause it to look a lot smaller, you can scale it back up.
Note: If setting your Sprite to Native causes it to change the size, you can always reposition it as long as it doesn’t cause any sort of warping. If you run into trouble during this step and you created your sprite using pixilart, you may need to resize the dimensions of your Border Sprite in Pixilart.
3. Center the Border(you can set all the position coordinates to 0 in the inspector), then resize it to make a rectangle. While the canvas(or any object in the Hierarchy) is selected, you can press F to frame it. You can also enter 2D mode to make resizing it easier. I will be in 2D mode regardless because this is for a 2D game.
Note: You can quickly jump from one value to the other by pressing Tab rather than have to manually select each.
4. As you can notice, the image UI comes with its own canvas, we need to resize it so that it fits around our currently-empty image. To do this, you must switch the Render Mode to World Space. You may need to reposition the image a bit further.
5. The canvas overall is quite large, probably larger than your scene. If necessary, scale it down to fit the adequate size for your game. In my case, the HP will be hovering above a placeholder object which will later be the Boss battle Enemy.
You can perform a general Scale by selecting the Canvas in the Hierarchy → Pressing r → selecting the center square from the Scale widget and moving it inwards.
6. Once you get your Border in the position you like, add an Empty Game Object within the Canvas and scale it to fit the Image area. This empty Game Object will be your HP Bar.
Note: It’s very important that you add the Empty Game Object from within the Canvas or it won't be scalable or able to interact with the UI the way it is intended.
The Border must be set as a child of the HP Bar Empty Game Object.
7. Add another image via UI → Image, this will be the Fill or Color of the HP Bar. Make sure to place the Fill Image below the Border in the Hierarchy but not as a child object. This way, the layers will auto-sort and show the Fill underneath/inside the HP Bar Border.
Modify the image to fit the Border and anchor its position. This modification should be done by dragging the blue markers at the edge of the Fill Image, if you use the regular scale method, the fill won’t behave accordingly when we add our next step.
To anchor the Border press ctrl + Shift in the anchor points and select the bottom right corner.
Note: You can tell an object has been anchored by these triangle-shaped indicators that appear at its corners. Anchoring positions for UI is important to make sure that scaling changes such a switching screen sizes won’t warp the UI.
The Fill is what will be the visual representation of how the HP increases or decreases. This will be controlled through code later on,
8. Add a Slider Component to the HP Bar and set Transition and Navigation to none. The slider will enables us to controll the Fill.
9. Drag the Fill image to the Fill Rect in the Slider Component.
When you manipulate the slider value, you can see how the Fill moves along with this. This is the value we’ll be programming later.
Now that you have the HP Bar set up, it’s time to program it! I will be covering that in the next article to keep things as concise as possible!
This has been part of a series of Core Programming Challenges from GameDevHQ. The HP Bar is the first in a scripting set for a Boss Fight.
