유니티 기본 툴에대해 다룰 예정이기 때문에 2D 기준으로 기록하겠다.
RectTransform
스크린 전용 Transform 역할 컴포넌트
앵커 Anchor
캔버스 상에서의 기준점
- 오브젝트의 Transform 컴포넌트의 아이콘을 눌러서 앵커의 위치를 바꿀 수 있다.
- 화면에서 X모양의 아이콘이 앵커의 위치이다. 직접 드래그해서 움직일 수도 있다.
피봇 Pivot
오브젝트 위치의 기준점
오브젝트의 왼쪽 아래 꼭지점을 0으로 했을 때, 가로, 세로의 길이를 0~1사이로 나누어 피봇의 위치를 특정한다.
- 앵커를 센터로하고, 피봇을
x : 0,y : 1로 잡으니 왼쪽위 꼭지점이 오브젝트의 기준점이 되는 모습. - 파란색 동그라미 아이콘을 직접 움직여 조절할 수 있다.
- 물론 0~1을 벗어나게도 기준을 잡을 수 있다.
- 쉬프트를 누른 상태로 앵커를 조정할 시 피봇을 함께 지정할 수 있다.
- 쉬프트를 누르면 피봇이 어디로 지정될 지도 떠있다.
Position
큰 의미가 있나 싶은 앵커와 피봇에 대한 개념을 확실하게 이해해야하는 이유는 유니티 개발을 하면서 백날천날 건드리는 position 값을 결정하기 때문이다.
이 포스팅에서 아래 한문장이 가장 중요한 것 같다. 모르고 개발하는 사람이 많은것 같다.
Transform의 position은 앵커와 피봇간의 거리이다!
- alt를 누르고 앵커 조정 시 포지션도 그에 맞춰 조정해주는 기능을 지원한다
- 오브젝트의 초기설정을 잡고 싶을 때 shift + alt 앵커 조정을 하곤 한다.
스트래치 stretch
앵커의 아이콘을 보면 네개의 화살표가 있다. 각각의 화살표를 잡고 당길 수 있다.
- 좌우로 당기면
PosX→Left,Width→Right로 바뀌는 것을 확인할 수 있다.
- 상하로 당길경우
PosY→Top,Height→Bottom으로 바뀐다.
스트레치는 캔버스의 각 면이 각 앵커로부터 얼마나 떨어져있는지를 따진다.
- 양 끝으로 앵커를 늘려놓고 position의 left를 100, right를 200으로 설정한 모습
반응형 UI
해당 기능들이 개발 시에도 유용하지만 결과적으로 해상도에따라 유연하게 ui가 적용되는 반응형 ui를 구현하기 위해서 사용된다.
캔버스를 기준으로 오브젝트와 화면의 면이 떨어져있는 정도를 정해놓다 보니 반응형 구현의 기초개념이 될 것이다.
자세한 내용은 다음 포스트 HUD에서 다시 다룰예정이다.
