Canvas(캔버스)와 EventSystem(이벤트 시스템)은 UGUI(Unity UI)를 이용해 UI를 만들면 가장 먼저 만나는 GameObject(게임 오브젝트)다. 둘은 Unity 빌트인 GUI를 사용하려면 필수적으로 필요한 시스템으로서 각각 어떤 역할을 하는지 찾아본 내용을 정리하고자 한다. 내가 이해한 대로 작성한 내용이며 잘못된 부분이 있을 수 있다.(정확한 피드백 환영합니다.)
본 포스팅은 유니티 2020.3.24f 버전을 기준으로 하며, 유니티 매뉴얼을 토대로 작성하였다.
Canvas를 생성할 때 씬에 EventSystem이 없다면 EventSystem이 같이 생성된다.
EventSystem을 생성할 땐 Canvas가 없어도 따로 생성되지는 않는다.
Canvas와 EventSystem이 없는 상태에서 UI(Button, Text 등)를 생성하면 Canvas, EventSystem이 자동으로 생성되며 UI는 Canvas의 자식 오브젝트로 생성된다.
EventSystem만 있는 상태에서 UI를 생성하면 Canvas가 자동으로 생성되고 그 자식으로 UI가 생성된다.
EventSystem을 삭제해 Canvas만 있는 상태에서 UI를 생성하면 EventSystem은 따로 생성되지 않는다.
Canvas가 한 개 있는 상태에서 Canvas를 선택하지 않고 UI를 생성하면 UI가 Canvas 아래에 알아서 생성된다.
Canvas가 한 개 이상 있을 때 Canvas를 선택하고 UI를 생성하면 해당 Canvas의 자식으로 생성되지만 Canvas를 선택하지 않고 UI를 생성하면 Hierarchy의 최하단에 있는 Canvas 아래로 UI가 생성된다.
EventSystem이 씬에 한 개 있으면 Canvas를 여러 개 생성해도 EventSystem이 생성되지 않는다.
Canvas
모든 UI 요소들이 속해야 하는 영역이다. 버튼, 토글, 이미지, 텍스트 등 모든 Unity UI 요소는 Canvas 오브젝트의 자식으로 존재해야 하며 그렇지 않은 UI는 그려지지 않는다. 말 그대로 UI를 그리는 도화지라고 할 수 있겠다.
Canvas와 UI들은 모두 RectTransform이라는 UI용 트랜스폼을 가진다. RectTransform을 이용해 Canvas 위에서 상대적 위치가 지정된 UI는 Canvas의 렌더 모드, 타겟 디스플레이 등 컴포넌트 설정에 따라 게임 화면의 특정 부분에 나타난다.
//작성해야 함RectTransform에 대한 내용은 따로 빼서 자세히 정리하고자 한다.
캔버스를 하나 생성하면 위와 같이 흰 사각형이 씬 뷰에 나타나며 해당 영역이 캔버스 영역이다.
Canvas의 자식인 UI들은 배치된 순서(Hierarchy에서 확인할 수 있다.)에 따라 맨 위 UI가 가장 먼저(뒤에) 그려지고 맨 아래 UI가 가장 나중에(앞에) 그려진다.
Canvas는 GameObject로서 씬에 존재하며 하나 이상 존재할 수 있다. Canvas 단위로 Draw Call(드로우 콜)이 관리되고 이들을 어떻게 사용하느냐가 게임 성능에 영향을 주므로 최적화 시 고려해야 한다. 생성된 Canvas들은 개별 Component를 가지며 기본적으로 Canvas, Canvas Scaler, Graphic Raycaster 컴포넌트를 가지고 생성된다.
Canvas 관련 컴포넌트는 Canvas Renderer, Canvas Group도 있다.
Canvas Renderer: 캔버스에 있는 그래픽 UI 오브젝트에 붙어 렌더링을 담당, 유니티 제공 UI에는 적재적소에 붙어있어 따로 추가할 필요 없음. 커스텀 UI작업 시에는 추가해야 할 수도 있다.
Canvas Group: 캔버스 그룹으로 묶인 UI들의 알파 값, 상호작용 여부 등을 한꺼번에 제어할 수 있다. 이를 이용하면 UI에 일일이 접근해 옵션을 조정할 필요가 없는 것이다. 해당 컴포넌트를 오브젝트(Canvas가 아니어도 됨)에 달고 그 자식으로 그룹화하고자 하는 UI들을 넣어주면 된다.
- Component
Canvas 캔버스 컴포넌트는 UI가 배치(구성)되고 그려지는 추상적인 공간이다. 모든 UI 요소는 캔버스 컴포넌트가 붙은 GameObject의 하위 요소가 되어야 한다. Render Mode 프로퍼티를 이용해 UI가 단순히 스크린에 렌더링 되도록 할 수도 있고, 3D 공간 내의 오브젝트처럼 렌더링 되도록 할 수도 있다.
기본 Canvas 오브젝트에서 Canvas 컴포넌트를 삭제하려고 할 경우 CanvasScaler(Script), GraphicRaycaster(Script)가 의존하고 있어 삭제할 수 없다고 경고한다. 이 녀석이 Canvas 오브젝트의 핵심인 셈이다.
Canvas Scaler 본 컴포넌트는 해당 캔버스에 배치된 모든 UI의 스케일과 픽셀 밀도를 컨트롤한다. 이 값은 폰트 사이즈, 이미지 테두리 등 캔버스 아래에 있는 모든 요소에 영향을 준다. 따라서 본 값이 바뀌면 해당 Canvas 아래 모든 요소의 값도 변할 수 있다는 것을 주의해야 한다. UI Scale Mode 프로퍼티로 캔버스 내 UI 요소들의 크기를 어떻게 할 것인지 결정한다. 화면 크기와 UI 위치, 비율 등의 관계를 정의하는 것이다.
Graphic Raycaster 캔버스에 레이캐스트 하기 위한 컴포넌트. 레이캐스터가 캔버스에 있는 모든 그래픽을 감시하고 충돌했는지 체크한다. 해당 컴포넌트를 활용한다면 마우스에 닿은 UI를 스크립트에서 찾아 직접 제어하는 등의 작업도 가능하다. Event System이 이를 사용하며 이 컴포넌트가 없으면 버튼 클릭 등의 이벤트를 감지할 수 없다.
//작성해야 함Canvas, CanvasScaler에 관해서는 다음에 좀 더 자세히 살펴볼 예정이다.
EventSystem
앞서 말했듯이 Canvas를 생성할 때 같이 생성되며 한 씬에 하나만 생성된다. empty object를 만들어 Event system 컴포넌트들을 추가해 억지로 event system을 한 개 이상 만들고 게임을 실행하면 Event system이 하나만 있는지 확인하라고 경고가 계속 뜬다.
input(마우스, 키보드 등) 기반 애플리케이션에 포함되는 오브젝트에 이벤트를 보내는 시스템이다. EventSystem에는 이를 위한 컴포넌트들이 붙어있다. EventSystem 자체가 EventSystem 모듈 사이의 관리자 및 퍼실리테이터로 설계되어 많은 기능이 노출되지는 않는다.
이벤트시스템은 다음과 같은 일을 한다.
어떤 GameObject가 선택되었는지 관리한다.
사용되는 Input Module이 무엇인지 관리한다.
Raycasting을 관리한다. (필요한 경우)
필요에 따라 모든 Input Module을 업데이트한다.
Event System의 Input Module은 앱이 지원할 입력 시스템(터치, 조이스틱, 마우스 등)에 따라 어떻게 동작하게 할지 등을 커스터마이징 할 수 있는데, 이런 설정에 따라서 이벤트를 수신하고 처리한다.
Event System이 지원하는 이벤트에는 OnPointerEnter(포인터가 오브젝트에 들어간 경우 호출), OnSelect(오브젝트를 선택하는 순간 호출), OnMove(이동 이벤트 발생했을 때 호출) 등이 있으며, 개발자가 작성한 Input Module에 따라 커스터마이징도 가능하다.
Event System의 입력 이벤트를 감지하기 위해서 꼭 필요한 것이 Raycaster이며 이 중 하나가 바로 Canvas에 달린 Graphic Raycaster다. 이밖에도 Physics 2D Raycaster(2D 물리 요소용), Physics Raycaster(3D 물리 요소용)가 기본으로 제공된다. 아래와 같은 방식으로 작동한다.
screen space 상에서 어떤 위치가 주어지면
Raycaster는 Ray에 충돌 가능한 모든 오브젝트(예를 들면 Canvas의 상호작용 가능한 UI)를 탐색·수집하고
Ray에 충돌한 오브젝트가 있는지, 이 중 화면과 가장 가까운 오브젝트가 무엇인지 찾아낸다.
이벤트 시스템 레퍼런스에는 아래와 같은 것들이 있다.
Event System Manager: Event를 구성하는 모든 요소를 제어한다.
Graphic Raycaster: UI용 레이캐스터
Physics Raycaster: 3D 오브젝트용 레이캐스터
Physics 2D Raycaster: 2D 오브젝트용 레이캐스터
Standalone Input Module: 일반적인 컨트롤러나 마우스 입력의 작동 방식대로 설계된 Input Module.
Touch Input Module: 터치 입력을 위한 Input Module. 사용자의 터치·드래그에 따른 포인터 이벤트를 보낸다.
댓글