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"

Blurring Border of Progress Bar?

Is it possible to blur or feather the edges of the Progress bar in widgets? It cuts so sharply.

Product Version: UE 4.17
Tags:
more ▼

asked Oct 27 '17 at 03:43 AM in Using UE4

avatar image

0vr
182 18 29 40

(comments are locked)
10|2000 characters needed characters left

1 answer: sort voted first

You could use a texture or a material.

more ▼

answered Oct 27 '17 at 09:25 AM

avatar image

Everynone
11.2k 68 22 48

avatar image 0vr Oct 27 '17 at 03:06 PM

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.

avatar image Everynone Oct 27 '17 at 05:22 PM

If you want to feather out the edges with no streaching, look into 9-slice. Check out Setting Image States here: https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Styling/

If you want to feather out the progress bar' percentage edge, you could do something like that:

alt text

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:

alt text

In motion; the effect is exaggerated, of course: https://gyazo.com/a7426558a698e0145b61b4b586bfab3c

graph.png (193.7 kB)
mat.png (150.8 kB)
avatar image Everynone Oct 28 '17 at 07:28 AM

Here's a slightly more logical solution that uses a better tool for the job:

alt text

avatar image 0vr Oct 29 '17 at 05:33 PM

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?

avatar image Everynone Oct 29 '17 at 10:53 PM

A CustomRotator for the TextureCoordinate will do the trick:

alt text

capture.png (179.7 kB)
avatar image 0vr Oct 29 '17 at 11:03 PM

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. alt text

avatar image Everynone Oct 29 '17 at 11:09 PM

Maybe it's the Fill margin:

alt text

In motion:

https://i.gyazo.com/c3acb975736dca7681661a2d720cd3e8.mp4

margins.png (35.3 kB)
avatar image 0vr Oct 29 '17 at 11:14 PM

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.

avatar image 0vr Oct 29 '17 at 11:27 PM

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.alt text

avatar image Everynone Oct 30 '17 at 01:52 AM

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: https://i.gyazo.com/9e95906d0635113df313a823b7f0d5bf.mp4

avatar image 0vr Oct 30 '17 at 02:03 AM

Yeah it's back to the sliding small square like I previously pictured.

Here's my set up.alt text

-1.png (67.3 kB)
-2.png (77.3 kB)
-3.png (26.4 kB)
-4.png (201.9 kB)
avatar image Everynone Oct 30 '17 at 02:25 AM

The SmoothStep node looks weird :|. Can you double click it and show here what you see? Is X the alpha?

alt text

capture.png (85.0 kB)
avatar image 0vr Oct 30 '17 at 02:32 AM

alt text

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!!!!

-1.png (66.3 kB)
avatar image 0vr Oct 30 '17 at 02:33 AM

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?

avatar image Everynone Oct 30 '17 at 05:56 PM

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: https://docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/Functions/Creating/index.html

avatar image 0vr Oct 30 '17 at 06:13 PM

Ah, that did the trick! Thanks! It must've been a custom one from a material i downloaded.

(comments are locked)
10|2000 characters needed characters left
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