Unity 사용자 매뉴얼 (2022.3) - 방사형 진행 표시기 만들기

개요

이 문서는 Unity의 UI 툴킷과 메시 API를 사용하여 방사형 진행 표시기를 만드는 방법을 설명합니다. 이 예제에서는 사용자 정의 컨트롤을 사용하여 진행률을 표시합니다.

선행 조건

• Unity 에디터 경험
• UI 툴킷 이해
• C# 스크립팅 기본 지식

방사형 진행 표시기 구현

이 구현은 두 개의 C# 파일로 구성되어 있습니다: 1. RadialProgress.cs - 진행 표시기 요소를 정의하는 클래스 2. EllipseMesh.cs - 타원형 메쉬 생성을 위한 클래스

RadialProgress.cs

이 코드는 방사형 진행 표시기를 정의합니다. 이 클래스는 UI 요소를 생성하고, 진행률을 표시할 수 있습니다.

using Unity.Collections;
using UnityEngine;
using UnityEngine.UIElements;

namespace MyUILibrary
{
    // 방사형 진행을 표시하는 요소
    public class RadialProgress : VisualElement
    {
        // UXML Traits 정의
        public new class UxmlTraits : VisualElement.UxmlTraits
        {
            UxmlFloatAttributeDescription m_ProgressAttribute = new UxmlFloatAttributeDescription()
            {
                name = "progress"
            };

            public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
            {
                base.Init(ve, bag, cc);
                (ve as RadialProgress).progress = m_ProgressAttribute.GetValueFromBag(bag, cc);
            }
        }

        public new class UxmlFactory : UxmlFactory<RadialProgress, UxmlTraits> { }

        public static readonly string ussClassName = "radial-progress";
        public static readonly string ussLabelClassName = "radial-progress__label";

        // 필요 변수 및 메소드 정의 생략
    }
}

EllipseMesh.cs

이 코드는 진행 표시기의 시각적 요소인 타원형 메쉬를 생성합니다.

using UnityEngine;
using UnityEngine.UIElements;

namespace MyUILibrary
{
    public class EllipseMesh
    {
        // 멤버 변수 및 메소드 정의 생략
    }
}

스타일 시트 (USS)

진행 표시기의 스타일을 설정할 수 있는 USS 파일입니다.

.radial-progress {
    min-width: 26px;
    min-height: 20px;
    --track-color: rgb(130, 130, 130);
    --progress-color: rgb(46, 132, 24);
    --percentage-color: white;
    margin: 5px;
    flex-direction: row;
    justify-content: center;
    width: 100px; 
    height: 100px;
}

.radial-progress__label {
    -unity-text-align: middle-left;
    color: var(--percentage-color);
}

UI 문서 구성

UI 문서를 구성하여 방사형 진행 표시기를 추가할 수 있습니다.

1. RadialProgressExample.uxml 문서를 생성합니다.
2. UI 빌더에서 RadialProgress를 추가하고, 스타일 시트를 적용합니다.
3. 필요에 따라 진행률 수치 조정합니다.

C# MonoBehaviour 컴포넌트

UI 문서에서 방사형 진행 표시기를 테스트할 수 있는 C# 스크립트를 만듭니다.

using System.Collections;
using UnityEngine;
using UnityEngine.UIElements;
using MyUILibrary;

[RequireComponent(typeof(UIDocument))]
public class RadialProgressComponent : MonoBehaviour
{
    RadialProgress m_RadialProgress;

    void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        m_RadialProgress = new RadialProgress()
        {
            style = { position = Position.Absolute, left = 20, top = 20, width = 200, height = 200 }
        };
        root.Add(m_RadialProgress);
    }

    void Update()
    {
        m_RadialProgress.progress = ((Mathf.Sin(Time.time) + 1.0f) / 2.0f) * 60.0f + 10.0f;
    }
}

테스트 및 실행

1. GameObject > UI Toolkit > UI Document를 선택하여 UI Document를 생성합니다.
2. RadialProgressComponent.cs를 UIDocument의 컴포넌트로 추가합니다.
3. 플레이 모드를 시작하여 방사형 진행 표시기가 정상적으로 표시되고 업데이트되는지 확인합니다.

추가 리소스

• 커스텀 컨트롤 만들기
• 벡터 API를 사용하여 진행 표시기 만들기
• Unity 기술 포럼 및 커뮤니티 질문 답변 확인

이 문서에서 설명한 내용을 통해 Unity에서 방사형 진행 표시기를 구현하는 방법을 이해하고 응용할 수 있습니다. 필요에 따라 자유롭게 수정하고 실험해 보세요.