3D UMG Widget low quality / transparency issues

Having some issues with 3D UMG widgets. Thisis the basics behind the system.

So this is a mockup of what i’m trying to create:

But I can’t get the background image to be at 50% transparency despite using Appearance>Color and opacity. It’s either 100% colored or 100% invisible. I’ve even tried importing the image with transparency applied in photoshop but i get the same result.
Menu with bg a.png

I’m also having trouble with the rendering quality of opacity on some image assets such as my selection highlight. The asset should have a flowing transparency gradient but only displays up to a certain opacity.


menu no bg a.png

And finally i’m having some issues with overall quality, i’m often getting a jagged black border around multiple objects including images, buttons and text. All assets are clear in the widget editor but not when displayed in 3D space. You may also be able to notice it in other screenshots.
border  jagged a.png

Any troubleshooting tips for these issues appreciated. ty.

I have this exact problem, was a solution found?

So it turns out that by default blend mode is set to Masked on the 3D Widget in the World Outliner and setting it to Transparent fixes the problem.

2 Likes

Thank you Tomster954! It was so confusing because it would blend masked by default so it appeared to have transparency working on some level, and I’d been spending tons of time messing with compression and import settings.

I have tried your method, it only works with HUD and not 3D widgets

Tested on 4.22

It works, after setting it to transparent you have to click on Tint color and opacity and set A (Alpha) to a lower level

Hey,

I couldn’t make it work in 4.24.

I tried to change the tint opacity, the brush opacity, and the material opacity (material domain = User Interface).

I can’t get a proper transparency in game, it’s always an all or nothing situation.


If anyone could make it work, i’m very interested in their solution.

Thanks
Cedric

Instead of doing it via material - do it via Widget Component

You basically get the Widget Component → Get Owner(or parent, not sure) → Cast to your widget name - now you have reference to the widget itself, now with a code you basically change the alpha in the brush tint node of the widget reference you casted to

Put simpler:
You cast to the real widget reference (like said above), save it as variable and have access to the widgets components like images, buttons etc. and you can (and should) modify their variables like the Alpha to make it transparent