Use Mesh API to create a radial progress indicator

Version: 2023.2+

This example demonstrates how to use the Mesh API to draw visual content onto a visual element.

Note: The Mesh API is a tool for advanced users. In version 2022.1 and later, if you only want to generate simple geometry, use the Vector API instead. For more information, see Use Vector API to create a radial progress indicator.

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
• USS
• イベントの処理
• MeshGenerationContext

Create the radial progress indicator and its custom mesh

Create a C# script to define the RadialProgress class, and expose the control to UXML and UI Builder.

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# scrip named RadialProgress.cs with the following content:

[!code-cs]

Create the custom mesh

Create a C# script named EllipseMesh.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