UI.Outline fills background

I have a semi-transparent UI Panel that I’d like to place a solid white 3 pixel border around. When I use UI.Outline I’m noticing that the Outline is filling the entire center background, and not just making an “outline” extending the edges of the panel graphic as I’d expect.

When the panel graphic is 100% opaque the outline works fine. Black background, white border.

If, for example, I drop the opacity to 50%, I’m seeing a light gray panel background (which comes from the Outline), but what I want is semi-transparent black.


Why is this happening?

Thanks.

2 Likes

for simple image like that
add the border to a small image and create a slices sprite

or for more complex single pixel outline

Thanks for your reply rakkarage. You’re right of course that I could create a new panel graphic. However, I’m trying to use the tools “in the box” if possible, without having to go to Photoshop, or attach something to my camera (which has other implications).

It just seems to me that when adding an “Outline” to something, it shouldn’t be auto-filling the interior as well. This seems like a bug to me in the Outline engine script.

I could also use two images to get the effect I want, one with 0% alpha, with an Outline that ignores the image alpha, and then a 2nd image with the actual background opacity I need. But that seems hackish to me.

If the Outline script were working as it intuitively seems it should, such workarounds wouldn’t be needed.

Well you can check the source of the existing Outline effect in the public UI source.

Alternatively, check out the NicerOutline and BetterOutline effects in the UI Extensions repo (link in sig)

Thanks SimonDarksideJ, but as I mentioned above, I’m trying to stick with vanilla and not create additional dependencies. Main point is that an Outline script should not be painting the interior of the thing it’s outlining. It seems like a bug to me. Or at least, an unintended (and unwelcome) side effect of the way Outline is implemented in the engine.

I think it should be fixed in the engine, and not simply ignored by looking elsewhere.

1 Like

UT have built the entire UI framework as an extensible framework so they don’t have to build everything. If you feel it is a bug, then I suggest you lot it using the Bug Reporter in the Unity Editor (under the help menu).

As far as I’m aware, this is by design of the existing effect. I don’t think it was written to work with transparencies.
@phil-Unity any thoughts?

I have same question.
who can help?
Best wishes.

My solution : create 4 borders individually with different images.
Right border configuration :

Top Border :
7473587--918680--upload_2021-9-5_13-43-17.png

Bot border :
7473587--918683--upload_2021-9-5_13-43-36.png

7473587--918673--upload_2021-9-5_13-41-1.png
7473587--918677--upload_2021-9-5_13-42-56.png

1 Like