Hey guys, i have a UI that has 3 buttons that are chroma keyed so that the black is used for transparency and i have them as buttons in my UI and am attempting to make them outline when the mouse hovers over them. The only issue is that rather than outlining everything that’s NOT transparent, its outlining the entire image, making a square. I will try to give a image out of photoshop to show what I’m going for because I’m not the best at explaining things, if anyone can help i would be forever grateful 
ALSO i know i can just import the photoshop version with outlines on them but i would prefer not to because not only would it be super time consuming but it would also increase the project file size which isn’t ideal lol. If that’s what i have to do I’m just going to avoid this all together but if someone knows a fix i will kiss you
What you could do is duplicate the icon, make it slightly bigger and change the z order to negative so it will appear under. now you just need to change its material to the yellow outline your are looking for and it should technically work
I was scrolling through my posts and saw this one and figured i was sure i could do it now lol, anyways it turns out i can but its not the best, A limitation i will go ahead and address is that you may need to scale down the image because the outline will clip if its too large. (I will post a example)
(MODIFY FOR TRANSPARENCY)
Just for the record, i do not know what performance issues may come from sampling a texture parameter 9 times in a material, if that is an issue, you might be able to get away with sampling just the adjacent or diagonal samples. Here is another quick and dirty method that you can use if you are worried about sampling a texture that many times, i personally would not recommend because the result is subpar but i figured i would share anyway.
Images that are too large may cause the outline to clip (Because its relying purely on texture space)
1 Like