Unity - UI 기초, UI Rect Transform, Anchor Presets 설명

1. UI 기초

먼저 UI탭에서 버튼을 만들어보자 그러면 자동으로 Canvas와 EventSystem이 생긴걸 확인할 수 있다

01 Canvas

그림을 그릴 도화지로 인식하면 된다. 실제로 UI요소가 배치되는 영역이다.

02 EventSystem

사용자 입력 및 이벤트 처리를 관리한다. 이는 이벤트를 감지하고 해당 이벤트에 대한 콜백함수를 호출한다. 그러므로 Button을 사용하고 싶은데 EventSystem이 없는 경우 사용되어지지 않는다.

---

2. UI Rect Transform

UI요소의 크기, 위치, 회전 및 확대/축소를 조절하는데 사용된다. 이는 모든 UI요소에 자동으로 추가되며 보통 UI를 조작할때는 RECT Transform을 이용한다.

01 Position

Anchor를 기준으로 한 사각형의 Pivot 포인트 위치이다.

02 Pivot

UI요소의 회전 및 크기 조절 중심이다. 이를 조절하면 UI요소가 회전할때 어디를 중심으로 회전하는지 제어할 수 있다.

---

3. Anchors

UI요소가 부모 RectTransform에 상대적으로 어디에 고정되어 있는지를 나타낸다.

Min의 X부분은 바람개비 왼쪽부분이고 Y부분은 바람개비 아래쪽 부분이다.

Max의 X부분은 바램개비 오른쪽부분이고 Y부분은 바람개비 윗쪽 부분이다.

---

01 Anchor 간단 공식

Anchor는 Rect Transform부모가 있어야 사용할 수 있다.

각각의 핀셋은 파란색점 한개 대응된다.

초록색 선 : 핀셋과 부모사이의 거리는 비율로 계산된다.

빨간색 선 : 핀셋과 파란색 점과에서는 고정거리로 연산된다.

가로가 좁아졌을때 초록색은 작아졌는데 빨간색선의 길이는 동일한 것을 알 수 있다.

---

02 Anchor Presets

Anchor Presets을 사용하면 앵커 포인트를 미리 정의된 설정으로 쉽게 조정할 수 있다. 이는 화면 크기 변경에 따른 대응을 단순화한다.

 

MiddleCenter

앵커를 부모 RectTransfrom의 중앙 가운데에 고정한다.

비율은 줄어들고 거리는 일정하다

---

03 Stretch

UI 요소를 부모 요소에 맞게 자동으로 확장 또는 축소 시키는 방법이다. 이를 통해 동적으로 부모 요소의 크기와 맞출 수 있다.

Stretch Both

부모 요소의 가로 및 세로 크기에 맞게 늘어나며 부모 요소와 완전히 일치한다.

비율은 일정하고 거리가 줄어든다.

---

04 Anchor가 Pivot과 겹쳐 있는 경우

비율은 일정하고 거리가 0이다.

이를 이용해서 홤녀 비율 그대로 버튼 사이즈를 줄일 수 있다.

 

 

 

 

 

 

 

참고 :  본 내용은 MMORPG  PART3 강의를 수강하여 작성하였습니다.

https://www.inflearn.com/course/mmorpg-%EC%9C%A0%EB%8B%88%ED%8B%B0/dashboard