Unity

[Unity] Canvas 상에서의 position 에 대해

오즈마스터 2019. 9. 27. 17:29

Unity 에서 UI 요소를 삽입하면 Canvas 폴더가 생기고, 그 아래에 있는 객체들은 기존의 좌표체계와 달라지는 것을 볼 수 있다.

<Transform 과 RectTransform 생김새 비교>

Transform
RectTransform

 

(RectTransform 은 Transform 을 상속받은 클래스라 한다.)

 

어쨌든, RectTransform 속성을 지닌 객체의 포지션에 대해 이해한 것만을 적어 본다.

직관적으로 쉽게 이해하기 위해 원점 좌표를 주면 어디에 위치하는지 테스트 해보았다.

테스트를 위해 Panel 을 생성하고 그 안에 Image 객체를 넣었다.

Panel 사이즈는 1920x1080 전체화면으로 했고, Image 는 100x100 이다. (단위는 Pixel)

초기 위치

 

Panel 의 인스펙터 RectTransform (1920x1080 스크린 전체를 차지한다.)

Pos X : 0, Pos Y : 0, Pos Z : 0, Width : 1920, Height : 1080, Anchors Min Max 모두 0, Pivot X, Y : 0, 0

Image 의 인스펙터 RectTransform

Pos X : 0, Pos Y : 0, Pos Z : 0, Width : 100, Height : 100, Anchors Min Max X, Y 모두 0.5 

이렇게 Image 원점의 위치는 Panel 의 가운데 위치해 있다. 원점이 가운데 있다는 뜻이다.

왜 가운데가 원점이냐면, Anchor 가 (0.5, 0.5) 이기 때문이다. 여기서 0.5의 뜻은 0.0~1.0 범위의 값으로, 화면 비율을 뜻한다. (0.5, 0.5) 는 화면 한 가운데에 Anchor 가 있다는 것이다. 그럼 Anchor 를 (0.0, 0.5) 로 한다면?

Anchor 를 옮기니 원점이 달라졌다.

그리고, Anchor 의 Min Max 는 모두 하나의 값으로 맞추는 것으로 했다. 두 값이 달라지면 객체 사이즈가 늘어나는 stretch 와 관련이 있지만 여기서는 논외로 한다.

 

그럼 본격적으로 실험해 보자.

인스펙터 셋팅은 초기 조건으로 돌리고, 스크립트로 localPosition 에 원점을 넣어 실행 시켜보았다.

GameObject obj = GameObject.Find("Image"); 
obj.transform.localPosition = Vector3.zero;

 

앗, 왜 거기로 이동하니?

이것은 RectTransform 의 원점과 Transform 의 원점이 다르기 때문이다.

인스펙터 상에서 (0, 0) 로 셋팅하면 RectTransform 기준으로 원점으로 이동하지만, localPosition 으로 (0, 0) 을 셋팅하면 Transform 기준으로 원점으로 이동한다.

Transform 의 원점이 왜 부모 객체(Panel)의 좌하단일까? 부모의 Pivot 이 거기 있기 때문이다. 

부모의 Pivot 은 (0, 0) 이라고 했다. 

그럼 부모의 Pivot 을 (0.5, 0) 으로 옮겨서 테스트 해보자. 

역시...

 

원점의 기준을 정리하자면 다음과 같다.

  RectTransform (인스펙터, 코드) Transform (코드로만 조작 가능)
원점 기준 자신의 Anchor 부모의 Pivot
포지션을 코드로 조작하는 법 RectTransoform rt = transform as RectTransform;
rt.anchoredPosition = Vector3.zero;
transform.localPosition = Vector3.zero;

 

 

** 위의 실험들의 알려지지 않은 조건들은 모두 Unity 프로그램의 default 값들입니다.