エディターとランタイム UI で円グラフを作成する

Version: 2023.2+

この例では、Vector API を使用して、エディターとランタイム UI でグラフを作成する方法を示します。

例の概要

この例では、VisualElement 上に円グラフを生成し、それをエディターとランタイム UI に表示します。

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

要件

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

• 2Dビジュアルコンテンツの生成
• MeshGenerationContext

円グラフの作成

Vector API の Arc メソッドと Fill メソッドを使用して、円グラフをビジュアル要素に描画する C# スクリプトを作成します。

1. 任意のテンプレートで Unity プロジェクトを作成します。
2. ファイルを保存するために pie-chart という名前のフォルダーを作成します。
3. pie-chart フォルダーに、以下の内容の C# スクリプトを作成し PieChart.cs と命名します。

[!code-cs]

エディター UI に円グラフを加える

1. ファイルを保存するために Editor という名前のフォルダーを作成します。
2. Editor フォルダーに、以下のコンテンツを含む PieChartWindow.cs という C# ファイルを作成します。

[!code-cs]

To see the pie chart in the Editor window, from the menu, select Tools > PieChart Window.

ランタイム UI に円グラフを加える

Add the pie chart in the UIDocument GameObject in the SampleScene. To do so, first, create a C# script named in the pie-chart folderPieChartComponet.cs with the following content:

[!code-cs]

To see the pie chart in runtime:

1. サンプルシーンで GameObject > UI Toolkit > UI Document の順にクリックします。
2. Hierarchy で UIDocument ゲームオブジェクトを選択します。
3. UIDocument ゲームオブジェクトのコンポーネントとして PieChartComponet.cs を加えます。
4. シーンに円グラフを表示するには、再生モードに入ります。

その他の参考資料

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