askvity

How Do I Use UI Mask in Unity?

Published in Unity UI Masking 4 mins read

A UI Mask in Unity is used to restrict the visible area of UI elements. Child UI elements of a GameObject with a Mask component applied will only be visible within the shape of the parent's graphic.

Using the UI Mask component in Unity involves setting up a parent graphic element to define the mask shape and then placing the elements you want to mask as children under it in the Hierarchy. The Mask component then controls the visibility of these children based on the parent's graphic.

Here's a step-by-step guide based on the process:

Step 1: Prepare Your UI Elements

First, identify or create the UI element(s) you want to apply the mask to. This could be an Image, Text, Button, or any other UI component. These are the elements whose visibility will be controlled by the mask.

  • Action: Right-click on your Canvas in the Hierarchy -> UI -> [Your desired UI element, e.g., Image, Text].

Step 2: Create and Configure the Masking Image

You need a separate UI element that will serve as the boundary or shape for your mask. This is typically an Image component. The transparency and shape of this image define where the child elements will be visible.

  • Action: Right-click on your Canvas (or an existing UI parent) -> UI -> Image.
  • Tip: Give this GameObject a clear name like "MaskArea" or "VisibilityMask".

Step 3: Add the Mask Component

The crucial step is adding the Mask component to the GameObject you created in Step 2 (the "Masking Image").

  • Action: Select the Masking Image GameObject in the Hierarchy.
  • Action: In the Inspector, click "Add Component" and search for "Mask". Select and add the Mask component.

Step 4: Structure the Hierarchy

For the mask to affect a UI element, that element must be a child of the GameObject that has the Mask component attached.

  • Action: Drag the UI element(s) you want to mask (from Step 1) into the Masking Image GameObject (from Step 2 & 3) in the Hierarchy window. Make them children.

Hierarchy Example:

Canvas
  └─ MaskArea (GameObject with Image and Mask components)
       └─ ElementToMask (GameObject with Image/Text/etc.)

Now, the "ElementToMask" will only be visible within the bounds and shape of the "MaskArea" Image.

Step 5: Adjust Mask Settings (Optional)

The Mask component has a key optional setting:

  • Show Mask Graphic: Check this box if you want the Masking Image itself to be visible. Uncheck it if you only want it to define the masked area without being seen itself. By default, it's often checked.

  • Action: Select the Masking Image GameObject and toggle the "Show Mask Graphic" checkbox in the Inspector's Mask component.

Step 6: Position and Scale Your Elements

Position and scale the Masking Image GameObject to define the overall mask area. Then, position and scale the child UI elements relative to the Masking Image to control which parts of the child are visible through the mask.

  • Action: Use the Rect Transform tool in the Scene view or adjust values in the Inspector to position and size both the Masking Image and its child elements.

Step 7: Test and Refine

Run your scene to see the mask in action. You may need to go back and adjust the position, scale, or the Masking Image's source sprite to achieve the desired effect.

  • Action: Enter Play Mode (Press the Play button). Observe the masked element in the Game view.

By following these steps, you can effectively use the UI Mask component to create dynamic and controlled visual areas in your Unity UI.

Key Components

Here's a quick overview of the main components involved:

Component/GameObject Purpose Location
UI Element The graphic/text you want to be masked. Child of Masking Obj
Masking Image Defines the shape and area of the mask. Parent of UI Element
Mask Component The script that enforces the masking effect. On Masking Image Obj

Related Articles