Distortion effect on UMG User Interface Material

Hi,

I have a distortion material which I would like to use on the background image of my Main Menu on specific locations:

However, when changing Material Domain from Surface to User Interface, I’ve lost the Refraction node:

How would I go into making a Distortion effect without the Refraction node? I know how to localize the effect on these spots, but not making it.

Thank you.

Hi, it’s more kinda “heat from flames” distortion, I have the material setup for in-game but can’t seem to get it reproduced over to UI widget.

Well, I have no idea how to fake distortion on a UI material, but if you want to try to cheese it, maybe you could just render target something with the original material on it?

This video shows how to take something existing in world and put it into your UI:
How to render a 3D Model in UMG || Blueprints || UE4 TUTORIALS - YouTube

Is it a specific kind of distortion that you need? I believe UMG has a background blur widget option. Is that “distortionish” enough? :slight_smile:

Nice, don’t know why I didn’t think of that.

Thanks, I’ll give it a try, although I would like to know how to do it the correct way.

Hey!

You can distort portions of a texture by manipulating its UVs with a normal map. I’ve attached an example material below. You can also see the flames mask I extracted from your background. In your UMG UI you can have the flames be a separate layer (an Image component) on top of the background, so only the flames will be distorted AND you can make a material instance for each one.

How you mix the distorted flame with your background is up to you, either in the material or having the flames be their own Image in your UI with the distorted material. In my example I’ve done it in the material to make it easy on myself but I would suggest going the other route.

319058-flame-mask.png

319059-final-result.gif

1 Like

Thanks man, it really helped a lot :slight_smile: here’s how I made it final:

Then, on the Menu Widget, I added an Image component on the flame position and attached the material to it.

Thanks again.