Hey everyone. I was watching a play through of Far Cry 3 and I noticed that the health bar system is designed on a curve but instead of just removing or adding a bar when health is lost/gained, that bar of health actually scales, but on the same curve. I know how you could do this horizontally or vertically because that is one direction but I am puzzled as to where I would begin with something like this. My friend had mentioned using a transparent cutout shader but I would like more insight if possible. Much thanks and any help is appreciated.

essentially you make a full health bar (which in this case happens to be curved)

in your preferred image editing software.

this shows you how to do a simple one, but one which is oddly shaped.

if your wondering well what about those little splits, you can do it one of two ways you can make each bar its own health bar and scale each one individually. (just make an array of small bars. To subtract you subtract from the top bar to start, when the amount visible is zero you move to the next bar in the array and call subtract on that, likewise its the opposite for adding hp).

The other option is to make the entire health bar one image.

Then what you do is make the gaps between each bar have the same color in the alpha transparency. what you can think of it as is.

the first bar is from 100% white to 80% white. the gap in between has no range, it is 80% white. now when you get to 80% and you go down to 79% you will not subtract a tiny insignifigant amount, but a large amount, you’ll subtract the entire gap plus a tiny amount off the second bar.

basically you’ll do the gradient thing but you’ll gradient not from 100% to 0 over the whole image but from 100% to 80% over the first healthbar and then from 80% to 80% on the gap below it, then from 80% to 60% over the second healthbar and 60% to 60% over the gap below it etc.