Custom Progress Bar WITH color change

Hello everyone!

I’m trying to make a custom shaped progress bar that can change color based on value

hearts

I made a material for User interface and then an instance to have control on the Fill and color values

instance

I then added that to a Widget Blueprint “IconCustomColor” in which I created dynamic material instances and set Vector/Scalar parameter values

And finally I added this IconCustomColor Widget BP to my main Widget

My Character BP is called BP_Lion and I must do something wrong, I can’t get the casting rightor whatever to make everything work




Any idea how to make it work?

Is it actually a character class (check upper right corner of BP - Parent Class: ??? Are you possessing that character?

Doing this:

image

Throws those errors?

it seems your ‘Target’ variable below has a blue note…maybe because you are tying to cast some variable that is the class of the cast already. also It seems Target variable is empty at the moment of the cast to store inside ‘As BP Lion’

I dont know where you assign a value to ‘Target’ value and how. But if you do, sometimes the asignment is being executed after for query the variable somewhere.

A little delay before the cast and set would work in that case.

Let me try to show you one approach to ‘automatically’ adjust the bar color with the bar percent value on next reply :slight_smile:

  1. create a color curve asset:

image

image

edit the curve color to make it change the color from 0 to 1
in this example I set 0 as red and 1 as green

  1. create the material. This is the material I did for this example:

It has 3 parameters: BG COLOR, FG COLOR and PROGRESS. changin progress value from 0 to 1 will wipe between both colors (BG and FG)

  1. create a widget for the bar:

Its just an Image with the material I did.

in the pre construct create a dynamic material instance of the material and set to the bar. Then just add a UPDATE BAR function to update the color and wipe with the Percent Variable.Tag the percent variable as public so it can be accessed from a parent widget as direct parameter. Also add a color curve variable with the initial curve color asset.

Now you can control progress and color just by calling UpdateBar function.

Now create another test widget and drop this one as child widget. Note on the right panel you will have access to the percent variable…if you change it, the wipe and color changes:

I hope this helps.
Good luck! :slight_smile:
Dany

@eldany.uy This is nice but I think OP is happy with their material and has problems with casting.

1 Like

oh ok…maybe I confused because of the topic. Sorry! :slight_smile:

is the variable of type BP_Lion? In that case the cast is redundant and will not work. Notice the blue “NOTE” information below the cast. It’s usually that it is not needed, so it might fail by default.

If target is a BP_Lion variable then just pass in target to the set “As BP Lion” node.

Oh wow that’s actually an extremely efficient and simple way of changing progress and color

But the issue remains

Let’s take your very good example to showcase my issue

So I did everything you mentionned

I can change manually the percent of the child widget in my main widget

However I don’t understand how to make it work dynamically in game. It keeps that manually put value and doesn’t change

So in the Main Widget Graph I made a cast to my character BP (the cast is successful) to get his health (it works fine on the classic unreal progress bar but I can’t make it work on custom stuff

And I plugged the result of my health function as a “SET” of the Widget “percent” variable but…doesn’t seem to work

Here is the “Get Health” function binded to a normal UE progress bar (and it works fine in game)

bindclassicbar

On the regular UE progress bar, it’s fine and the percent value binded to the “Health” is dynamic and working when I press play

So to summarize:

  • Widget “Percent” variable can manually be modified and it works
  • Cast to character BP (BP_Lion) is successful to get health data and set a “Health” variable
  • “health” variable works in game (tested with print strings), if my character is hurt, it goes down

ISSUE:
→ Doesn’t update the SET Percent Variable when feeding “Health”

I’m missing something clearly

thank you all for all the responses, you guys are super kind!
I hope we can figure this out!

1 Like

It’s strange why it doesn’t “bind” the value
Hmmm I’m out of ideas
Casting doesn’t seem to do anything…feeding a proper value…neither

Yes what he/she did is great but it’s still not working in game unfortunately