Overlapping images with alpha

Hey guys,
I found out that if you overlap an image with opacity of, for example, 50%, with another image of 50% opacity, the alpha of the two images on the area of overlap gets added. Instead I would like a system of clipping of an image during the overlap.

Here is a visual example of what I want and what I get:

What I want:

What I get:

I found this topic on Reddit:

that regards the exact problem of mine.
The only solution provided is to have some custom Slate code to make the clipping of the second widget. The topic is 2 years old. Is there any easy way at the moment to make this possible? Is there any material to learn on how to start making this code (I searched on Google without luck), or do I have to find it on my own inside the engine source?
Thank you in advance!

Hey. Do you want them to be static or dynamic? Do you need different shapes or just these planes with sharp edges? You could use a RetainerBox for the bottom plane and use an EffectMaterial with a “square” mask. I tried that once but couldn’t wrap my head around the alpha in the EffectMaterial :confused:

Hey, thank you for the answer! I want possibly it to be dynamic (for example if I have to animate the box, then the result would be dynamic), how can I apply the “square” mask inside the material? I think I need some way to know when the final opacity is greater than the texture one, but how can I do that?

I created a widget with 2 images, one is just placed into the widget with 0,5 alpha, the other one is inside a retainer box with full alpha. The retainer box gets an effect material (I called it M_Retainer) with the texture parameter set to Target.


Then inside the M_Retainer material I created these nodes (the square mask was here on the forum) with the material set to UserInterface and translucent.


Now you could create a dynamic material instance, set the values for x1,x2,y1 and y2 after calculating if the two images are overlapping and set the material to the retainer box to get something like this:

1 Like

Thank you for the help! I can’t try this at the moment, but I think it should work! :grinning: