Version: 2022.1
言語: 日本語
2D ビジュアルコンテンツの生成
Use Vector API to create a radial progress indicator

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

バージョン: 2022.1 以降

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

例の概要

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

円グラフはシーンに表示され、円グラフはエディターウィンドウに表示されます。
円グラフはシーンに表示され、円グラフはエディターウィンドウに表示されます。

この例で作成するすべてのファイルは、GitHub リポジトリ にあります。

要件

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

円グラフの作成

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

  1. 任意のテンプレートで Unity プロジェクトを作成します。

  2. ファイルを保存するために pie-chart という名前のフォルダーを作成します。

  3. pie-chart フォルダーに、以下の内容の C# スクリプトを作成し PieChart.cs と命名します。

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    public class PieChart : VisualElement
    {
        float m_Radius = 100.0f;
        float m_Value = 40.0f;
    
        VisualElement m_Chart;
    
        public float radius
        {
            get => m_Radius;
            set
            {
                m_Radius = value;
                m_Chart.style.height = diameter;
                m_Chart.style.width = diameter;
                m_Chart.MarkDirtyRepaint();
            }
        }
    
        public float diameter => m_Radius * 2.0f;
    
        public float value {
            get { return m_Value; }
            set { m_Value = value; MarkDirtyRepaint(); }
        }
    
        public PieChart()
        {
            generateVisualContent += DrawCanvas;
        }
    
        void DrawCanvas(MeshGenerationContext ctx)
        {
            var painter = ctx.painter2D;
            painter.strokeColor = Color.white;
            painter.fillColor = Color.white;
    
            var percentage = m_Value;
    
            var percentages = new float[] {
                percentage, 100 - percentage
            };
            var colors = new Color32[] {
                new Color32(182,235,122,255),
                new Color32(251,120,19,255)
            };
            float angle = 0.0f;
            float anglePct = 0.0f;
            int k = 0;
            foreach (var pct in percentages)
            {
                anglePct += 360.0f * (pct / 100);
    
                painter.fillColor = colors[k++];
                painter.BeginPath();
                painter.MoveTo(new Vector2(m_Radius, m_Radius));
                painter.Arc(new Vector2(m_Radius, m_Radius), m_Radius, angle, anglePct);
                painter.Fill();
    
                angle = anglePct;
            }
        }
    }
    

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

  1. ファイルを保存するために Editor という名前のフォルダーを作成します。

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

    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    public class PieChartWindow : EditorWindow
    {
        [MenuItem("Tools/PieChart Window")]
        public static void ShowExample()
        {
            PieChartWindow wnd = GetWindow<PieChartWindow>();
            wnd.titleContent = new GUIContent("PieChartWindow");
        }
    
        public void CreateGUI()
        {
            VisualElement root = rootVisualElement;
            
            root.Add(new PieChart());
        }
    }
    
  3. エディターウィンドウで円グラフを見るには、メニューから Tools > PieChart Window を選択します。

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

SampleScene の UIDocument ゲームオブジェクトに円グラフを加えます。

  1. pie-chart フォルダーに、以下のコンテンツを含む PieChartComponet.cs という C# スクリプトを作成します。

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UIElements;
    
    [RequireComponent(typeof(UIDocument))]
    public class PieChartComponent : MonoBehaviour
    {
        PieChart m_PieChart;
    
        void Start()
        {
            m_PieChart = new PieChart();
            GetComponent<UIDocument>().rootVisualElement.Add(m_PieChart);
        }
    }
    
  2. サンプルシーンで GameObject > UI Toolkit > UI Document の順にクリックします。

  3. Hierarchy で UIDocument ゲームオブジェクトを選択します。

  4. UIDocument ゲームオブジェクトのコンポーネントとして PieChartComponet.cs を加えます。

  5. シーンに円グラフを表示するには、再生モードに入ります。

その他の参考資料

2D ビジュアルコンテンツの生成
Use Vector API to create a radial progress indicator