Mask Filter Component
Overview
This component applies a mask to a UI component to hide or show parts of that component. It is used in conjunction with the Mask Source Filter component which defines the mask.
WebGL Demo
Properties
| Property | Type | Details |
|---|---|---|
| Mask | Mask Source Filter | The mask source to apply. |
| Invert Mask | Float | Whether or not to invert the mask. This value is merged with the Mask Source Filter InvertMask property. |
| Strength | Float | Strength of the effect. Default value is 1.0, range is [0..1] |
Usage
Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). Assign the MaskSourceFilter property to specify the mask to apply.
If you're stacking multiple filters, this component should always be the LAST one in the list to get correct masking results.
Note that unlike Unity's Mask component, the mask doesn't apply to child objects and can be assigned to any UI components in any hierarchy. You do however have to manually assign the Mask Filter components to point to this Mask Source Filter.
It is also possible to apply filters to the Graphic to modify the mask. Here's an example where a blur is applied to make the mask soft:
Usage with TextMeshPro
To use this filter effect with TextMeshPro - Text (UI) use the Filter Stack (TextMeshPro) component.