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
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.
How can I make them looking similar when opacity is lower 100, to not blend?
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.
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.
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.