Unity Chapter 10-5. UGUI : 이벤트 시스템 + UI 인터랙션 원리

Date: 2020.07.09 Updated: 2020.07.09

카테고리: Unity Lesson 1

태그: Unity Game Engine

인프런에 있는 이제민님의 레트로의 유니티 C# 게임 프로그래밍 에센스 강의를 듣고 정리한 필기입니다. 😀
🌜 [레트로의 유니티 C# 게임 프로그래밍 에센스] 강의 들으러 가기!

Chapter 10. UGUI

🔔 EventSystem

캔버스가 UI에게 광선을 날림
UI는 광선을 받아 그에 맞는 인터랙션을 발동시키는데
그 인터랙션을 어떤 형태로 발동시킬지는 EventSyste이 감지하여 UI에게 광선으로 보낸다.

캔버스 👉 광선을 쏴준다.
- Canvas 에 기본으로 붙어 있는 Graphic Raycaster 컴포넌트가 자식 UI 요소들에게 Ray 광선을 쏴준다.
비주얼 컴포넌트 👉 광선을 받는다.
- UI들이 가지고 있는 비주얼 컴포넌트(이미지, 텍스트)들엔 Raycast Target 체크 필드가 존재하는데 이게 체크되어있어야 EvenetSystem이 쏘는 Ray 광선을 받을 수 있다. 따라서 이게 해제 되어있으면 이벤트가 일어나도 그에 반응할 수 없게 된다. ⭐⭐⭐⭐⭐
EventSystem 👉 광선을 쏴준다.
- UI - EventSystem
- 어떠한 형태의 인터랙션이 발생할지는 EventSystem이 정한다.
  - 광선이 닿은 UI 요소에게 어떤 형태의 이벤트가 발동됐는지 알려준다.
    - 여러 이벤트들을 감지하고 이를 해당 UI요소에게 Ray 광선으로 쏴주는 역할을 한다.
- 인터랙션 컴포넌트들 (버튼, 슬라이더 등등)을 만들 땐 자동으로 함께 생성된다.

1. Event Trigger 컴포넌트로 이벤트 대응하기

EventSystem이 어떤 게임 오브젝트를 대상으로 어떤 형태의 이벤트를 발동시킬 때마다 그것을 캐치헤서 EventTrigger에 등록된 함수들을 실행한다.

EventSystem창의 Preview를 보면 알수 있지만 EventSystem는 어떤 이벤트들이 발생했는지 모든 이벤트를 전부 감지를 하고 있다.
EventTrigger는 이 이벤트들 중 하나를 캐치하여 그에 맞게 대응한다.
이렇게 아래와 같이 여러가지 많은 타입이 있는데 선택한 후 해당 이벤트가 발생할시 실행시킬 함수들을 +로 등록해주면 된다.

예시 : PointerEnter

현재 EventTrigger컴포넌트가 붙어 있는 오브젝트 안에 마우스 커서가 들어왔을 때 실행된다.
- EventSystem이 PointerEnter 이벤트를 감지하면 자동으로 EventTrigger의 PointerEnter타입으로 등록된 함수가 실행된다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class EventTest : MonoBehaviour
{
    public void CheckEvent()
    {
        Debug.Log("Event Called");
    }
}

위 스크립트의 CheckEvent() 함수를 등록해주면 해당 오브젝트에 커서가 들어갈때마다 콘솔창에 “Event Called” 메세지 출력

2. 수동으로 직접 코드로 이벤트 대응하기

EventTrigger 컴포넌트 사용이 아닌 직접 코드로 이벤트 캐치하기 위해선 EventSystems 관련 인터페이스를 상속받아 해당 이벤트 함수들을 직접 구현해야 한다.

인터페이스는 오버라이딩을 강제한다.

using UnityEngine.EventSystems;

예시
- 드래그와 관련있다면 IDrag 인터페이스 상속
- 마우스 커서가 들어오는 것과 관련 있다면 IPointerEnterHandler 인터페이스 상속
EventSystem이 어떤 게임 오브젝트를 대상으로 어떤 형태의 이벤트를 발동시킬 때마다 해당 이벤트가 발동이 되었다면 그것을 캐치해서 대응한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems; // ⭐⭐

public class EventTest : MonoBehaviour, IPointerEnterHandler
{
    public void OnPointerEnter(PointerEventData data)  // ⭐ 무조건 오버라이딩 해야 하는 IPointerEnterHandler의 함수
    {
        Debug.Log(data.position);  // 마우스 커서의 위치가 출력
    }
}

이 c# 스크립트가 붙은 오브젝트에 OnPointerEnter 이벤트가 발생되었음을 EventSystem이 알려주면 저 함수를 자동으로 실행시킨다.
- 인수로 마우스 위치, 드래그 정보 등등의 마우스 커서의 여러가지 정보(PointerEventData data)가 넘어간다.

인터페이스 목록

유니티 공식 문서 참고하기 👉 UnityEngine.EventSystems.Interfaces

예시

드래그 하는 곳으로 오브젝트 위치 변경하기. 즉 오브젝트가 마우스 드래그 할 때마다 커서를 따라 오도록!

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class EventTest : MonoBehaviour, IBeginDragHandler, IDragHandler, IendDragHandler
{
    public void OnBeginDrag(PointerEventData data)  
    {
        transform.position = data.position;
    }

    public void OnDrag(PointerEventData data)  
    {
        transform.position = data.position;
    }

    public void OnEndDrag(PointerEventData data)  
    {
        transform.position = data.position;
    }
}

이렇게 이벤트를 감지하고 그에 대응할 수 있는 이유는 모두 Raycast Target 를 체크하여 Ray를 감지하도록 해놨기 때문에 가능한 것임을 다시 한번 더 강조한다.

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

공부하는 식빵맘 👱‍♀️