UI Toolkit several visual elements opacity

Hi there! I am creating custom tooltip controller which consists of label with text and pointer(visual element), it’s two separate elements in hierarcy
image
When I make them appear with transition animation on opacity it’s looks like they are blending and you can clearly see how pointer is appears on top of label’s background.
image
image

How can I make them looking similar when opacity is lower 100, to not blend?

Thanks in advance!

1 Like

Seems like it is impossible using native UITK : Canvas Group Equivalent?

Opacity is managed like browsers do. So it changes the opacity of children individually.

In your case, you should use a tooltip PNG file or draw the background yourself by using the generateVisualContent callback and MeshGenerationContext.painter2D : Unity - Manual: Use Vector API to create a radial progress indicator

Unfortunately we do not support that yet. Browsers do support proper composite opacity, but this need to be done through intermediary render texture on the gpu and updating theses extra textures causes a performance constraint that is hard to reconcile with the real-time and dynamic nature of games.

If I am not mistaken the feature is listed in our roadmap, as we understand that sometime the performance tradeoff is acceptable and required, but it will be op-in.

Going with a “pre baked” solution like @DarkRewar said would still be my recommended option if we had the feature for performance reasons.

You could possibly also do a single visual element and draw your geometry using the UITK vector api. That would enlable you to have a single mesh , without the overlapping, so there should be no visual issue.

Thank you for supporting!

Thanks, I will try!

There’ll still be issues with opacity. When you Fill() and Stroke(), opacity of less than 1 will treat the meshes separately even if everything is done in the same VisualElement’s generateVisualContent.

Can only be worked around by making sure there’s no mesh overlap (i.e. only use Fill()).

That’s just ridiculous. 2025 and UIToolkit still has no feature parity with UGUI?

“Performance issue” so it was somehow okay to support this in UGUI when players’ machines were much, much weaker, but not now?

2 Likes

And… UI Elements / UI Toolkit work began in 2017 / 2018 timeframe.

Supposedly “the industry” was clamoring for it.

I work in “the industry” and I have yet to meet one serious person who wants / wanted it.

And UITK only received world space mode this year.

I’m like one of the biggest Unity tankies on the planet and it drives me nuts to watch.

People would have wanted UITK… if it didn’t suck so much :melting_face:

Anyway Unity’s golden era is far past.

Where is composite opacity supported in uGUI? If you have a CanvasGroup and fade it, it will just fade each child element individually, just like UITK is doing.

In Unity 6.3, you can use an opacity filter to achieve this kind of effect. This involves render textures though, so an impact on performance has to be expected.

That being said, Painter2D, SVG or a basic mesh generated with MeshGenerationContext remain the recommended way to achieve a non-overlapping shape that looks like the icon from the original post.

4 Likes