x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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 solution from which I created the following setup, but it's not working completely.

alt text

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?

Product Version: UE 4.21
Tags:
healthbar-1.png (119.5 kB)
more ▼

asked May 18 '19 at 05:01 PM in Blueprint Scripting

avatar image

Arro-Wing
10 3 2 4

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

2 answers: sort voted first

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!

more ▼

answered May 18 '19 at 08:02 PM

avatar image

Arro-Wing
10 3 2 4

avatar image Everynone May 18 '19 at 08:18 PM

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:

https://docs.unrealengine.com/en-us/Engine/UMG/HowTo/EventBasedUI

The last "Example 3. Event Driven" deals with the very issue you're having.

avatar image Everynone May 18 '19 at 08:33 PM

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:

alt text

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

And the player:

alt text

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.

capture.png (44.2 kB)
cap2.png (136.2 kB)
avatar image Arro-Wing May 18 '19 at 08:44 PM

Thank you so much! This was really helpful!

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered May 18 '19 at 06:03 PM

avatar image

Everynone
15.2k 77 25 62

avatar image Arro-Wing May 18 '19 at 06:14 PM

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.

avatar image Everynone May 18 '19 at 06:16 PM

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?

avatar image Everynone May 18 '19 at 06:18 PM

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.

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question