Any way to mask with UI Toolkit?

This seems like a fundamental feature but I can't for the life of me figure out how to mask objects in the UI.

How would one even go about making a progress bar that isn't a rectangle without masking? Or avatar images without it? Surely this has to exist but I can't see any way to do it.

 

It's only possible to use rectangular masks. You have to set overflow: hidden; on the masking element and define height and width. The child elements need to have position: absolute; so that their dimensions go beyond the parent element.

For the progress bar:
If the bar is just a simple rectangle with a background color (maybe with rounded corners), you can set its width in percent.

 

Take a look at this thread :
https://forum.unity.com/threads/hp-bars-at-runtime-image-masking-or-fill.1076486/#post-6944261

If you're not afraid of adding a dependency to com.unity.vectorgraphics and using SVG assets, this is the kind of thing you can do :

 

Interesting. Thanks for the suggestion. An SVG will work in the case of a bar, but unfortunately not in the case of an avatar profile (ie think a player's profile image inside a circle).

-edit- oh wait I think this example is suggesting using the SVG as a mask correct? If so that's perfect

 

Use a SVG as a mask, yes

In the screenshot above, the red parts are just red rectangles being masked by the parent VE.
The first parent VE is a SVG without any filling, whereas the second VE is another SVG using the same shape, but with filling.

For your use case, you should be OK by :
- giving to Unity the SVG of a filled circle
- make it the background of a VE
- set the VE overflow to hidden (it will be the parent)
- put children you need to mask inside this parent VE

 

The SVG approach works fine (although creates some aliasing which I don't love). The radius element was actually my first attempt but the issue with that is that it doesn't scale. I suppose it might if I used a transform scale instead but in my use case that's not really possible.

 

Did this happen?

 

Will anti-aliasing be improved in the near future? Here's what it looks like now:



source: https://onejs.com/wiki/SVG-Masking

 

i give up and use rendertexture instead.