Unity UI 툴킷에서 포인터 이벤트 처리하기
Unity의 UI 툴킷을 사용하면 포인터 이벤트를 효과적으로 사용할 수 있습니다. 이 설명서는 포인터 이벤트의 개념, 주요 이벤트 유형 및 속성 설명과 사용 예제를 제공합니다.
포인터 이벤트란?
포인터 이벤트는 사용자가 마우스, 터치 또는 스타일러스와 같은 입력 장치를 사용하여 UI와 상호작용할 때 발생하는 이벤트입니다. 일반적인 마우스 이벤트보다 더 많은 정보(예: 펜 압력, 기울기 각도)를 포함합니다.
이벤트 유형
아래 표에는 주요 포인터 이벤트 목록과 각 이벤트의 설명이 있습니다.
| 이벤트 이름 | 설명 |
|---|---|
| PointerDownEvent | 포인터를 누를 때 발생합니다. |
| PointerUpEvent | 포인터를 놓을 때 발생합니다. |
| PointerMoveEvent | 포인터의 위치가 변경될 때 발생합니다. |
| PointerEnterEvent | 포인터가 시각적 요소에 들어갈 때 발생합니다. |
| PointerLeaveEvent | 포인터가 시각적 요소를 떠날 때 발생합니다. |
| PointerOverEvent | 포인터가 시각적 요소 위에 있을 때 발생합니다. |
| PointerOutEvent | 포인터가 시각적 요소를 벗어날 때 발생합니다. |
| PointerStationaryEvent | 포인터가 일정 시간 동안 움직이지 않을 때 발생합니다. |
| PointerCancelEvent | 운영체제에서 포인터 작업이 취소될 때 발생합니다. |
주요 속성
포인터 이벤트는 다음과 같은 여러 속성을 포함합니다:
| 속성 이름 | 설명 |
|---|---|
| altitudeAngle | 스타일러스의 표면 기준 각도(라디안 단위) |
| azimuthAngle | 스타일러스의 x축 기준 각도(라디안 단위) |
| button | 이벤트를 발생시킨 마우스 버튼을 식별하는 정수 |
| clickCount | 버튼을 누른 횟수 |
| deltaPosition | 이전 포인터 위치와 현재 포인터 위치 간의 차이 |
| deltaTime | 포인터 값의 마지막 변경 이후 경과된 시간(초) |
| localPosition | 타겟 시각적 요소를 기준으로 한 포인터 위치 |
| modifiers | 현재 누르고 있는 수정 키에 대한 정보 |
| pointerId | 특정 포인터를 식별하는 정수 |
| pointerType | 포인터의 타입을 정의하는 문자열 |
| position | 포인터의 현재 위치를 반환 |
이벤트 예제
아래 코드는 노란색 상자가 포함된 빨간색 상자를 생성하고, 포인터가 시각적 요소를 떠날 때 콘솔에 로그를 출력합니다.
- UXML 파일 생성:
Assets > Scripts > Editor경로에PointerEventsTestWindow.uxml파일을 만듭니다.
UXML 코드: xml <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance"> <ui:VisualElement style="flex-grow: 1; justify-content: center; align-items: center;"> <ui:VisualElement name="Red_Box" style="background-color: rgb(183, 34, 46); width: 50%; height: 50%;"> <ui:VisualElement name="Yellow_Box" style="width: 175%; height: 50%; background-color: rgb(197, 163, 0);" /> </ui:VisualElement> </ui:VisualElement> </ui:UXML
- C# 파일 생성:
PointerEventsTestWindow.cs라는 이름의 C# 파일을 만듭니다.
C# 코드: ```csharp using UnityEditor; using UnityEngine; using UnityEngine.UIElements;
public class PointerEventsTestWindow : EditorWindow { [MenuItem("Window/UI Toolkit/Pointer Events Test Window")] public static void ShowExample() { PointerEventsTestWindow wnd = GetWindow(); wnd.titleContent = new GUIContent("Pointer Events Test Window"); }
public void CreateGUI()
{
// Import UXML
VisualTreeAsset visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Scripts/Editor/PointerEventsTestWindow.uxml");
visualTree.CloneTree(rootVisualElement);
// Get the red box and register pointer event callbacks
VisualElement redBox = rootVisualElement.Q("Red_Box");
redBox.RegisterCallback<PointerOutEvent>(OnPointerOutEvent, TrickleDown.TrickleDown);
redBox.RegisterCallback<PointerLeaveEvent>(OnPointerLeaveEvent, TrickleDown.TrickleDown);
}
private void OnPointerLeaveEvent(PointerLeaveEvent evt)
{
Debug.Log($"Pointer LEAVE Event. Target: {(evt.target as VisualElement).name}");
}
private void OnPointerOutEvent(PointerOutEvent evt)
{
Debug.Log($"Pointer OUT Event. Target: {(evt.target as VisualElement).name}");
}
} ```
- Unity 에디터에서 실행: 에디터 툴바에서
Window > UI Toolkit > Pointer Events Test Window를 선택하여 생성한 윈도우를 확인합니다.
추가 리소스
이 문서는 Unity UI 툴킷을 쉽게 이해하고 적용하는 데 도움이 될 것입니다. 게임 개발 시 유용하게 활용해 보세요!