Hiya! I’m trying to reconstruct the health bar system that Overwatch has in their game. The first thing to note is that the health bar scales depending on the amount of total health that exists on the player. Each increment on the bar is worth 25 HP. Tracer, as an example, has a max HP of 150, meaning she would have 6 bars total that’s scaled accordingly. However, if she were to add an armor back worth 75 HP, the base health bars (White [150]) would resize in order to fit the three golden armor(Gold[75]) HP slots, making the max HP 225 (9 bars total [6 white + 3 gold]). As the armor depletes, the Base health will again resize to its original length. However, if the base health begins to deplete, the bar does NOT resize. The meter will simply deplete like a normal health bar.
It’s also important to note that Shields take 1=1 damage from enemies, but regenerates over time, whilst armor does not regenerate but takes .05=1 damage from enemies.
I have absolutely no idea how I would go about this, since I’m still very new to Unreal 4. Any help would would be appreciated!
each bar is a simple separate widget (9-slice border (check out the Setting Image States part) if you want the preserve the nice curved corners while stretching the bars)
create 3 horizontal boxes inside another horizontal box
widgets have a Size Fill property that dictates how much space (in percent) they take within a container - this will allow you to evenly stretch each of the 3 horizontal boxes which, in turn, can automatically stretch the bars inside them
you will need a bit of math that produce the correct values
The second method is very similar to the first one but instead of separate widget for each bar, you’d use 1 bar for each of the 3 sections (health, armour, shield) but use a tileable, parametrised material instead.
I’d say the first method is most likely preferable as it would be easier to preserve the shape of the bar if you want them slanted and with nice curved corners. The 2nd one should be somewhat easier to implement but not by much.
Let me know if any of the above makes any sense whatsoever. UMG can be truly daunting.
HorizontalBox and VerticalBox is a UMG container that can house other widget elements and arranges them as the name suggests. You can find them in the Palette, under the Panel tab.
I added borders into the mix so I do not have apply colours separately to each bar, the border takes care of it automatically.
Each bar is a separate widget (no canvas, just a border that can be embellished at a later stage) which I added manually, just to test it. In the game, you’ll need a couple of functions to automate adding, removal, resizing, collapsing and showing.
I’ve built out everything as far as I can, however I have two questions.
What is the “Get children count”? I’ve tried looking for that actions rollout, but can’t find it anywhere. Is that a custom action?
I see you created functions out of the horizontal boxes and borders. For some reason, when I try to bring the functions into the event graph, they automatically drop as set floats rather than get functions. How do I correct that, and are there any events that live inside each of the gets?
I’ve built out everything as far as I can, however I have two questions.
What is the “Get children count”? I’ve tried looking for that actions rollout, but can’t find it anywhere. Is that a custom action?
I see you created functions out of the horizontal boxes and borders. For some reason, when I try to bring the functions into the event graph, they automatically drop as set floats rather than get functions. How do I correct that, and are there any events that live inside the functions?
What is the “Get children count”? I’ve
tried looking for that actions
rollout, but can’t find it anywhere.
Is that a custom action?
Not a custom node. A lot of the blueprint nodes are context sensitive, meaning you need to start dragging a wire from a particular node; you’re then presented with the choices that make sense in that context. If you start dragging a wire from any widget container (like the HB_HealthMain, which is a horizontal box container), and type get children count, you’ll get the node you need. This node counts the immediate children nested inside; in this case, the bars representing chunks of health/armour/shield.
I see you created functions out of the
horizontal boxes and borders. For some
reason, when I try to bring the
functions into the event graph, they
automatically drop as set floats
rather than get functions. How do I
correct that, and are there any events
that live inside the functions?
They’re not functions - they’re exposed widget references. Some widget are not exposed by default (you can’t see them see them in the Graph where all the variables are listed). When you select any widget in the Designer’s hierarchy panel and peek at the details panel, you’ll notice a tickbox in the upper right corner that reads isVariable. It will allow you to obtain a direct reference to that widget and, in turn, let you manipulate it and access its functions directly. I should have mentioned that, it’s easy to miss:
From now on, when you drag the reference variable into the graph, you’ll be able to get/set them.
edit: looking at it now made me realise it’s prone to dividing by zero, so you may want to catch that exception, otherwise we’re gonna have a bad time.
Cool! I hooked everything together as you stated, however, I’m not seeing the boxes scale. I’ve given armor and shield 0 value, but the two widgets still take up space in the health bar… not quite sure what i’m doing wrong. Any thoughts off the top of your head?
I know for a fact that the PreConstruct event is buggy and does not always update widgets correctly -
you can force it by clicking Auto-Fill buttons of the specific elements. Anyway, I never tested it during run-time. Having done that now, I can see it does not update correctly, indeed.
Handled the 0 division, ensured that the fill struct is pushed in correctly into the slate child slot, added a couple of events so the functionality is easily reusable.
Also added a SetHAS CustomEvent you can use for setting (and resetting) the initial values dynamically:
Hi, I’m kind of late and this is also what I wanted to do and thanks for the answers. But, how would I connect the health to my characters that I have? I know you have to cast it but doing this system with increments of 25 (I would like to do 20) threw me off. Could you help me?
It’s been a while since I posted but it seems that this system does not use any values whatsoever. If you look at the last image, there is an OnClicked event that creates a random number of bars. From here on it would be up to you to assign them values.
You can either accumulate the stats in variables as you create / destroy bars representing the pertinent values or count the children of each bar (the horizontal boxes) container and multiply by the desired increment.
You could and it should work just fine but it would require rewriting the whole thing as these would be the Hit Points that drive the progress bars, not the other way round.
I wouldn’t use the above method for something like this, though - it would be overly complicated having to calculate and store each bar’s progress data. Have a look at my very first post where I briefly describe an alternative method (The second method[…]) - a much more reasonable approach in this case.
If you wanted to handle HP, Armour and Shields bars that can be gradually and independently depleted (so damaged armour can mitigate just a portion of the incoming damage, for example), consider using 3 progress bars only. The division into smaller elements should be done in the material by adjusting the UV coordinates and would be decorative only.
Feed the dynamic material Max Health divided by Health Block Value and use it as the horizontal coordinate. Use the progress bar with the Map To Range node.
Apologies, but it’s a no can do. It’s a 5 yo thing. I’ve removed the link to avoid confusion. Looks like it’s a 10 minute job to reproduce it, though. Do tell if things somehow do not add up.
Any thoughts off the top of your head?
