How To Mask UI Elements In Unity

Objective: To learn how to mask UI elements in Unity.

Setting the Scene

To set the scene, I have 2 sprite images in my scene and I want to control the visibility of one of them (child) based upon the other (parent). So we are using a parent-child relationship for these 2 images (as shown below in the hierarchy screenshot).

In terms of behaviour — The child image itself should be invisible IF the child image is NOT on top of the parent. When the child is dragged on top of the parent, then it should become visible:

So the mask essentially restricts the child image to the shape of the parent.

Super cool UI feature! Let’s learn how to set this up.

Setup

I have a UI Canvas with 2 Image components as children. I have renamed the parent image to be called ‘Mask’ to help with clarity. Make sure to drag the other Image to be a child of the ‘Mask’ (as shown in the Hierarchy photo higher up).

On the ‘Mask’ game object, add a component called ‘Mask’ and we can leave the ‘Show Mask Graphic’ ticked for now.

We also need to make sure that the child game object has ‘Maskable’ ticked on their Image component:

That is all there is too it!

If you don’t wish too see the the graphic of the mask (parent), you can toggle that tick box off from earlier and you will get this result: