일반적인 Transform과 다르게 UI를 만들어보면 Rect Transform이라는 컴포넌트를 가지고 있다.
트랜스폼은 포지션, 로테이션, 스케일의 값을 가지고 있는 반면 렉트 트랜스폼은 로테이션, 스케일 말고도 다양한 값을 가지고 있다.
그중에서 가장 눈에 가는 것이 자주 쓰이는 앵커(anchors)를 모아둔 앵커 프리셋이다.
앵커 프리셋 설명에 앞서 앵커에 대해 알아보면
앵커는 UI 위치의 기준점이라 볼 수 있다.
이 기준점은 UI의 부모 오브젝트의 영역을 대상으로 하는데 부모가 Screen Space - Overlay로 렌더링된 캔버스일 경우 스크린 전체가 캔버스가 된다.
고로 이미지의 앵커가 middle center면 아래 사진과 같이 스크린의 정중앙에 네모 이미지가 위치하는 것을 알 수 있다.
르탄이 이미지의 Pos X를 220로 변경하면 아래와 같은 결과를 얻을 수 있다.
앵커는 씬창에서 바람개비 같은 모양으로 표시되고 앵커를 기준으로 X축 +방향으로 220만큼 멀어져 위치한 것을 확인할 수 있다.
이처럼 앵커는 UI 위치의 기준점이라 할 수 있다.
간단한 수학으로 이해해보자
2차원 좌표계로 따지면 앵커는 (0, 0)
즉 원점이라 할 수 있다.
원점이 있으니 UI의 위치를 좌표(Pos X, Pos Y)로 나타낼 수 있는 것이다.
그렇다면 앵커 프리셋은 뭘까?
앵커 프리셋이란 자주 쓰이는 앵커의 위치에 대한 여러 프리셋들을 모아둔 것이라 할 수 있다.
주황색 점이 앵커의 위치가 된다.
만일 예를 들어 좌측 하단의 프리셋으로 앵커를 바꾸려고 시도해보자
그런데 오브젝트는 그대로 있다.
왜 일까? 왜냐면 UI 위치의 기준점만 달라지는 거지 오브젝트의 위치가 달라지는 것이 아니다.
기준점이 달라졌기에 렉트 트렌스폼의 값이 바뀔지 언정 오브젝트는 그대로 있는 것이다.
그러면 오브젝트까지 움직이고 싶으면 어찌해야하는가?
그럴 때는 윈도우에선 alt키, mac에서는 option키를 누르면 된다.
alt(mac: option)를 누르면 프리셋이 위와 같이 변한다.
네모안의 하얀색 선의 네모가 오브젝트로 보면 된다.
bottom left를 보면 오브젝트가 좌측하단에 달라붙어있는 것을 볼 수 있다.
고로 alt를 누른 상태서 bottom left를 선택해주면
의도대로 이미지가 좌측 하단에 붙어있는 것을 볼 수 있다.
다시 앵커 프리셋으로 돌아와보자
stretch가 있는 부분은 앵커가 2개 혹은 4개가 있는 것을 알 수 있다.
이는 앵커가 점이 아닌 점을 이은 선으로 변하는 것이다.
하나를 예시로 선택해보자
화살표로 가리킨 좌측 맨아래의 stretch left를 선택해보자
해당 strectch를 선택하면 좌측의 두 앵커를 잇는 빨간선이 기준선이 된다.
빨간선은 X 좌표의 기준선이 된다.
점이 아니라 수직의 선이기 때문에 좌우의 X값은 판별이 가능하지만 상하의 Y값을 판별해줄 수가 없다.
X에 대한 기준선은 남아있기에 Pos X 값은 그대로 있다. 다만 Y는 판별이 안되니 Pos Y가 사라지고 Top이 생겼으며 Height 대신 Bottom이 생겼다.
만일 앵커 프리셋 중 top stretch 를 골랐다면 아래와 같이 변한다.
두 앵커를 잇는 빨간선은 Y 값의 기준선이 될 것이라 Pos Y 값은 살아있고 X값은 판별이 어려우니 X값이 변경되는데 X는 Left Width는 Right로 변해있다.
그래서 대체 Left Right Top Bottom이 무엇이냐..
위의 그림과 같이 설명할 수가 있다.
부모 UI의 경계 테두리 선으로부터 UI가 얼마나 떨어져있는 지를 Left, Right, Top, Bottom로 나타낸다.
즉 이 간격을 조절함에 따라 이미지의 크기도 바뀔 수 있다는 것이다.
top stretch를 골랐을 경우
윗(Top)쪽의 경계선이 기준선이 되었으니 Pos Y와 Height는 그대로 쓰는 것이고
X에 대한 기준이 사라졌으니 Pos X와 Width대신 Left와 Right를 쓰게 된다.
간격을 유지해야하기에 만일 Left값을 줄이면 왼쪽으로 이미지가 늘어날 것이고 Left 값을 늘리면 오른쪽으로 이미지가 줄어들 것이다.
Left, Right, Top, Bottom 값은 스크린의 비율이 달라져도 값을 유지하기에
스크린 비율에 따라 하얀 네모가 길쭉해질 수도 줄어들 수도 있는 것이다.
롤 같은 게임에서 하단에 체력이나 마나 같은 정보창이 뜨는데
그런 것을 만들 때 buttom stretch로 적절한 Left Right 값을 부여하여 세팅을 할 수가 있게 된다.
위에서 언급했듯이 alt(mac: option)를 눌러 세팅하면 오브젝트도 이동하기 때문에 상단바나 하단바 제작을 빠르게 할 수 있다.
우측 가장 하단의 stretch, stretch의 경우엔 네 꼭짓점에 앵커가 존재하여 모든 테두리가 기준선이 되어 버린다.
즉 Pos X, Pos Y 값을 사용하지 않고 오로지 Left, Right, Top, Bottom 값으로 조절하겠다는 의미다.
alt(mac: option)을 눌러 선택하면 UI가 부모 캔버스에 꽉차게 되는 결과를 볼 수가 있다.
앵커 프리셋에서 쉬프트를 누르면 위의 그림과 같이 파란색 점이 추가가 된다.
주황색 점은 앵커라 했는데 파란색 점은 무엇이냐면 피봇(Pivot)이다.
Pivot
그렇다면 피봇(Pivot)은 무엇일까?
피봇은 UI의 위치가 되는 점이다.
즉 UI의 좌표가 되는 점을 정하는 것이다. 앵커를 기준으로 피봇의 위치가 UI의 좌표가 된다.
피봇은 기본값이 0.5, 0.5 로 아래의 사진과 같이 정중앙에 위치한다.
그렇기 때문에 앵커 프리셋을 middle center로 한다면 UI 좌표가 0, 0 이 나올 수가 있는 것이다.
피봇이 왼쪽에 가있으면 Pos X나 Pos Y 값이 0이 아닌 값이 나오게 된다.
이는 앵커를 기준으로 피봇의 위치가 Rect Transform의 포지션 이기 때문이다.
앵커 프리셋 중에 위와 같이 buttom left를 고르고 shift와 alt(mac: option)를 눌러 오브젝트도 피봇도 좌측 하단으로 오게하면 재미있는 일이 생기는데
만일 부모 캔버스가 스크린 전체일 경우라면
부모 영역, 즉 스크린 전체에서 왼쪽하단에 피봇이 위치하게 되어 앵커를 기준으로 피봇의 위치는 (0, 0)이 된다.
이것이 곧 rectTransform의 값이며
이는 스크린 좌표계와 같은 값이다.
스크린 좌표계는 스크린의 왼쪽하단을 (0, 0)으로 하기에 같은 값이다.
이를 이용하여 아래와 같은 코드를 업데이트문에 추가해보자
rectTransform.anchoredPosition = Input.mousePosition
마우스위치에 이미지가 따라다니는 것을 볼 수 있다.
유니티 공식 문서에서도 Input.mousePosition의 (0, 0)은 bottom-left 라 설명하고 있다.
이미지를 커서 모양으로 바꿔주면 커서를 꾸며줄 수도 있는 것이다.
단 이 때 캔버스는 Screen Space - Overlay로 렌더링 되어있어야 한다. 왜 그래야 하는 이유는 이전 글을 보면 이해가 될 것이다.
'유니티' 카테고리의 다른 글
| 유니티 - 애니메이션 (0) | 2024.05.24 |
|---|---|
| 유니티 아크탄젠트(Atan2)에 대하여 (0) | 2024.05.13 |
| 유니티 PlayerPrefs (0) | 2024.04.18 |
| 유니티 캔버스(Canvas)와 Render Mode (0) | 2024.04.16 |
| 유니티 C# OrderBy와 ThenBy (0) | 2024.04.15 |