Only display Control A where it overlaps with Control B

[garrickwinter]

Godot Version

4.2.2

Question

I’ve got an collection of interchangeable, rectangular sprites I’m using, and being rectangular is appropriate in most cases. But I want to sometimes display a little UI widget that shows only part of that asset, within a hexagonal frame around it, like a porthole window. The hexagonal frame is its own asset with an opaque hexagonal frame, and transparency in the center and in the outer corners. Currently, they’re both TextureRects.

Just putting the two assets on top of each other obviously makes the rectangle spill out to the sides of the hexagon; I’d like to hide all parts of the rectangle that are on the outside of the hexagon, but still display the area that’s inside the hexagon.

Is there a way I can do this without creating a new list of assets for each circle+hexagon combination? I know there are interesting things you can do with masking and shaders, but I’m not super familiar with the options we have for this kind of situation.

[gertkeno]

You can set your parent hexagon TextureRect to “Clip Children” in the visibility section. This will only display children pixels over parent’s opaque pixels.

[garrickwinter]

Awesome, thanks! That did it.