3D UMG Widget low quality / transparency issues

Having some issues with 3D UMG widgets. [This][1] is the basics behind the system.

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

(made in photoshop)
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.

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.

98436-menu+select+asset.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.

Any troubleshooting tips for these issues appreciated. ty.

same issue here

Hey SamWal,

I just ran a test on my end after downloading the texture in question, and it seems to work fine for me.

Can you provide me with your widget blueprint so I can investigate the issue in greater detail?

Thank you,

Instead of using textures as SamWal, I try getting a transparent border.

  1. Make new Project (c++ shooter in my case)
  2. Make new Widget, insert border, set BrushColor.Alpha = 0.2
  3. Make actor, add Widget component, set widget
  4. List item
  5. place actor in the world → Border not visible (is also not visible within the actor viewport)
  6. Set Widget Border BrushColor.Alpha = 0.5 → widget visible, but fully opaque.

Alpha < 0.4: Invisible. Alpha > 0.4: Fully opaque. This is somewhat the
same what the third image of SamWal is showing. Fully opaque until a
certain treshold where it gets fully
invisible.

UE4.13/4.14

Hey guys,

So after testing I believe I have found the reason as to why this is occurring. Since your border/texture you are trying to render has translucency, you need to set the Blend Mode within the Actor Blueprint for the Widget itself from ‘Masked’ to ‘Transparent’, as seen in the below image.

Blend Mode - Transparent

Border Alpha 0.3

As you can see it is rendering as expected. Since you are using a gradient from 1.0 to 0.0 for opacity, using the masked blend mode is going to clip out anything up to the masked clipping value/threshold. This is why you need to use the translucent blend mode so you can render the entire gradient.

Let me know if you have further questions.

Thank you,

thanks Andrew, missed that one.
Gues it would be better setting the default to translucent.