고도 엔진 (Godot) : 크기, 위치, 여백

노드의 크기, 위치, 여백을 설정하는 방법을 알아보자.기본적으로 크기와 위치는 부모노드를 기준으로 설정하게 되는데, 쉬운 설명을 위해 ColorRect 노드를 2D 씬의 Root 노드로 만들어서 화면 기준으로 어떻게 설정이 가능한지 예를 들어보겠다.

ColorRect 노드를 추가하는 방법은 https://drogrammer.tistory.com/20 를 참고하자. Label 대신 ColorRect를 추가하면 된다.

1. 상대 크기 및 위치

노드를 배치할 때, Anchor를 사용하면 부모 노드 기준으로 비율적인 크기와 위치를 설정할 수 있다. 참고로 Anchor의 Left, Top, Right, Bottom 각각 0.0 ~ 1.0 사이의 값을 입력할 수 있다. 

몇가지 예를 들어보자.

• 화면에 꽉 채우기 : Left (0.0), Top (0.0), Right (1.0), Bottom (1.0)

Anchor: 전체 화면

 

• 좌상단 기준 1/4 크기 : Left (0.0), Top (0.0), Right (0.5), Bottom (0.5)

Anchor: 좌상단 기준 1/4

 

2. 고정 크기 및 위치

노드를 배치 할 때, 고정된 크기와 가로/세로 비율을 유지하고 싶을 때가 있다. 하지만, 기기마다 화면의 크기 및 가로/세로 비율이 모두 다르기 때문에, Anchor 만으로는 고정된 크기 및 비율을 유지할 수가 없다. 

따라서, Anchor로 위치만 설정하고 노드의 Min Size 및 Grow Direction 속성으로 고정 크기를 표현 하는 방식을 사용해야 한다.

Min Size : 최소 크기 Hint
Grow Direction : 사이즈를 늘리는 방향 (begin: 좌 혹은 위로 늘림, both: 좌,우 혹은 위, 아래 동시에 늘림, end: 우 혹은 아래로 늘림)

설명이 어려우니 예를 들어보자.

• 화면 중앙부터 우측 아래로 100x100 : Anchor(0.5, 0.5, 0.5, 0.5), Min: (100, 100), Grow Direction (End, End)

화면 중앙부터 우측 아래로 100x100

 

• 화면 중앙에 100x100 : Anchor(0.5, 0.5, 0.5, 0.5), Min: (100, 100), Grow Direction (Both, Both)

화면 중앙에 100x100

 

• 화면 중앙부터 좌측 상단으로 100x100 : Anchor(0.5, 0.5, 0.5, 0.5), Min: (100, 100), Grow Direction (Begin, Begin)

화면 중앙부터 좌측 상단으로 100x100

 

3. 여백

Margin 은 여백을 의미한다. 예를 들어 전체 화면에서 좌, 상, 우, 하단에 20의 여백을 넣어보자.

Margin: 좌, 상, 우, 하 여백 20