[유니티] Canvas and UI

유니티의 게임에 UI(게임플레이에 영향을 끼치지 않는 인터페이스)는 Canvas 내에서 설정한다.

이때, 실제 게임이 돌아가는 공간과 UI를 설정하는 공간이 다름을 기억하자.

위의 Play공간과 UI공간이 겹쳐져서 플레이어의 화면에 송출된다.

이떄, Canvas는 사용자의 모니터에 따라 반응적으로 크기가 달라진다.

 

# Button

UI공간에 버튼을 추가할 수 있다.

버튼을 눌렀을 때 호출될 이벤트를 버튼 내의 인스펙터에서 설정할 수 있다.

ex) Runtime Only, Button -> GameObject.SetActive -> false시 누르면 버튼이 비활성화됨

 

# Text

위와 비슷한 방식으로 텍스트를 추가할 수 있으나, 한국어 사용을 위해서는 추가 과정이 필요하다.

상단 Window -> TextMeshPro -> Font Asset Creator

(복사용 텍스트 32-126,44032-55203,12593-12643,4200-9900 )

위와 같이 설정하고 상단 Source font에 폰트를 넣으면 해당 폰트가 한국어를 사용할 수 있게 된다.

 

# Rect Transform

Canvas 내에서의 UI 오브젝트들은 Transform 대신 Rect Transform을 사용하여 해상도에 대응시킨다.

Transform과 다른 점이 있다면, Anchor과 Pivot이 있다는 점이다.

Rect Transform에서 position은 Anchor를 기준으로 가운데 Pivot까지의 거리를 기반으로 정해진다.

 

Anchor을 설정하여 기준점을 정하고 -> pivot을 설정하여 오브젝트의 원점을 정하고 -> Anchor과 pivot 사이 거리를 정하는 것이 Rect Transform이다.

 

Anchor는 Preset으로 위치를 배치할 수 있다.

이때, shift를 누른 채로 클릭하면 pivot이 함께 이동하고,

alt를 누른 채로 클릭하면 position이 함께 이동한다.

일반적로는 shift와 alt를 같이 눌러 사용하자.

 

# ScrollView

스크롤에 따라 더 큰 내용을 한 공간 내에서 볼 수 있도록 하는 UI 요소이다.

- Viewport : ScrollView의 내부 요소 

- Scrollbar : 수직/수평 스크롤바

 

ViewPort의 content 안에 UI요소들을 넣어 사용한다.

이때, LayoutGroup을 사용하여 요소들을 정렬한다.

 

## LayoutGroup

content에 LayoutGroup 컴포넌트를 추가하여 스크롤그룹 내 요소들을 정렬할 수 있다.

- Vertical Layout Group : 수직으로 정렬

- Horizontal Layout Group : 수평으로 정렬

- Grid Layout Group : 격자 형태로 정렬

 

여기에 추가로 Content Size Fitter를 사용하여 내부 Content의 크기를 조정한다.

크기 조정을 원하는 방향의 property를 Preferred Size로 설정하여 크기를 조정할 수 있다.

 

또한, Scroll View 오브젝트의 Scroll Rect 컴포넌트에서 스크롤 형식을 수정할 수 있다.

Horizontal / Vertical 체크박스로 수평, 수직 스크롤 활성화와 비활성화를 정할 수 있다.

Movement Type에서는 스크롤 끝에서의 움직임을 정할 수 있다.

 - Unrestricted : 제한 없이 요소가 없더라도 계속 스크롤 가능

 - Elastic : 끝에서는 스크롤 할 때 부드럽게 원래 자리로 돌아옴

 - Clamped : 끝에서는 스크롤 불가

Scroll Sensitivity에서는 마우스 스크롤의 민감도를 정할 수 있다.