[Solved] Overlay icon on a button with text problem

OK so it’s more of a question than a problem. In the picture bellow you will see a button with an icon set to overlay and centered text that reads “Info” This text only appears if you hover over the icon. Of course this is HARD to read because the icon bleeds through the text area. I was wondering if I could mask out the icon “under” the text area so the text is readable?

image

Yes I know it’s weird answering my own question but I solved it by creating a Mask shader node and adding it after my icon atlas node. It takes in a vec2 for x and a vec2 for y if the texture coordinates fall in the mask range it discards the color.

Looks like I just added one more useful shader node to my library.

1 Like

You sorted it your own way but another way to handle this would have been to give label a shadow color. Then the text should stand off from the icon and be more visible.

1 Like