Is it possible to blur or feather the edges of the Progress bar in widgets? It cuts so sharply.
You could use a texture or a material.
I am. Is there something I can do in the material to blur the edge?
It reveals the image of the “fill” as the bar fills. I could make it stretch probably and blur the ends of the image but that’d look terrible.
If you want to feather out the edges with no streaching, look into 9-slice. Check out Setting Image States here: Styling | Unreal Engine Documentation
If you want to feather out the progress bar’ percentage edge, you could do something like that:
Dynamic Material Instance is assigned as the progress bar material and is fed percentage value to shift the vertical band around. (using a slider here as it’s easier to test)
Using a band here to generate a falloff but there are other methods, too. This happens to be fairly flexible:
In motion; the effect is exaggerated, of course:
First off, thanks for chiming in. This seems to work but it’s hard to tell. I’m using a vertical bar. In the preview it looks like this is working horizontally and in-game it just seems to be very transparent. How do I adapt this for a vertical bar?
It looks right in the preview now but in-game it looks like this (first pic is start of game, then after taking some hits)
The fill image is a small square that moves down the bar but it should be working like a normal health bar that decreases like you’d expect.
Maybe it’s the Fill margin:
In motion:
I have that set to 0 but maybe when it’s creating the dynamic material and setting it in the Construct event like you have here it overrides that? I’m going to try and set it in blueprints and see.
Ok so now it’s starting from the middle at 100% opacity, no fill appearing beneath it, and then progressively gets to 0 from there to the top. So it’s hard to see near the top at all. I’m using all the same values you are by the way. I just set the size to the texture size.
It seems that you are replacing the brush for the entire widget here rather than just the progress bar’s Fill image. Did you try to set it up the way I did in the very first screenshot using SetMembersInStruct?
I just tried it with a texture and it works quite ok:
The SmoothStep node looks weird :|. Can you double click it and show here what you see? Is X the alpha?
That was it! I have two identically named SmoothStep nodes when I type in SmoothStep in the finder. This was the contents of the one that was giving me trouble. it looks very similar even from the inside.
But now I swapped it out for the other one it’s working like a charm! Thank you!!!
Out of curiosity, do you have this too? Or is it from some kind of plugin i installed to the engine? If i can, should i somehow get rid of this other one or is there a way to label it so i can tell them apart?
No, only one here. If it’s a custom material function, you can find it in the content browser and disable ExposeToLibrary:
see Publishing Your New Function here for more info:
Ah, that did the trick! Thanks! It must’ve been a custom one from a material i downloaded.