Unity 사용자 매뉴얼 (2022.3 LTS)
사용자 인터페이스(UI) 생성
UI 툴킷
이 섹션에서는 Unity UI 툴킷과 관련된 주요 개념과 사용법에 대해 설명합니다. UI 툴킷은 다양한 플랫폼에서 사용자 인터페이스를 구축하고 조작할 수 있는 기능을 제공합니다.
UI 구조화
UI 구성 요소는 시각적 요소로 구성되며, 이러한 요소들은 시각적 트리라는 구조 안에 배치됩니다.
시각적 트리
시각적 트리는 UI의 요소들이 어떻게 시각적으로 표현되는지를 정의하는 계층적 구조입니다. 각 요소는 패널 내에서 특정 순서로 렌더링됩니다.
패널
패널은 시각적 트리의 부모 오브젝트입니다. 이는 rootVisualElement를 소유하고 있지만 그 자체는 시각적 요소가 아닙니다. 모든 패널은 다음 두 가지 컨텍스트 중 하나에 속합니다:
- 에디터 창
- 런타임
UIDocument
패널은 시각적 트리에 대한 포커스 제어와 이벤트 디스패칭을 처리합니다. 시각적 트리의 모든 요소는 패널에 대한 직접적인 참조를 가집니다.
패널과 VisualElement 연결
패널과 VisualElement의 연결을 확인하기 위해 해당 요소의 panel 속성을 테스트할 수 있습니다. 이 속성이 null을 반환하면, 시각적 요소가 패널에 연결되지 않은 상태임을 의미합니다.
추가 리소스
- 이벤트 디스패치
- Panel Settings 에셋
- 상대 및 절대 위치 지정 C# 예시
활용 및 응용 예제
예제 1: 기본 패널 생성
using UnityEngine;
using UnityEngine.UIElements;
public class Example : MonoBehaviour
{
public VisualTreeAsset panelTemplate;
void Start()
{
var uiDocument = GetComponent<UIDocument>();
var root = uiDocument.rootVisualElement;
var panel = panelTemplate.CloneTree();
root.Add(panel);
}
}
이 코드는 Unity의 UI 문서에서 패널을 동적으로 생성하고 추가하는 예제입니다.
예제 2: 시각적 요소에 이벤트 추가
using UnityEngine;
using UnityEngine.UIElements;
public class Example : MonoBehaviour
{
public VisualTreeAsset buttonTemplate;
void Start()
{
var uiDocument = GetComponent<UIDocument>();
var root = uiDocument.rootVisualElement;
var button = buttonTemplate.CloneTree();
button.RegisterCallback<ClickEvent>(ev => Debug.Log("버튼 클릭!"));
root.Add(button);
}
}
이 예제는 버튼에 클릭 이벤트를 등록하여 사용자가 버튼을 클릭할 때 로그를 출력하는 방법을 보여줍니다.
결론
Unity의 UI 툴킷과 시각적 트리 구조는 복잡한 사용자 인터페이스를 쉽게 구성하고 관리할 수 있는 강력한 도구입니다. 위의 예제와 개념들을 활용하여 다양한 UI 요소를 만들고 반응형 어플리케이션을 개발해보세요.