Creating a radial gradient with specific start and end positions position using material BPs

[lacju87]

Hello,

I created this curved progress bar material with the following blueprint by creating a circle, subtracting two boxes to quarter it and then subtracting another circle from the remainder:

This will be used as a health bar that fills like this:

I’m struggling with the gradient though. I’ve spent a lot of time with the UIMaterialLab trying different gradient nodes.

The closest I’ve gotten is with these two nodes:

Which gives me this:

It seems the density variable controls the diameter of that first ‘step’ so If I can line up the end of that first ‘step’ with the beginning of my inner curve I can use the radius variable to constrain the entire radial gradient within my curved progress bar giving me a usable scale of gradient steps to control the fill % with.

Couple questions-

1. Besides pairing the two in a widget and trying different variables until it looks ok, is there a ‘right’ way to find the position of my curve box and use that to precisely configure the RadialGradientExponential node?

2. Am I going about one or both of these things the wrong way and is there a better approach to this?

Thanks for reading!

[MostHost_LA]

Try this

UE4 UI shader - Growing Circular Healthbar

If the bar has to fill vertically then the gradient to use is just your uV v portion being the one you use to make the gradient values…

[lacju87]

That video was really helpful. Follow up question though, can I create the textures needed for the video by making shapes like I did in my initial post and then convert the material into a texture?

[MostHost_LA]

Converting to a texture would require you to write the material to a render target.

You can use any texture, so long as your center point for the arc is in the middle of the square image - or you add parameters to define the circle’s center into the material.

The “end cap” addition can be problematic on some texture options, but generally it supports just about any texture one creates that is circular…

[lacju87]

Thanks for the follow up, I’ll give that a shot.

I found a tutorial for building a couple widgets using the UE MaterialLab and have realized I had gotten the different ways to do this mixed up.

The above and probably standard way to do this seems to use textures applied to a progressbar widget.

The MaterialLab approach looks to use a material applied to an image widget as the brush using animations to create the ‘fill’ effect instead of a progressbar widget.