[Unity] 유니티 2D UI 오브젝트 위치 변경하기 (orthographicSize)

유니티에서 씬의 3D 공간에 존재하는 게임 오브젝트의 크기를 구하거나 이동을 시키는 경우에 대한 자료는 쉽게 찾을 수 있다. 게임 내에서 오브젝트가 움직이는 것이 게임에서 제일 중요한 부분이기 때문이다.  그러나 2D UI의 경우는 조금 이야기가 다르다. 게임에서 실제로 크게 중요하지 않은 부분이어서 2D 게임을 만드는 경우를 제외하면 사용 빈도가 적기 때문이다.

하지만 유니티로 일반 앱을 만들거나 할 경우에는 2D 공간에서 대부분의 작업을 하게 되는데, 이런 경우 UI 요소의 이동이나 크기 변경에 대한 자료는 찾기가 어려웠다.  쉬운 정답을 찾는데 개인적으로 상당히 애를 먹은 경험 덕에 서론이 길어졌는데, UI 요소의 위치를 변경하는 방법에 대해 남겨보려 한다.

 

 

orthographicSize

 

유니티에서 2D UI는 Canvas에 붙어 생성되고, 이 Canvas는 카메라의 바로 앞에 배치된다. 이런 사실 때문에 2D UI의 rect를 조절할 경우 일반적인 게임 오브젝트와 단위가 달라 고생하게 된다. 이런 경우 정답은 카메라에 비춰지는 화면 영역의 사이즈를 참조해 위치를 변경하는 것이다. 

Camera.orthographicSize가 바로 그 핵심이다. Orhographic에 대해 찾아보면 여러 가지 멋진 설명이 있는데, 3D에 관심이 없는 나로서는 솔직히 별로 알고 싶지 않은 설명들 이었다.

 

Camera.orthographicSize에 대한 가장 간단하고 명쾌한 설명은 이 값이 앱이 표시되는 화면 높이의 절반이라는 것이다. 이 값을 이용해 2D UI 오브젝트의 rect를 수정할 수 있다.

 

 

transform.localPosition

 

2D오브젝트의 위치는 gameObject.transform.localPosition에 들어있다. 이것을 읽어서 현재의 위치를 알 수 있고, 또 이 값을 수정해 위치를 변화시킬 수 있다.

여기서 먼저 중요한 점은 localPosition의 값이 물체의 pivot값이라는 점이다. Inspector에서 RectTransform을 보면 물체의 어떤 위치가 좌표의 값인지 알 수 있다. 보통은 center/middle로 되어 있을 것이기에 가장 중심점의 좌표가 된다. 물론 변경이 가능하다.

 

 

좌표계

마지막으로 중요한 점은 localPosition의 좌표는 left,top부터 right,bottom까지 (0,0)부터 시작해 (n,n)으로 끝나는 좌표계가 아니라는 점이다. 전체 화면의 가운데 0,0이며 좌측/아래쪽은 -값을 우측/위는 +값이다. 이것도 Canvas 설정 등에서 변경이 가능할지도 모르지만 찾아보진 않았다.

 

 

예제

 

설명이 길었는데, 코드는 간단하다. 그럼 지금까지 언급한 사실을 종합해서 UI 오브젝트의 위치를 옮겨보자. 먼저 화면의 정가운데로 옮기는 예제이다. (center, center)

GameObject obj = object_to_move; 
Vector3 position = obj.transform.localPosition; 
position.x = 0; 
position.y = 0; 
obj.transform.localPosition = position; 

다음은 화면의 중앙에서 위쪽 끝으로 오브젝트를 옮긴다. (center, top)

// 화면 높이의 절반 구하기 
float screenHeightHalf = Camera.main.orthographicSize; 

// 오브젝트 이동 
GameObject obj = object_to_move; 
Vector3 position = obj.transform.localPosition; 
position.x = 0; 
position.y = screenHeightHalf; 
obj.transform.localPosition = position; 

다음은 화면 중앙에서 오른쪽 끝으로 오브젝트를 옮긴다. (right, center)

// 화면 높이의 절반 구하기 
float screenHeightHalf = Camera.main.orthographicSize; 

// 화면 넓이의 절반 구하기 
float screenWidthHalf = screenHeightHalf * Camera.main.aspect; 

// 오브젝트 이동 
GameObject obj = object_to_move; 
Vector3 position = obj.transform.localPosition; 
position.x = screenWidthHalf; 
position.y = 0; 
obj.transform.localPosition = position; 

마지막으로 화면 왼쪽 제일 아래로 오브젝트를 옮긴다. (left, bottom)

// 화면 높이의 절반 구하기 
float screenHeightHalf = Camera.main.orthographicSize; 

// 화면 넓이의 절반 구하기 
float screenWidthHalf = screenHeightHalf * Camera.main.aspect; 

// 오브젝트 이동 
GameObject obj = object_to_move; 
Vector3 position = obj.transform.localPosition; 
position.x = -screenWidthHalf; 
position.y = -screenHeightHalf; 
obj.transform.localPosition = position; 

위 예제를 보면 2D UI의 오브젝트 위치가 쉽게 이해될 것이다.

6줄 요약은 다음과 같다.

화면 높이 = 2 * Camera.main.orthographicSize 
화면 넓이 = 2 * (화면 높이 * Camera.main.aspect) 
Left,Top 좌표 = -화면 넓이/2, 화면 높이/2 
Left,Bottom 좌표 = -화면 넓이/2, -화면 높이/2 
Right,Top 좌표 = 화면 넓이/2, 화면 높이/2 
Right,Bottom 좌표 = 화면 넓이/2, -화면 높이/2 


Fin.