본 내용은 처음 접하는 Godot: Pong 게임을 만들어 보자 #4 에서 독립적인 내용을 추출한 포스팅 입니다.
고정된 해상도의 스크린이라면 문제가 매우 간단하나, 현실에서는 각종 모니터부터 핸드폰까지 여러 형태의 스크린 사이즈가 존재한다. 앵커 시스템은 가변적인 스크린 또는 부모 컨트롤 사이즈에 대응하기 위한 방법이다. 유니티에서도 이걸 사용하고 있다. 다음 그림을 보자.
그림이 복잡해 보일지 모르겠는데, 간단한 개념이다. 가장 큰 사각형이 뷰포트, 스크린 사이즈라고 생각한다면, 먼저 기준점이 되는 앵커를 박는다. 닻을 의미하는 앵커라고 하는 이유는 스크린 사이즈에서 해당 위치에 고정되기 때문이다. 다만, 고정되는 위치가 절대적인 좌표가 아닌 스크린의 비율에 맞는 위치가 된다. 비율로 따지기 때문에 Anchor Left/Right의 경우, 0~1 사이 값을 가지며, 0은 왼쪽 끝, 1은 오른쪽 끝이된다. Anchor Top/Bottom의 경우에도 0~1사이 값이며 0이 최상단, 1은 최하단을 의미한다. 이 값은 Control을 선택한 후, Inspector에서 Control>Anchor 부분에서 확인가능하다. 아래 이미지는 Godot에서 임의로 앵커위치를 시키고 버튼 컨트롤을 위치시킨 모습이다.
위 이미지에서 앵커는 녹색 핀셋모양으로 표시된다. 이 경우, Inspector에서 Control>Anchor를 확인해 보면 다음과 같다.
Anchor의 Left, Top, Right, Bottom이 0~1 사이값으로 표시됨을 확인 할 수 있다. 조금 혼동할만한 부분은 Right라고해서 오른쪽이 기준점이 아니라는 점이다. 왼쪽이 0, 오른쪽을 1로 봤을 때, 그 중간 위치값이다.
그 다음, Margin값은 앵커로부터 거리를 나타낸다. 앵커는 화면 비율이었지만, Margin값은 실제 해상도(픽셀) 값이다. 또한, 각각 Margin Left는 Anchor Left로부터의 거리, Margin Right는 Margin Right로부터의 거리로 표시된다. 즉, 위 버튼처럼 앵커 사각형 내부에 존재하는 경우, Margin Right는 마이너스의 값을 갖는다. 위 버튼의 경우, Inspector에서 Margin값을 살펴보면 다음과 같다.
Margin값이 픽셀 단위로 표시되고, Right값은 마이너스인걸 확인 할 수 있다.
앵커는 스크린 사이즈에 따라 변경이 된다. 또한, 컨트롤의 각 모서리가 각 앵커에 고정되어 있는 형태이므로 컨트롤도 앵커를 따라 움직이거나 크기가 변형될 수 있다. 위의 버튼 예제에서 Inspector의 Anchor값을 움직여 보면, 버튼이 늘어나고 줄어든걸 확인 가능하다.
이걸 이용하면, 다양한 사이즈의 화면 크기에 맞게 UI 크기도 맞출 수 있는 것이다.
그림에선 마치 앵커 사각형내에 컨트롤이 위치하는 것처럼 보이지만, 앵커의 위치는 화면 어디에나 가능하기 때문에, 얼마든지 임의로 배치가 가능하다. Unity에서도 앵커 시스템을 사용한다고 했는데, 유니티 문서에 보다 이해가 쉬운 직관적인 이미지가 있어 가져와봤다.
위 이미지는 앵커가 모두 중앙에 모여있는 경우이다. 이렇게 앵커를 모아놓으면 컨트롤을 화면에 상대위치에 배치하면서 컨트롤 자체의 크기 변경은 일어나지 않는다.
앞에서와 비슷하지만, 오늘쪽 아래에 앵커를 모두 모아놓은 경우이다. 높이 변경에는 비율대로 움직이지만, 폭의 변경에는 오른쪽을 따라가서 왼쪽이 넓어지는걸 볼 수 있다.
이 경우는 앵커가 좌우 아래에 모여있다. 높이의 변경은 이전과 같게 동작하지만, 폭의 변경에는 좌우가 고정되어 있으므로 컨트롤의 폭도 같이 변경되고 있다.