Skip to main content

Mask Source Filter Component

Overview

This component defines a mask that can be used to mask out other UI content. It is used in conjunction with the Mask Filter component which applies this mask to other UI components.

WebGL Demo

Properties

Component Screenshot

Property                            TypeDetails
Show Mask GraphicBoolWhether or not to render the Graphic, as well as using it for the mask.
Invert MaskFloatWhether or not to invert the mask. This value is merged with the Mask Filter InvertMask property.
StrengthFloatStrength of the effect.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). The Graphic will now define a mask that can be used to mask out UI rendering of other components that use the Mask Filter component.

FILTER ORDER

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.