Fading UMG Image which is a Material

Hi all,

I know I can fade images by plugin an Animation into the Color and Opacity’s Opacity channel and this has been working really well for standard .TGA images etc.

My problem is that I need to plug an Animation to do the exact same to an Image that is a Material. Now with my limited knowledge, I’m guessing this cannot be done via a UMG Animation and needs to be done via the Material itself?

The material in question already uses transparency masks (it’s a radial progress bar), so I need an ‘overall’ transparency maybe?

Any help you can provide so I can fade this Radial Ring in and out would be greatly received… I’ve been pulling my hair out for a good few days now.

Here are a couple of images of the material and how it’s setup in the UMG if that helps…

Hi fallingbrickwork,

You can still manipulate the overall opacity using an animation in the widget Blueprint. Simply add new animation > select the image widget > add a color and opacity track and key frame it as normal. (see screenshot)

I was able to get the image widget to change opacity just fine without changing the material.

hope that helps,

Ed

I tried this but the fade just jumps from fully transparent to full opaque as soon as the Animation time moves off zero.(The issue doesn’t appear to be time related though. As soon as the opacity is anything other than 0.0, it jumps to 1.0)

The same is true of he Fade Out Animation, although in this case it stay fully opaque for the entire animation until it reaches zero opacity (0.0), when it disappears.

That sounds like to me you have constant interpolation set for your animation curves. Click on the curve editor with opacity selected, then select your opacity keys on the time line and click on linear interpolation. (look at screenshot for reference.)

Hi Ed,

Thank you kindly for taking so much time over this issue.

I’ve tried changing the fade in curve to linear interpolation and I’m still getting the same results. See images below.

First image is time at zero and opacity of 0.0 (this is correct)

Second image is time just off zero and opacity of image visually is 1.0 (graph says 0.062).

Hi Fallingbrickwork,

Edit This is expected behavior with how masked Opacity works. It takes a number value (0 - 1) and hides the image based off this value. The opacity animation in the widget BP works globally so the engine decides to hide the image as it reaches the masking threshold. You will need to use the translucent blend mode if you want it to fade in and out.

Sorry for the initial misinformation, it just occurred to me what was going on!

Hope that helps,

Ed

1 Like

Ed, you are a star. If I upgrade the engine to 3.13.1 will this fix it, or is the issue also in the current version?

Like I said, again. I’ll change to translucent and await any additional feedback.

Ah right, many . I’ll need to think my material again then, as changing to translucent just made the image a black square. It looks worse than not fading; I need the mask.

hmmm, you should be able to get what you want with a translucent material. I may be able to help you get rid of that black square if you post a screenshot of your material graph after you changed to translucent.