Creating a segmented healthbar

Can’t help you 100% with this exact thing BUT I may be able to offer a solution to part of your problem…check out video #10 in the link below you may find some use for this node I created.

If you can figure out how to visually “segment” the bar this might work…

I need a healthbar that’s visually divided into 20-health segments or so. The trick is, the player can:

  • Receive 17 damage, thus not removing a whole segment
  • Find health upgrades that can raise the maximum health of 500 or so
  • Said upgrades can have a value of 20, but they can have a value of 50, or 37 as well

See the image below:

295420-unknown1.png

I tried to overlay the healthbar with an image component that had a masked material with GeneratedOffsetBands whose number was driven by a parameter, but the separating bars where wide and blurry on low segment counts, and glitchy and super thin on high segment counts.

I tried experimenting with canvas render targets and drawing lines on it, but hard-set sizes and coordinates don’t lend themselves well to a UI that should be scalable. It’s also not the easiest thing to do, feels kinda hacky, and I fear potential performance impact.

I tried asking for help on two different Discord servers, on r/UnrealEngine subreddit, but without much success. Even Google itself is oddly silent, showing me virus-ridden links straight on the first page.

Make each bar a widget so you can assemble it any way you want without loosing quality and / or fiddling with textures UVs, as seen here:

It allows you to create a segmented bar. Have the elements transparent, with only the lines showing. You can then count bars (and multiply by some value) - that’s your max HP. Map range that value to a progress bar and place it underneath the elements.

Should be pretty straightforward once you’ve skipped the armour / shield division in that post.

It’s pretty late, though I had the same problem and figured out this elegant solution all done within the material. Wanted to share with anyone else looking.

Create a Custom Node, type in the following code, and plug in a texture with just a line down the left side, this is the “Segment line”. The code will literally paste the texture evenly across, keeping it perfect without any sort of stretching. Manipulate in any way needed.

With a few changes to the code, this can be used for many other things that could do with repeated textures. Below is an example of multiple items that stay centered. It also has additional code to blend the alphas properly.

Goodluck!