[유니티 Note] 섹션 8-1

# UI 생성 방법

Hierarchy 창에서 우클릭 UI를 통해 생성 가능하다

Button을 생성할 경우에

Canvas, Button, Text, EventSystem과 같은 묶음으로 생성된다

 

# EventSystem

EventSystem은 유니티에서 UI를 생성할 때 자동으로 만들어진다

UI가 사용자 입력을 올바르게 처리할 수 있도록 하는 일종의 매니저이다

 

# Canvas

무조건 Canvas 산하에 UI가 있어야 정상 작동한다

 

# RectTransform

UI는 Transform이 아닌 RectTransform으로 위치가 관리된다

 

# UI에서 Local vs Global

UI 자체를 수정 및 조작하는 경우가 일반적이기에

2D로 전환해서 Rect Tool 모드를 이용해

Local로 사용하는 경우가 많다

 

# T(Rect Tool) 모드

Q, W, E, R 이 아닌 T를 이용해 UI 및 2D를 위한 툴 모드를 사용하면

쉽게 조작 가능하다

주요 조작법은 아래와 같다

 

우클릭 드래그: 현재 위치 이동

객체 우클릭하면서 드래그: 객체 위치 이동

객체 외곽에 마우스를 이동시켜 ↔: 스케일 조절

Shift를 유지한 채로 ↔: 비율 유지한채로 스케일 조절

객체 모서리에 마우스를 이동시켜 회전아이콘: 회전 조절

중앙 “O”: 회전의 pivot을 의미하고 드래그로 pivot 설정

 

# UI의 비율과 원근감

3D의 경우 투영을 통해

비율과 원근감을 계산해 스크린 좌표로 변환을 한다

 

UI의 경우는

비율은 Anchor를 통해 해결하고

원근감은 계산하지 않는 것이 일반적이기에

아무리 UI 오브젝트의 z값을 조절하더라도 차이가 없다

물론, UI에 원근감을 표현해야 하는 경우에는 3D 오브젝트로 만들어서 배치하는 경우도 있긴 하다

 

# Anchor의 정의와 기능

Anchor는 Unity에서

UI 요소의 위치와 크기를 부모 객체에 상대적으로 설정하는 기능이다

좀 더 상세한 기능은 아래와 같다

 

1. 해상도 변화 대응

화면 크기가 변해도 UI 요소가 올바르게 배치됨

 

2. 위치 및 크기 조정

부모 객체의 크기에 따라 UI 요소의 크기와 위치가 자동으로 조정됨

 

3. 비율 유지 가능

특정 비율을 유지하면서 UI 요소가 조정될 수 있음

ex.

버튼을 화면 중앙에 고정하고 싶다면,

Anchor를 중앙에 설정하면 해상도가 변해도 중앙에 유지됨

특정 UI 요소를 화면의 오른쪽 아래에 고정하고 싶다면,

Anchor를 오른쪽 아래에 설정하면 위치가 유지됨

 

# Rect Transform과 Anchor

화면 비율대로 UI의 비율과 크기를 조절하는 것이 아닌

우리가 원하는 비율과 위치를 지키면서 UI를 만들어내기 위해서

Rect Transform을 사용한다

그리고 그 핵심적인 기능을 담당하는 것이 Anchor이다

 

# Anchor 조건

부모 객체에서 Rect Transform을 사용해야

본인과 자식들이 Achor를 사용할 수 있다

 

# Anchor 공식

부모와 Anchor 사이의 거리는 상대적인 비율로 계산한다

Anchor와 나 사이의 거리는 절대적인 거리로 계산한다

사진 원본 출처: https://velog.io/@jizzvibe/UnityUI-Rect-Transform-Pivot-Anchor-이해하고-화면-크기에-완벽하게-대응하기

 

# Anchor Preset

많이 사용되는 것은 Preset에 등록되어 있기에 이를 활용하면 된다

shift를 유지한 채로 Preset을 누르면 중심점까지 같이 이동한다

alt를 유지한채로 Preset을 누르면 실제 위치까지 같이 이동한다

shift와 alt 모두 유지한채로 Preset을 누르면 중심점, 실제 위치 모두 같이 이동한다