Dynamic UI Health Bars
In this post I want to go over a simple health bar using textures and some variations that we can make within the same material.
First, let’s talk about the health bar. In this example I want to bring it back to the days of heart cannisters! Yes, the good old Legend of Zelda however, their health bar is a bit different owing to the use of fractional components (1/4 health states) which I won’t be going over in this material. In this blog I will focus on showing only 2 states, the full and the empty.
There are 2 specific functions that I will be using for this material. One will be a normal progress bar which will only be used to reveal and hide my textures. See set of nodes below:
And the other would be patterning by multiplying the uvs with the total value resulting in a texture that repeats contingent to the multiplied value. This value will be a parameter called the total amount.
What I want in my material is to be able to control the sizes of the fill and empty textures. This can be done by scaling the individual uvs of each texture.
The correct way to do this (most performance friendly) would be to have one texture object which connects to the 2 other texture samples. The texture object should be a .tga file with the fill and empty textures on separate channels. When imported into the material we will be able to select the 2 channels as if they were separate textures.
With both components done, I now need to combine the set of progress nodes with the sets of textures and convert the values into real numbers.
Textures are based on values between 0 and 1 — 0.5 being 50%. In my case, this wasn’t a huge problem however, I wanted to have numbers that were accurate and clearly reflected the amount of health I had without any fractions.
My total amount of health being 6, I want my fill value to be 3 — not 0.5
To do this, I just need to divide my fill amount with my total amount (1/6 = 0.166667) which will return a value that fits within the spectrum of 0–1.
I wrote earlier about the progress bar nodes doing the work to show which texture I wanted and as cool as it sounds, it’s as simple as one lerp.
And now I just need to set up my alpha since scaling the individual textures will give us 2 different ones. The alpha should adjust based on what is shown.
And voila! There is a cool health material with parameters that are easily editable.
Index
With some minor additions the material, it can also be used as an index indicator which can be seen in many cases like carousels and for in game navigation systems.
Using the same idea as I used to show the fill/empty states, I can also create this index feature. My intentions were to duplicate the existing nodes pertaining to ‘progress’, subtract the fill parameter with 1, and subtract the 2 resulting sets to get the remaining value.
Which is essentially this. Lighter blue being the fill section.
(6/10) — (5/10)
And now with the same fill parameter, I can adjust where the filled texture is within the material.
All of these parameters are dynamic and adjust based on the others.
Explorations
Same material but just playing with the different parameters to get some cool results.
