UITK / Masking

Masking is a technique used to control which portions of a UI element are visible. Within UI Toolkit, you can apply the USS property overflow: hidden to hide any parts of an element that extend beyond its parent.

Unity Documentation

Refer to the official Unity documentation.

Unity Masking Documentation

Overwatch-Style Progress Bar

This tutorial focuses solely on implementing the masking technique—not on creating the entire progress bar.

1 - Install the Vector Package

To enable masking with custom shapes, you’ll use SVG. To apply an SVG image as a background, you must install the com.unity.vectorgraphics package.

The SVG background image will be applied to the parent element.

Below is the SVG used in this example. Feel free to download and use it:

Import settings of the SVG:

2 - Create the Visual Elements

Let’s set up simple parent-child elements for the masking example:

3 - Style with Background-Repeat

4 - Controlling Background with Script

Use these functions to adjust the background image size, which in turn determines the number of repeats. And set the width of the fill element to control the fill amount.