How to Set Progress Bar Fill Image That Changes With Fill Percent?

I’m trying to set my character’s healthbar to consist of three images that correspond to his health level (a green image for 40+ health, an orange image for 20-40 health, and a red image for less than 20 health), but this is proving to be frustrating without the ability to simply set a binding to the fill image (why isn’t this a thing?). I’ve gotten this system working with fill color, but I would prefer to be able to use images instead. I found [this][1] solution from which I created the following setup, but it’s not working completely.

When I still have my fill color binding set up, my healthbar will retain the default green image and darken as I hit the lower health levels (I suppose being tinted by the color function). When I disconnect the fill color function, the fill image simply remains as the green image with no color change whatsoever. Please help?

Shouldn’t the first comparison read 40 rather than 0.4? What range does the function return?

simply set a binding to the fill image
(why isn’t this a thing?)

Because bindings fire every frame and you do not want to update it that often, especially here.

Well, it was a derp on my end that I put a percentage in one comparison and a whole number in the other, but it would seem that it’s not making a difference either way. I get the same result with both as percentages, both as whole values, and with a mix. And thanks for explaining the binding bit.

Haven’t used is like that before but the code looks fine as is. So what does the function really return? What values should we expect here?

Just tested it and it seems to be doing its thing just fine. At this stage I’d blame the values returned by the function.

Okay, after doing some thinking about what you’ve said I realized that the reason this wasn’t working was because the function was only being called once and never updating. (There was also a bit of an oversight in that I had my Set Brush Resource nodes linking to my Break Progress Bar Style background image output instead of the fill image one.) I moved the function from the Event Construct to an Event Tick and it now works.

But I still have to ask, since you said it’s better to not have this sort of thing being called constantly, is there a better way to have this check more than once? My first thought is to tie this to any events that change my character’s health, but so far the only events I have that affect my character’s health are two key presses that add/subtract 5 health for testing purposes and I’m not sure how best to tie the fill image to those functions. ATM I have my healthbar set to change the fill image according to my character’s “Is Hurt” (20-39 HP) and “Is Very Hurt” (<20 HP) Booleans, which themselves are set to be checked whenever I press one of those keys. Any more input on this topic would be sincerely appreciated.

Thank you so much for taking the time to help!

the function was only being called
once and never updating

I assumed it was just a debug thing. It has to be updated more than once, of course, you’re right.

But I still have to ask, since you
said it’s better to not have this sort
of thing being called constantly, is
there a better way to have this check
more than once?

Yes, ideally you should only update this when the player takes damage. It will be called once rather than 60 times every second…

It’s probably irrelevant in an isolated scenario like this but those Ticks do add up over time and placing things in Tick that simply do not belong there is a bad scripting practice (and makes it waaay harder to debug things when they go wrong)

So yeah, think about the place where you apply damage and reduce the player’s health - this is the place to update the widget data.

I have that affect my character’s
health are two key presses that
add/subtract 5 health for testing
purposes and I’m not sure how best to
tie the fill image to those functions.

Perfect spot to call the widget’s Custom Event and update the visuals. Do tell if you have problems implementing it.


edit: if you prefer experimenting on your own, have a look here:

The last “Example 3. Event Driven” deals with the very issue you’re having.

To give you a rough idea regarding how an event driven approach could work in your scenario with the minimum amount of elements.

Here is the player’s widget:

277259-capture.png

A custom event will update the progress bar - the code you have in Construct goes here.

And the player:

The player blueprint creates the widget and holds onto its reference. “F” key deals damage, deducts health and calls the widget’s Custom Event, feeding it with the updated health value.

In short : you press F, the widget gets a notification.

Hope it helps.

Thank you so much! This was really helpful!