Unity:: RectTransform 개념

개요

UI를 구성하는데 가장 중요한 점은 여러 해상도에 맞게 구성하는 것이다.
여러 해상도에 맡게 UI를 구성하는 방법을 알기 위해 이번 게시물에서 RectTransform의 기본을 알아가고
다음 게시물에서는 앵커를 활용해서 유연하게 해상도 대응을 하는 방법에 대해 알아보고자 한다.

---

RectTransform

유니티 공식 홈페이지

• UI 요소를 안에 넣을 수 있는 사각형을 나타냄
• Tranform 컴포넌트의 2D 레이아웃 버전 - Transform 컴포넌트를 상속받음
• 상위 RectTransform을 이용해 상대적인 위치 및 크기를 지정할 수 있음

Property 이해

앵커(Anchor) / 피벗(Pivot)

• 앵커(Anchor) : 부모 오브젝트의 기준점
  • 이미지의 바람개비 모양이 앵커를 나타낸다
  • Anchor의 Min, Max를 통해 비율을 정할 수 있음
• 피벗(Pivot) : 자식 오브젝트의 기준점 (중심점)
  • 이미지의 파란 동그라미가 피봇을 나타낸다

---

Script Property

참고자료

https://bora-game-develop-history.tistory.com/1

[Unity/UI] RectTransform 정리

https://planek.tistory.com/31

RectTransform 이해하기: rect, scale, anchoredPosition vs localPosition

RectTransform	의미
.position (WorldSpace)	WorldSpace 상의 피벗 위치
.localPosition	상위개체로부터 떨어진 피봇 위치
.anchoredPosition	anchor를 기준으로 한 자신의 pivot 위치 인스펙터 상의 posX, posY
.sizeDelta	anchor와의 거리 (부모보다 크기가 얼마나 작거나 큰지) [anchor가 middle/center 일 때] : rect.size와 동일 [anchor가 stretch 일 때] : sizeDelta.x = -Screen.width + rect.width sizeDelta.y = -Screen.height + rect.height
.offsetMin / .offsetMax	lower left anchor 기준 lower left corner 위치 / upper right anchor 기준 upper right corner 위치
.anchorMin / .anchorMax	normalized 된 offsetMin / Max

Rect

• x, y 위치와 넓이, 높이로 정의되는 2차원 사각형 영역
• UI의 가로, 세로 정보 등을 알아낼 수 있음
• x는 오른쪽 / y는 아래가 양의 방향(+)

RectTransform	의미
.rect.position	피벗으로부터 왼쪽 하단 모서리까지의 거리
.rect.width	가로축 좌표를 구성하는 수 (객체의 넓이 : 픽셀)
.rect.height	세로축 좌표를 구성하는 수 (객체의 높이 : 픽셀)
.rect.xMin / .rect.xMax	pivot을 기준으로 한 x 좌표의 최소/최대 값
.rect.yMin / .rect.yMax	pivot을 기준으로 한 y 좌표의 최소/최대 값

예시

• 2D 기준으로 표기

.position (WorldSpace)		(0, 0)		(50, 50)
.rect.position		(-100, -100)		(-50, -50)
.anchoredPosition		(0, 0)		(50, 50)
.localPosition		(0, 0)		(50, 50)
.rect.width		200		100
.rect.height		200		100

결과 사진

---

Anchor Presets

	Anchor Preset GUI를 통해 Anchor를 지정할 수 있음

단축키 기능

Anchor + Pivot 설정	Anchor + Position 설정

Shift + Alt를 동시에 눌러 Anchor + Pivot + Position을 동시에 설정할 수 있다.

---

유용한 명령어

Unity 오브젝트 Size 얻기

RectTransform.rect.width
RectTransform.rect.height