다음 단계를 통해 런타임 UI 생성하여 게임(Game) 뷰에 표시할 수 있습니다.
.uxml)를 생성합니다.MonoBehaviours를 생성하여 UI 컨트롤의 동작을 정의합니다.다음의 간단한 런타임 UI 예시를 사용해 시작해 보십시오.예시에서는 씬에 레이블, 버튼, 토글, 텍스트 필드를 추가합니다.버튼을 클릭하면 콘솔(Console) 창에 메시지가 표시됩니다.토글을 선택하고 버튼을 클릭하면 콘솔 창에 버튼 클릭 횟수가 표시됩니다.텍스트 필드에 텍스트 메시지를 입력하면 콘솔 창에 메시지가 표시됩니다.
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.
이 예시에서 생성한 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.
레이블, 버튼, 토글이 포함된 UI 문서를 생성합니다.UI 빌더나 UXML로 UI 컨트롤을 추가하는 방법에 대한 내용은 간단한 UI 툴킷 워크플로를 참조하십시오.
템플릿을 사용하여 Unity 에디터에서 프로젝트를 생성합니다.
다음 콘텐츠가 포함된 SimpleRuntimeUI.uxml이라는 이름의 UI 문서를 생성합니다.
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"
xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"
noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement style="flex-grow: 1;">
<ui:Label text="This is a Label" display-tooltip-when-elided="true"/>
<ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button"/>
<ui:Toggle label="Display the counter?" name="toggle"/>
<ui:TextField picking-mode="Ignore" label="Text Field" text="filler text" name="input-message" />
</ui:VisualElement>
</ui:UXML>
SampleScene에서 UIDocument 게임 오브젝트를 생성하고 UI 문서를 소스 에셋으로 추가합니다.
SampleScene에서 GameObject > UI Toolkit > UI Document를 선택합니다.이렇게 하면 다음이 생성됩니다.
계층 구조에서 UIDocument 게임 오브젝트를 선택하고 프로젝트(Project) 창의 SimpleRuntimeUI.uxml을 인스펙터(Inspector) 창에 있는 UI Document 컴포넌트의 Source Asset 필드로 드래그합니다.이는 소스 에셋을 생성한 UXML 파일로 참조합니다.
로직을 추가하려면 MonoBehaviour에서 파생된 컴패니언 스크립트를 생성하여 UI Document 컴포넌트가 참조하는 컨트롤에 액세스합니다.
컴포넌트에서 OnEnable이 호출되면 Unity는 UI Document 컴포넌트의 소스 UXML을 로드합니다.시각적 트리가 올바르게 로드되도록 하려면 OnEnable 메서드 안에 컨트롤과 상호 작용하는 로직을 추가합니다.
다음 콘텐츠가 포함된 SimpleRuntimeUI.cs라는 이름의 C# 스크립트를 생성합니다.
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleRuntimeUI :MonoBehaviour
{
private Button _button;
private Toggle _toggle;
private int _clickCount;
//Add logic that interacts with the UI controls in the `OnEnable` methods
private void OnEnable()
{
// The UXML is already instantiated by the UIDocument component
var uiDocument = GetComponent<UIDocument>();
_button = uiDocument.rootVisualElement.Q("button") as Button;
_toggle = uiDocument.rootVisualElement.Q("toggle") as Toggle;
_button.RegisterCallback<ClickEvent>(PrintClickMessage);
var _inputFields = uiDocument.rootVisualElement.Q("input-message");
_inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage);
}
private void OnDisable()
{
_button.UnregisterCallback<ClickEvent>(PrintClickMessage);
}
private void PrintClickMessage(ClickEvent evt)
{
++_clickCount;
Debug.Log($"{"button"} was clicked!"+
(_toggle.value ?" Count:" + _clickCount :""));
}
public static void InputMessage(ChangeEvent<string> evt)
{
Debug.Log($"{evt.newValue} -> {evt.target}");
}
}
SimpleRuntimeUI.cs를 UIDocument 게임 오브젝트의 컴포넌트로 추가합니다.