I want to create a health bar that has segments every X amount of health the player has (i.e. divide the bar into segments of 50 health for example). Now from what I gathered googling, the only post referencing this is using box-shaped images as individual segments. I would like to recreate something like this:
Thing that is bugging me is that for non-square segments, there has to be some hackery with the padding of individual ones to make them line up since in the UMG editor every picture/border is a rectangle which makes all the segments look way too separated.
Other suggestion I found was to do something with a material to achieve this effect over the bar. Now first I have no clue where do you actually define these functions (the custom material nodes?) and how do you even use them on UMG-related parts such as the horizontal box, border, progress bar… Anyone have any suggestions on how to approach this problem?
Would that work? One note - shearing does not affect collision geometry so even it looks beveled, it’s still treated as a box. Irrelevant in most cases, though.
Where each bar can handle functionality - play animations / effects.
Other suggestion I found was to do something with a material to achieve this effect over the bar.
How to approach it would depend on the final looks / behaviour. You could do the whole thing in a single material but you would give up some control over the behaviour of individual pieces.
Now I guess its just basic math to calculate the right padding and of course to skip padding the first one since the bar would move from the initial position.
What is bugging me right now is this warning that I got (code is from one of your comments in the OW post I linked):
It says the property is read-only and cannot be modified directly, I have no clue what this means or is it gonna be a problem in the future. Another node I don’t quite understand is the following one:
If I hook it up like this it gives an error, but if I hook it from the AddChildToHorizontalBox node it is working. No clue why am I setting the size here and whether this needs to be done every loop iteration while adding segments.
As for the bar itself, should I make the segments transparent in the middle (basically just a border visible) and then just put the bar underneath or?
since this very Add Child node returns the correct slot type already, there’s no need to cast or dig into the data struct.
As for the bar itself, should I make the segments transparent in the middle (basically just a border visible) and then just put the bar underneath or?
That’s up to you. You have 2 distinct methods:
use a material mask for the entire thing (no individual widget blocks - the mask makes it look as if they were there)
use individual blocks, each with their own material if needed; and nothing stops you from making them transparent and show what’s underneath
The latter is a good approach if you want 3/7 blocks filled rather than have 27% of the entire progress bar filled. It would be awkward to handle each bar’s percentage coverage. Although, I once made one of these where each small block was a progress bar… it worked but was a tad overengineered; that’s unless you’re after something truly uncanny. Can’t recommend.
put the bar underneath or
Perhaps I misunderstood - are you referring to the situation where you have 7 bars and 53% is filled. So one of the bars will end up half-full? If that’s the plan, I wouldn’t bother with making them separate segments and go with:
use a mask material for the entire thing (no individual blocks)
