Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

크기 및 앵커

게임이 항상 동일한 장치와 동일한 해상도로 실행된다면 위치 제어는 각 게임의 위치와 크기를 설정하는 간단한 문제일 것입니다. 불행히도 그런 경우는 거의 없습니다.

일부 구성은 다른 구성보다 더 일반적일 수 있지만 휴대폰, 태블릿, 휴대용 게임 콘솔과 같은 장치는 크게 다를 수 있습니다. 따라서 다양한 종횡비, 해상도 및 사용자 크기 조정을 고려해야 하는 경우가 많습니다.

이를 설명하는 방법은 여러 가지가 있지만 지금은 화면 해상도가 변경되어 컨트롤 위치를 변경해야 한다고 가정해 보겠습니다. 일부는 화면 하단을 따라야 하고 다른 일부는 화면 상단을 따라야 하며 오른쪽이나 왼쪽 여백을 따라야 할 수도 있습니다.

이는 여백과 유사하게 동작하는 컨트롤의 앵커 오프셋*을 편집하여 수행됩니다. 이러한 설정에 액세스하려면 먼저 *사용자 정의 앵커 사전 설정을 선택해야 합니다.

각 컨트롤에는 컨트롤의 각 가장자리에 해당하는 왼쪽, 오른쪽, 아래쪽, 위쪽의 네 가지 앵커 오프셋이 있습니다. 기본적으로 이들 모두는 상위 컨트롤 또는 (상위 컨트롤이 없는 경우) 뷰포트의 왼쪽 위 모서리를 기준으로 픽셀 단위의 거리를 나타냅니다.

따라서 컨트롤을 더 넓게 만들려면 오른쪽 오프셋을 더 크게 만들거나 왼쪽 오프셋을 더 작게 만들 수 있습니다. 이를 통해 컨트롤의 정확한 배치와 모양을 설정할 수 있습니다.

앵커 속성은 오프셋이 *에 상대적인 위치를 조정합니다. 각 오프셋에는 상위 항목의 시작부터 끝까지 조정할 수 있는 개별 앵커가 있습니다. 따라서 수직(상단, 하단) 앵커는 ``0.0``(상위 상단)에서 ``1.0``(상위 하단)까지 조정되며 ``0.5``가 중심이 되고 제어 오프셋은 해당 지점을 기준으로 배치됩니다. 수평(왼쪽, 오른쪽) 앵커도 마찬가지로 상위 항목의 왼쪽에서 오른쪽으로 조정됩니다.

컨트롤의 가장자리를 기준점 위나 왼쪽에 두려면 오프셋 값을 음수로 변경해야 합니다.

예를 들어 수평 앵커가 ``1.0``로 변경되면 오프셋 값은 상위 컨트롤 또는 뷰포트의 오른쪽 위 모서리를 기준으로 합니다.

두 개의 수평 또는 두 개의 수직 앵커를 다른 값으로 조정하면 상위 컨트롤이 변경될 때 컨트롤의 크기가 변경됩니다. 여기서 컨트롤은 오른쪽 하단 모서리를 부모의 오른쪽 하단에 고정하도록 설정되어 있지만 왼쪽 상단 컨트롤 오프셋은 여전히 부모의 왼쪽 상단에 고정되어 있으므로 부모의 크기를 조정할 때 컨트롤은 항상 부모를 덮고 20픽셀 오프셋을 남깁니다.

프로젝트 생성하기

컨트롤을 상위 컨트롤의 중앙에 배치하려면 해당 앵커를 ``0.5``로 설정하고 각 오프셋을 관련 치수의 절반으로 설정합니다. 예를 들어 아래 코드는 TextureRect가 상위 요소의 중앙에 위치하는 방법을 보여줍니다.

var rect = TextureRect.new()
rect.texture = load("res://icon.svg")
rect.anchor_left = 0.5
rect.anchor_right = 0.5
rect.anchor_top = 0.5
rect.anchor_bottom = 0.5
var texture_size = rect.texture.get_size()
rect.offset_left = -texture_size.x / 2
rect.offset_right = texture_size.x / 2
rect.offset_top = -texture_size.y / 2
rect.offset_bottom = texture_size.y / 2
add_child(rect)

var rect = new TextureRect();

rect.Texture = ResourceLoader.Load<Texture>("res://icon.svg");
rect.AnchorLeft = 0.5f;
rect.AnchorRight = 0.5f;
rect.AnchorTop = 0.5f;
rect.AnchorBottom = 0.5f;

var textureSize = rect.Texture.GetSize();

rect.OffsetLeft = -textureSize.X / 2;
rect.OffsetRight = textureSize.X / 2;
rect.OffsetTop = -textureSize.Y / 2;
rect.OffsetBottom = textureSize.Y / 2;
AddChild(rect);

각 앵커를 ``0.5``로 설정하면 오프셋 참조점이 상위 앵커의 중심으로 이동됩니다. 여기에서 컨트롤이 자연스러운 크기를 갖도록 음수 오프셋을 설정합니다.

프리셋 내보내기

오프셋 및 앵커 값을 수동으로 조정하는 대신 뷰포트 위에 있는 도구 모음의 앵커 메뉴를 사용할 수 있습니다. 센터링 외에도 컨트롤 노드를 정렬하고 크기를 조정할 수 있는 다양한 옵션을 제공합니다.