How can I make custom progress bar in unreal engine?

Question

I am trying to make a health bar. I want a masked progress bar so I tried making another progress bar and moving according to the percent of the health in blueprint. But I couldn't find any documentation about it. How can I do it? Or is it possible? It should be like this:

Answer 1

You can make your own progress bar by a using shader.

The first thing you should do is mask the uvcoordinates horizontally.Step function lets you do this.

The step() interpolation receives two parameters. The first one is the limit or threshold, while the second one is the value we want to check or pass. Any value under the limit will return 0.0 while everything above the limit will return 1.0.

https://thebookofshaders.com/glossary/?search=step

Unreal doesn't have the step function, so you can use if expression.

---

Making Step Function

You can also use the hlsl step function, in the material editor. Make a custom node, with two inputs named A and B.then use below code:

if(A < B)
{
return 0;
}
else
{
return 1;
}

---

Create widget BluePrint and set this material to your image:

useful link: Gradient Functions