Masks affect the visibility of objects within their shape. If an object is affected by a mask, any part of it outside the mask’s restricted area will be invisible. The visible area of a mask can either be determined by an Image with the Mask component or a Rect Transform with the Rect Mask 2D component.

With UI, masking can be used for scrolling menus, so items that exist outside of the menu’s area will not be visible. It is also used to cut out images. For example, the following image shows a cat’s image being cut out by a circular mask:

Figure 12.1: Circular Mask Example in the Chapter12 scene

You may note that the edges of the cat with the mask don’t look great. To avoid this, ensure that you use sprites with appropriate image resolutions and try different filtering modes on the Sprite’s Import Settings.

The Mask component

The Mask component can be added to any UI object with an Image component...