Unity 사용자 매뉴얼: 방사형 진행 표시기 만들기
이 문서는 Unity에서 UI 툴킷을 사용하여 방사형 진행 표시기를 만드는 방법에 대한 가이드입니다. 아래 예제를 통해 커스텀 컨트롤을 만들고, 이를 활용하여 자신의 게임 또는 애플리케이션에 맞는 UI를 디자인할 수 있습니다.
개요
본 예제에서는 로딩 막대에 대신하여 사용자가 진행률을 시각적으로 표현할 수 있는 방사형 진행 표시기를 생성합니다. 사용자는 0에서 100 사이의 값으로 진행률을 설정할 수 있으며, 이 값에 따라 링의 채워지는 양이 결정됩니다. 생성한 코드 샘플은 GitHub 저장소에서 확인할 수 있습니다.
선행 조건
- Unity 에디터에 익숙해야 함
- UI 툴킷 기본 이해
- C# 스크립팅 이해
시작하기
이 가이드는 UI 빌더와 UXML 및 USS 파일을 사용하여 방사형 진행 표시기 컨트롤을 생성하는 과정을 설명합니다.
1. Unity 프로젝트 생성
- 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.
radial-progress라는 폴더를 생성하고 아래의 파일들을 저장합니다.
2. C# 스크립트 생성
RadialProgress.cs라는 이름의 C# 스크립트를 작성합니다.
using Unity.Collections;
using UnityEngine;
using UnityEngine.UIElements;
namespace MyUILibrary
{
// 방사형 진행 표시기를 정의하는 클래스
public class RadialProgress : VisualElement
{
...
// Progress 속성을 기반으로 시각적 요소 업데이트
...
}
}
위 코드에서는 방사형 진행 표시기를 구성하는 RadialProgress 클래스를 정의하고, 진행률을 업데이트하는 메소드와 스타일을 적용하는 코드를 포함합니다.
3. 스타일 시트 생성
RadialProgress.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-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
flex-direction: row;
justify-content: center;
width: 100px;
height: 100px;
}
.radial-progress__label {
-unity-text-align: middle-left;
color: var(--percentage-color);
}
4. UI 문서 생성
RadialProgressExample.uxml이라는 이름의 UI 문서를 생성합니다. UI 빌더에서 방사형 진행 표시기를 드래그하여 추가하고, 스타일 시트를 적용합니다.
5. 런타임에서 진행 표시기 사용
RadialProgressComponent.cs라는 파일을 생성하고 아래의 코드를 추가합니다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
using MyUILibrary;
[RequireComponent(typeof(UIDocument))]
public class RadialProgressComponent : MonoBehaviour
{
...
// 동적 값을 사용하여 진행률 업데이트
...
}
추가 리소스
변형 및 활용 예제
- 다른 색상 사용: 스타일 시트에서 색상을 변경하여 진행 표시기를 사용자 맞춤형으로 변경해 보세요.
- 진행률 범위 조정: 진행률을 100% 초과하여 설정 시, 사용자에게 정보 제공 메시지를 표시하는 기능을 추가할 수 있습니다.
- 애니메이션 효과 추가: 진행률이 변화할 때 부드러운 애니메이션 효과를 주어 UI의 완성도를 높일 수 있습니다.
결론
이 가이드를 통해 Unity의 UI 툴킷을 활용하여 방사형 진행 표시기를 만들고 사용해보는 법을 배웠습니다. 다양한 기능을 추가하여 자신만의 커스텀 UI 요소를 만들어 보세요!