Godot - UI

CanvasLayer

Godot 에 메뉴 같은 UI 적인 요소를 넣고 싶을 때는 일반적으로 씬의 루트를 CanvasLayer 를 선택해준다.

(그래야 하위 노드들을 만들 때, 설정한 창 크기 기준에 맞춘다거나 할 수 있다.)

 

 

 

MarginContainer

자식 요소를 자동으로 레이아웃하는 데 사용되는 노드다. MarginContainer를 사용하여 각 자식 요소의 마진을 설정하여 요소 간 간격을 만들고, 부모 요소의 크기 조정에 따라 자식 요소의 크기와 위치를 자동으로 조정할 수 있다.

 

MarginContainer 를 선택하고 레이아웃에서 "사각형 전체" 를 선택하면 ViewPort 크기에 맞춰 넒어진다.

 

보통 MarginContainer 안에 있는 노드들을 중앙 정렬 시키고 싶을 때는 Size Flag 속성을 조절하면 된다.

이 때, Min Size 를 지정해야, Shrink Center 했을 때, 중앙에 위치가 맞춰진다. 

(왜 인지는 모르겠다. Godot UI 관련 잘 정리된 문서도 없고, 그냥 이것저것 해보면서 알아야 한다.)

 

PanelContainer

패널 같은 것을 만들 수 있는 컨테이너 (메뉴 창이라던지 모달 같은 느낌)

 

Theme

Gdoot 파일 에디터의 폴더에서 오른쪽 마우스 클릭 -> 새 Resource -> theme 검색 -> 추가 를 통해 만들 수 있다.

보통 resource 혹은 theme 이라는 명의 폴더를 만들어 거기다가 모아 놓는 방식을 사용하는 듯 하다.

 

theme.tres 리소스에서 UI 노드들의 기본 설정값(테마)를 지정할 수 있다.

아래처럼 MarginContainer 항목을 추가해주면 인스펙터에 MarginContainer 속성을 지정할 수 있게 된다.

그리고 해당 테마가 적용된 노드는, 그대로 MarginContainer 값을 상속 받는다.

PanelContainer 항목을 추가해서, Panel 의 기본 Background 색 속성같은 것도 지정가능하다.