Vector API を使用して放射状の進捗インジケーターを作成する

Version: 2023.2+

この例では、カスタムコントロールを作成し、Vector API を使用してビジュアル要素にビジュアルコンテンツを描画する方法を示します。

例の概要

この例では、ローディングバーの代わりに進行状況を表示するカスタムコントロールを作成します。進捗インジケーターは、パーセンテージを表示するラベルの周囲に、部分的に塗りつぶされた輪で進捗値を表示します。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

放射状の進捗コントロールとそのカスタムメッシュを作成する

RadialProgress ビジュアル要素を定義する C# スクリプトとカスタムメッシュを定義する C# スクリプトを作成します。USS ファイルでビジュアル要素をスタイルを設定します。

1. 任意のテンプレートで Unity プロジェクトを作成します。
2. radial-progress というフォルダーを作成し、ファイルを保存します。
3. radial-progressフォルダーに、以下のコンテンツを持つ RadialProgress.cs という名の C#スクリプトを作成します。

[!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. 再生モードに入ります。シーンに進捗インジケーターが表示され、進捗リングと値が動的に変化します。

その他の参考資料

• カスタムコントロールの作成
• Mesh API を使用して放射状の進捗インジケーターを作成する