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.

例の概要

この例では、ローディングバーの代わりに進行状況を表示するカスタムコントロールを作成します。進捗インジケーターは、パーセンテージを表示するラベルの周囲に、部分的に塗りつぶされた輪で進捗値を表示します。0 から 100 までの値で表示され、それにより輪がどの程度塗りつぶされるかが決定されます。

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

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

• UI Builder
• UXML
• USS
• 2Dビジュアルコンテンツの生成
• 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. 任意のテンプレートで Unity プロジェクトを作成します。
2. radial-progress というフォルダーを作成し、ファイルを保存します。
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]

UI Document でカスタムコントロールを使用しテストする

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

1. RadialProgressExample.uxml という名前の UI Document を作成します。
2. RadialProgressExample.uxml をダブルクリックして UI Builder で開きます。
3. Library ウィンドウで、Project > Custom Controls > MyUILibrary を選択します。
4. RadialProgress を Hierarchy ウィンドウにドラッグします。
5. In the StyleSheets section of the UI Builder, add RadialProgress.uss as the existing USS.
6. Hierarchy　ウィンドウで、RadialProgress を選択します。
7. Inspector ウィンドウの Name フィールドに radial-progress と入力します。
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. Unity で、GameObject > UI Toolkit > UI Document を選択します。
2. Hierarchy ウィンドウで UIDocument を選択します。
3. UIDocument ゲームオブジェクトのコンポーネントとして RadialProgressComponent.cs を加えます。
4. 再生モードに入ります。シーンに進捗インジケーターが表示され、進捗リングと値が動的に変化します。

その他の参考資料

• カスタムコントロールの作成
• Use Mesh API to create a radial progress indicator