Adding outline to a semi-transparent image fills the image center ?

[drewdough]

hi,

Simple question: I have a semi-transparent black image that I want to add a solid white outline to.

When I add the white outline, it fills the entire image with the white, making the center of the image white-washed.

This seems like such a simple thing that I can’'t understand why it does this. How do I make an image semitransparent with a solid border? (see below image, the center appears grey, because the white from the border is being filled in… if there’s no transparency, it works fine (black center with white border)).

I did search and found a similar thrtead, but no resolution:UI.Outline fills background - Unity Engine - Unity Discussions

I did try doing what this person says and tried UIExtensions ‘NicerOutline’ - it has the same exact issue though.

Thanks for any help!

[Izzy2000]

ahh… is it something close to this?

kissUI - 9 Sliced Image - Middle Translucent

[drewdough]

thank you Izzy! this definitely helps me a lot!

I was able to make the border with NO center by changing image ‘Source Image’ to ‘UISprite’, and then un-checking Fill Center.

But what’s the best way now to actually add the semi-transparent center?

I added another image to the scene and made it the same width/height/location as this border image, and then added my semi-trapsarent background. But the problem is now that this transparency is grey-washing the border. I want a 100% solid white border with a 50% transparent black center. What’s the best way to do this? Do I just make the second, ‘fill image’ smaller and offset from the border?

Also - is there a way to set the thickness of this border in pixels?

thanks again!