True Segmented Health Bar

[cl_fabula]

Hello, I’m currently trying to setup an Integer based segmented health bar.

I have a HP bar that have a capacity of 100 (int) and i need the bar to have separated segments :

Currently, im using a simple progress bar with the texture i made.
This is placed on top of another image which is a simple “Bar Background”

My texture is “pixel perfect” and have a correct ratio for the little black spaces in between the red segments.

Then i’m converting my HP integer to a percent by doing this :

The issue i have is that i think by scaling the Progress Bar to my liking, it creates some pixel deformation and end up not respecting the spacing between segments, some spaces will always be larger and other smaller, visually its not an issue when the bar is full, but when i start loosing hp, i end up with some segment being half full and that’s not the idea.

A segment must be completely Full or invisible no matter what.

So i would probably need to find another way to do it, but placing 100 individual images and doing all the code to fill them of turning them off will be a massive pain.

Is there a way to somehow have one segment, and using an array with an offset to dynamically create/remove segments ?

Similar to an Array in Blender where i can increase the array number and the offset :

Is that Possible ?

[DonBusso]

Hey @cl_fabula

Your issue is due to sub-pixel rounding (aliasing). Some pixels get rounded up to 2px some get rounded to 1px, hence the gap thickness mess.

What you could do is either reduce the number of segments to something more manageable (I tried about 50 and it looked okay) or
if you would like to keep your 100 steps: introduce sub steps, meaning each segment would be divided say into 5 sub segments, giving you more steps.
Words can be difficult so just have a look on which of these would be best match for you and I can share material graph screenshot / or I will upload the material asset itself.

I don’t use progress bar at all, instead I’m using just an image and let material graph magic handle everything else. You will be able to feed it your health value and it will calculate the right number of segments or sub-steps to be filled.

You are able to control the gap between each segment using a constant or parameter.

A) Segments (no sub-steps) with visual separator (10 segment steps)

B) Segments (no sub-step) with transparent separator (10 segment steps)

C) Segments with sub-steps (100 steps, 5 sub-steps per segment)

I haven’t made the one with non transparent separator, yet.

You are able to dynamically change the colors of everything. The ones without sub-steps work well to about 50 segments. If you need to change the direction or orientation, it can be easily done by changing “render transform angle” so you can have it run whichever direction you like.

[RedGrimnir (Grimnir)]

Why don’t you do that with materials instead of texture? That would solve your problems in many cases and look nicer.

UI Useful Materials | Community tutorial

[cl_fabula]

Oh yeah, that’s exactly what i need to do, if you are willing to share the material i would be very grateful, because it is not very common, i was not able to find a guide and the few material example i found online where overcomplicating things for me to understand them properly.

So if i understand, my Hp bar texture would be

something like this :

And i would then use steps in the material to create the segments (the black bars separations) ?

[DonBusso]

I was trying to clean it up a bit and I messed things up a bit, but you should be okay figuring it out.

I migrated stuff to an empty project. You have two bars. One with no sub steps (Video#2) and one with sub steps. (Video #3).

I’m busy with other things right now so in the interest of saving my time, I’m uploading project right here. Version 5.5.4

Use it, share it, figure stuff out, make it better if you can. Good luck.

HealthBar.zip (65.5 KB)

[cl_fabula]

Thanks a lot, i will experiment with it today and tell you what i can do with it !