해당 포스트는 고박사의 유니티 노트를 참고했습니다.

개요

상호작용이 가능한 UI 컴포넌트의 공용으로 있는
Interactable, Transition, Navigation 변수에 대해 배워보도록 하겠습니다

상호작용 컴포넌트 공용 옵션

상호작용이 가능한 Button, Toggle, Slider, Scrollbar, Dropdown, Input Field 컴포넌트는
공용으로 제공되는 Interactable, Transition, Navigation 옵션이 있습니다.
해당 3가지 옵션이 무엇인지 먼저 살펴 보겠습니다.

Interactable

Interactable는 오브젝트의 상호작용을 활성화/비활성화 하는 변수로,
비활성화 상태가 되면 상호작용 컴퍼넌트에 있는 모든 기능이 중지됩니다.

👇 Interactable 비활성화 예시 (버튼이 동작하지 않음.)

Transition

트랜지션은 오브젝트와 마우스가 상호작용하는 상태에 따라
오브젝트의 (색상 / 이미지 / 애니메이션)을 바꾸는 기능입니다.

트랜지션은 (Color Tint, Sprite Swap, Animation) 3가지 옵션을 선택할 수 있습니다.
버튼의 경우 3가지 모드에서 동일하게
Normal, Highlighted, Pressed, Selected, Disabled 등의 단어를 볼 수 있습니다.

Normal : 클릭, 마우스 오버의 상호작용이 없을경우 동작
Highlighted : 마우스 오버 발생시 동작
Pressed : 버튼이 눌리고 있는 동안 동작
Selected : 한번이라도 버튼이 눌리고 난 뒤 동작
Disabled : 버튼 비활성화시 동작

Color Tint 모드

Color Tint 모드는 버튼의 배경색을 바꿀 수있는 옵션으로
Normal, Highlighted, Pressed, Selected, Disabled에 원하는 색상을 설정합니다.

Sprite Swap 모드

Sprite Swap 모드는 상태에 따라 등록된 이미지를 변경하는 옵션으로
Normal에 해당하는 이미지는 Image 컴포넌트의 Source Image에 등록하고
Highlighted, Pressed, Selected, Disabled 스프라이트에 이미지를 등록합니다.

Animation 모드

Animation 모드는 상태에 따라 등록된 애니메이션을 재생하는 옵션으로
Highlighted, Pressed, Selected, Disabled 트리거에
Animator 컴포넌트의 설정되어있는 '애니메이션 이름'을 작성합니다

Auto Generate Animation 버튼 클릭시
자동으로 오브젝트에 Animator컴포넌트를 추가하고,
설정이 완료된 Animator Controller와 Animation이 생성되기 때문에
Animation 탭에서 애니메이션만 수정해서 사용하면 됩니다.

Navigation

네비게이션은 여러 개의 오브젝트가 화면에 배치 되어 있을 경우
방향키를 눌러 다른 오브젝트로 옮겨갈 수 있도록 하는 기능입니다.
(예를들면 옵션 창에서 화살표로 UI를 옮겨다니는 기능을 만들수 있습니다.)

기본값은 Horizontal, Vertical, Automatic이 전부 켜져있습니다.

여기서 Visualize 버튼을 클릭하면
네비게이션의 연결 구조를 확인할 수 있으며
게임 실행시 연결 구조 모양대로 화살표를 눌렀을때 움직이며 동작하게 됩니다.