blend the background on UMG UI widgets

anonymous_user_6de32450 · January 22, 2019, 4:39pm

Hi all, I’m an experienced programmer but new to unreal. looking for the answer for this on forums, answerhub, stackoverflow, google, couldn’t find a solution.

Working on some nice UI widget animation and have a problem with the blending:
Few panels (rectangles) on the UI with some content on each, like text and images, moving and occluding each other, but with a stationary background image that is visible inside them.

something like the attached image, but where the white background of the logos shows the pokemon background instead, but they still occlude each other.

Not sure how to configure the materials of the background image and the logo image to achieve this.

Thanks for the help!

alt text

Bariudol · January 25, 2019, 12:09pm

You need to create a Material of the logo you want to use (it must have a mask in the alpha channel). Set the material domain to user interface and the blend mode to masked. Set up the material as shown.

In your UMG use the material you created ins tead of the image.
If your image does not have an alpha chanel you can use the red chanel and use a power node to givi it contrast or a desaturation node to make it black and white.

I would recomend you to take a look at the documentation for materials and umg

Hope this helps. Have a nice day!