UI Material that changes color on overlapping / based on widget behind it

Development Programming & Scripting UI
,
1

I want to change the color of a font / widget in general based on the background behind it or if it is overlapping with another specific widget.

An example of what i want to achieve:

image
image1240×882 22.7 KB

The text is light blue but the parts that overlap with the black widget should change to white.
Same for the blue widget, which should change its color where it overlaps with the black one.

Is there any way to achieve this using UI Materials and Retainer Boxes?

2

Inside the material editor, you can use nodes like SceneTexture, Lerp, and Custom Depth to determine where the overlap occurs and change the color accordingly.

3

The SceneTexture node always returns a black color in my UI Materials.
Also I dont think it’s possible to render UMG Widgets to the custom depth buffer? At least i can’t seem to find a way to do so.

The closest i came to getting access to other widgets within the material was by using a RetainerBox, which gives you the option to pass all its contents into one Texture Parameter. But with that i couldn’t figure out how to determine overlap areas, as this is just one texture.