Godot:GUI

Godot에서 GUI 구성하는 방법 정리.

화면 전체 크기 잡기

루트 노드는 MarginContainer로 지정한다. (마진을 0으로도 조절할 수 있고 여러모로 사용하기 좋다) 그리고 상단의 Leyout 버튼(Godot-layout-button.png)을 클릭하여 Full Rect를 선택한다. 이렇게 하면 앵커(Anchor)가 전체 화면으로 잡히기 때문에 초기 화면 구성을 쉽게 진행할 수 있다.

Godot-layout-full_rect.png

WARNING
이후의 모든 컨트롤은 Margin, Rect 를 수정해선 안된다. 자세한 내용은 Godot:Container 항목 참조.

Tutorial

화면 구성하는 방법에 대한 Step-by-step

배경 그래픽을 추가하다

부모 컨테이너가 MarginContainer이므로 SizeFlag는 모두 Fill (기본값)이면 전체 화면에 배경이 칠해진다.

Godot-gui-tutorial-01.png

HUD 배치

중앙에 배치해야 하므로 CenterContainer을 추가.

Godot-gui-tutorial-02.png

타이틀 배치를 위한 컨테이너 추가

"회사명 -> 타이틀 -> 로그인 GUI" 순서로, 세로배치를 위한 VBoxContainer를 추가한다. 각각의 컨트롤 사이 간격을 벌려주기 위해 Custom Constants의 Separation 속성을 40으로 늘려준다.

Godot-gui-tutorial-03.png

회사명 라벨

"회사명" 텍스트는 Label로 배치한다. 폰트와 색상을 변경하면 된다.

Godot-gui-tutorial-04.png

타이틀 이미지

"타이틀" 이미지는 TextureRect로 배치한다.

Godot-gui-tutorial-05.png

로그인 GUI를 위한 컨테이너 추가

다시 로그인 GUI의 "ID/PW 입력박스 -> 하단 Link 버튼" 순서 배치를 위한 VBoxContainer를 추가한다. 각각의 컨트롤 사이 간격을 벌려주기 위해 Custom Constants의 Separation 속성을 20으로 늘려준다. 그리고 하위 컨트롤은 강제로 늘려주지 않고, 가로 방향에 대하여 중앙 배치 해야 하므로 Size Flag는 Shrink Center로 선택한다.

Godot-gui-tutorial-06.png

"ID/PW"과 "로그인"배치를 위한 컨테이너

HBoxContainer를 추가한다. 각각의 컨트롤 사이 간격을 벌려주기 위해 Custom Constants의 Separation 속성을 7으로 늘려준다.

Godot-gui-tutorial-07.png

"ID"와 "PW"배치를 위한 컨테이너

VBoxContainer를 추가한다. 각각의 컨트롤 사이 간격을 벌려주기 위해 Custom Constants의 Separation 속성을 7으로 늘려준다. 세로 방향에 대하여 중앙 배치 해야 하므로 Size Flag는 Shrink Center로 선택한다.

Godot-gui-tutorial-08.png

"ID" 버튼을 위한 컨테이너

"ID" 추가를 위해 LineEdit를 바로 추가하면 안된다. 배경 이미지 크기 만큼 컨테이너 영역 확보가 안되기 때문이다. 따라서 배경 영역 만큼 컨테이너 공간 확보를 위해 별도의 컨테이너 배치가 필요하다. 가장 만만한 MarginContainer를 추가한다.

Godot-gui-tutorial-09.png

"ID" 버튼: 배경

배경 영역을 컨테이너에 위치시키기 위해 TextureRect를 추가하고 이미지를 적용한다.

Godot-gui-tutorial-10.png

"ID" 버튼: 입력 커서 위치 조정을 위한 마진

입력 커서를 바로 추가하면 커서 위치가 배경에 딱 들어맞지 않는다. MarginContainer을 사용하여 약간 마진을 줘야 한다. Custom Constraints 의 Margin Left 값을 10만큼 입력한다.

Godot-gui-tutorial-11.png

"ID" 버튼: 입력을 위한 Edit

드디어 LineEdit를 추가한다. 중요한 점은 이미 배경을 선택했기 때문에 LineEdit의 배경은 모두 제거해야 한다. 폰트 선택및 색상 선택, PlaceHolder도 수정한다.

Godot-gui-tutorial-12.png

"PW" Edit

동일하게 "PW" 버튼을 위한 컨테이너 배치도 진행한다. 다만 비밀번호는 화면에 출력되면 안되므로 Secret 속성을 Enable 해야 한다.

Godot-gui-tutorial-13.png

로그인 버튼 버튼

TextureButton을 추가한다.

Godot-gui-tutorial-14.png

링크 버튼들을 위한 컨테이너

가로로 배치해야 하므로 HBoxContainer를 추가한다.

Godot-gui-tutorial-15.png

"Join" 버튼 추가

LinkButton으로 추가한다.

Godot-gui-tutorial-16.png

빈 공간

다음에 위치될 "아이디 비밀번호 찾기" 버튼을 오른쪽 끝으로 배치해야 하므로 남은 중심 영역을 모두 확장해야한다. 따라서 가로 방향 Size Flag 에 Expand 속성을 추가하면 된다.

Godot-gui-tutorial-17.png

"아이디 비밀번호 찾기" 버튼 추가