Use Vector API to create a radial progress indicator

Version: 2023.2+

This example demonstrates how to create custom controls and use the Vector API to draw visual content onto a visual element.

Example overview

This example creates a custom control that displays progress, as an alternative to a loading bar. The progress indicator displays a progress value in a partially filled ring around a label that displays the percentage. It supports a value between 0 and 100, which determines how much of the ring is filled.

You can find the completed files that this example creates in this GitHub repository.

先决条件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

• UI Builder
• UXML
• USS
• Generate 2D visual content
• MeshGenerationContext

Create the radial progress control and its custom mesh

Create a C# script to define a RadialProgress visual element and a C# script to define the custom mesh. Style the visual element with a USS file.

1. Create a Unity project with any template.
2. Create a folder named radial-progress to store your files.
3. In the radial-progress folder, create a C# script named RadialProgress.cs with the following content:

[!code-cs]

Style the custom control

Create a USS file named RadialProgress.uss with the following content:

[!code-css]

Use the custom control in a UI Document and test

Use UI Builder to add the control and apply the USS stylesheet. Test the control with different Progress values.

1. Create a UI Document named RadialProgressExample.uxml.
2. Double-click RadialProgressExample.uxml to open it in the UI Builder.
3. In the Library window, select Project > Custom Controls > MyUILibrary.
4. Drag RadialProgress to the Hierarchy window.
5. In the StyleSheets section of the UI Builder, add RadialProgress.uss as the existing USS.
6. In the Hierarchy window, select RadialProgress.
7. In the Inspector window, enter radial-progress in the Name box.
8. In the Inspector window, enter different values in the Progress box. The percentage in the Viewport changes, and the green progress ring resizes.

Create logic to update the progress with dynamic values

Create a C# MonoBehaviour script to update the Progress property of the control with dynamic values for demo purposes. In the radial-progress folder, create a C# MonoBehaviour named RadialProgressComponent.cs with the following content:

[!code-cs]

Test the progress indicator in runtime

1. In Unity, select GameObject > UI Toolkit > UI Document.
2. Select the UIDocument in the Hierarchy window.
3. Add RadialProgressComponent.cs as a component of the UIDocument GameObject.
4. Enter play mode. The progress indicator appears in the scene, and the progress ring and value change dynamically.

其他资源

• Create custom controls
• Use Mesh API to create a radial progress indicator