Unity 2022.3에서 파이 차트 생성하기

이 문서는 Unity의 UI Toolkit을 사용하여 에디터 및 런타임 UI에서 파이 차트를 생성하는 방법을 소개합니다.

개요

이 예제에서는 VisualElement를 사용하여 파이 차트를 생성하고 이를 에디터 및 런타임 UI에 표시하는 방법을 설명합니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위해 작성되었습니다. 시작하기 전에 다음 내용을 숙지해야 합니다:

• 2D 시각적 콘텐츠 생성
• MeshGenerationContext 이해
• 파이 차트 그래프 생성

프로젝트 설정

1. Unity 프로젝트 생성: 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.
2. 폴더 생성: pie-chart라는 폴더를 만들어 코드를 저장합니다.

C# 스크립트 작성

1. PieChart.cs 작성

pie-chart 폴더에 PieChart.cs라는 이름의 C# 스크립트를 생성하고 다음 코드를 추가합니다:

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;
        }
    }
}

2. PieChartWindow.cs 작성

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. PieChartComponent.cs 작성

이제 pie-chart 폴더에 PieChartComponent.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);
    }
}

구현 단계

에디터 UI에서 파이 차트 추가

1. Editor 폴더에 PieChartWindow.cs를 사용하여 파이 차트를 생성합니다.
2. 메뉴에서 Tools > PieChart Window를 선택하여 새 창을 엽니다.

런타임 UI에서 파이 차트 추가

1. SampleScene에서 GameObject > UI Toolkit > UI Document를 선택합니다.
2. Hierarchy에서 UIDocument 게임 오브젝트를 선택합니다.
3. PieChartComponent.cs를 UIDocument의 컴포넌트로 추가합니다.
4. 플레이 모드로 전환하여 씬에서 파이 차트를 확인합니다.

추가 리소스

이 문서에서 제공한 예제 외에도 Unity의 Vector API를 활용하여 더 다양한 2D 시각적 콘텐츠를 생성할 수 있습니다. 커뮤니티와 공식 문서에서 더 많은 정보를 찾아보시기 바랍니다.

결론

이 가이드를 통해 Unity에서 UI 요소로 파이 차트를 생성하는 방법을 배웠습니다. 이 예제를 기반으로 다양한 기능을 추가하거나 개선하여 더욱 시각적으로 매력적인 UI를 구현할 수 있습니다.