타이틀 화면 만들기

이 다음 두 개의 튜토리얼에서, 당신은 엔진의 UI 시스템을 사용해서 두 개의 반응 형 UI (사용자 인터페이스) 씬을 단계별로 만들게 될 것입니다:

  1. 메인 메뉴
  2. 체력 막대, 에너지 막대, 폭탄과 돈의 수를 표시하는 게임 UI

어떻게 게임 UI를 효율적으로 설계하는지, 그리고 어떻게 Godot의 컨트롤 노드를 사용하는지 배울겁니다. 이 페이지에서는 시각적인 부분에 중점을 두겠습니다: 모든 것은 편집기에서 할 수 있습니다. 어떻게 체력 막대를 코딩하는지 배우려면 코드를 통해 게임의 UI를 제어하기를 읽어주세요

../../_images/ui_main_menu_design_final_result.png

당신이 곧 만들게 될 GUI

프로젝트 파일을 내려받으세요: ui_main_menu_design.zip 그리고 압축을 푸세요. 이 튜토리얼을 따라오려면 Godot에 start/ 프로젝트를 가져오세요. end/ 폴더는 결과물이 들어있습니다. 모든 스프라이트는 start/assets/main_menu 폴더에서 찾으실 수 있습니다.

게임 UI를 디자인하는 방법

좋은 UI를 디자인하기 위해, 당신은 대략적인 모형을 먼저 생각해내고 싶습니다: UI 구성 요소들의 위치 및 크기, 사용자 상호작용에 초점을 둔 평범한 그림으로 말입니다. 펜과 종이로 할 수 있습니다. 이 부분에서는 화려한 최종 그래픽을 사용하지 않는 것이 좋습니다. 그러므로, 당신은 간단한 자리 표시 스프라이트만 가지고 Godot로 뛰어드는 겁니다. 이것을 사용하여 플레이어가 인터페이스 주변에서 자신의 길을 찾을 수 있도록 확인하려고 합니다.

../../_images/ui_design_rough.png

UI의 대략적인 계획이나 모형

자리 표시자가 꼭 지저분할 필요는 없지만, 그래픽을 간단하고 깨끗하게 유지해야 합니다. 당신이 UI를 실행 및 테스트 하기 전까진 특수 효과나, 애니메이션, 그리고 구체적인 삽화는 피하세요. 그렇지 않으면:

  1. 그래픽이 플레이어의 경험에 의한 인식에서 벗어나고 귀중한 피드백을 놓칠 수도 있습니다
  2. User Experience가 제대로 작동하지 않으면, 일부 스프라이트를 다시 실행해야 합니다

참고

항상 먼저 간단한 문자와 상자로 인터페이스 작업을 해보세요. 나중에 텍스처를 쉽게 교체할 수 있습니다. 전문적인 UX 디자이너들은 작업을 흑백으로 된 선과 상자만으로 작업하기도 합니다. 당신이 색깔이나 멋진 비주얼을 멀리할 때, UI 요소들을 적절하게 배치하고 크기를 조정하기가 훨씬 쉬워집니다. 이를 기초로 하여 디자인 기반을 수정할 수 있습니다.

Godot에는 UI를 디자인하는 두 가지 방법이 있습니다. 먼저 당신은:

  1. 하나의 씬에 모든 것들을 제작하여, 결국 몇 개의 분기를 재사용 가능한 씬으로 저장할 수 있습니다
  2. 혹은 재사용 가능한 구성 요소들을 위한 템플릿 씬들을 만들고 기본 씬에 종속 시킬 특정 구성 요소들을 만들 수 있습니다

우리는 첫 번째 접근 법을 사용할 것입니다, 왜냐하면 처음으로 만든 UI는 당신이 원하는 대로 잘 작동하지 않을 수 있기 때문입니다. 아마 당신은 일부분을 버리고 구성 요소를 다시 디자인할 것입니다. 모든 것이 작동된다고 확신할 때, 아래에 보시는 바와 같이 일부분을 재사용 가능하게 만들기는 쉽습니다.

../../_images/ui_main_menu_placeholder_assets.png

Godot에서 찾을 수 있는 파일들. 대략적인 디자인보다 더 깨끗해 보이지만, 그들은 여전히 플레이스 홀더입니다

메인 메뉴 디자인하기

편집기로 가기 전에, 우리는 모형 이미지를 통해 어떻게 컨테이너를 중첩할 지 계획을 세워야 됩니다.

UI 모형 파헤치기

적당한 컨테이너를 찾는 저의 세 가지 규칙이 있습니다:

  1. UI를 모든 것을 포괄하는 가장 큰 것부터, 라벨을 가진 막대나 버튼을 가진 패널같이, 하나의 위젯을 포함하는 가장 작은 것까지 중첩된 상자로 분해해야 합니다
  2. 영역 주변을 메꾸어야 한다면, MarginContainer 를 사용해야 합니다
  3. 요소들을 열이나 행으로 배열한다면, HBoxContainerVBoxContainer 를 사용해야 합니다

이 규칙들로 충분히 우리는 시작할 수 있고, 간단한 인터페이스 설계도 잘 할 수 있습니다.

메인 메뉴에서, 가장 큰 상자는 전체 게임 창입니다. 창의 모서리와 첫 번째 구성 요소 사이에는 여백이 있습니다: 이들은 MarginContainer 가 되야합니다. 그 후, 화면은 두 열로 나뉘기에, HBoxContainer 를 사용합니다. 왼쪽 열에서는, 우리는 VBoxContainer 로 그 행을 관리할 것입니다. 그리고 오른쪽 열에서, CenterContainer 로 그림을 중앙에 위치하게 할 것입니다.

../../_images/ui_mockup_break_down.png

세 가지 규칙을 사용하여 세분화된 인터페이스 건축 블록

참고

컨테이너는 창의 해상도와 가로-세로 비율에 맞춰 조정됩니다. 비록 우리가 UI 요소들을 손으로 놓을 순 있지만, 컨테이너는 더 빠르고 더 정확하며, 반응이 빠릅니다.

메인 메뉴 씬 준비하기

메인 메뉴를 만들어 봅시다. 하나의 씬에 메뉴를 만들겠습니다. 아무것도 없는 씬을 생성하기 위해, 씬 메뉴 -> 새 씬을 클릭합니다.

씬을 저장하기 전에 루트 노드를 추가해야 합니다. UI의 루트 노드는 가장 바깥쪽의 컨테이너나 요소가 되어야 합니다. 이 경우에는 MarginContainer 가 되어야겠군요. MarginContainer 는 대부분의 인터페이스에 있어 좋은 출발점이 되는 것이, UI 주변에 여백을 메꾸어야 하기 때문입니다. Control+S 를 눌러 씬을 저장합니다. MainMenu 로 이름을 짓습니다.

MarginContainer 를 다시 선택하고, 인스펙터로 가서 마진의 크기를 정의하세요. Control 클래스에서, Custom Constants 섹션으로 창을 내려보세요. 그것을 펼치세요. 다음과 같이 마진을 설정하세요:

  • Margin Right: 120
  • Margin Top: 80
  • Margin Left: 120
  • Margin Bottom: 80

We want the container to fit the window. In the toolbar above the Viewport, open the Layout menu and select the last option, Full Rect.

UI 스프라이트 추가하기

MarginContainer 를 선택하고, TextureRect 노드와 같은 UI 요소들을 만드세요. 우리는 이것들이 필요합니다:

  1. 타이틀이나 로고
  2. 독립적인 노드로 된, 세 개의 문자 옵션
  3. 버전 노트
  4. 그리고 메인 메뉴의 삽화

노드 추가 버튼을 누르거나 키보드의 Control+A 를 누르세요. TextureRect 를 검색하고 일치하는 노드를 찾아서 엔터 키를 누르세요. 새로운 노드를 선택하고, Control+D 를 5 번 눌러 다섯 개의 TextureRect 인스턴스를 만드세요.

각 노드를 선택하세요. 인스펙터에서, Texture 속성을 찾고 , [비었음] -> 불러오기를 클릭하세요. 파일 브라우저가 열리면 텍스처 슬롯 안에 있는 스프라이트를 불러올 수 있습니다.

../../_images/ui_texturerect_load_texture.png

파일 브라우저에서 당신은 불러올 텍스처를 찾으실 수 있습니다

Repeat the operation for all TextureRect nodes. You should have the logo, the illustration, the three menu options and the version note, each as a separate node. Then, double click on each of the nodes in the Scene tab to rename them. Nothing has been placed in containers yet so this should look messy.

../../_images/ui_main_menu_6_texturerect_nodes.png

텍스처가 로드된, 여섯 개의 노드들

주석

게임에 현지화를 지원하고 싶다면, 메뉴 옵션에 TextureRect 대신에 Labels 을 사용하세요.

컨테이너를 추가하여 UI 요소들을 자동으로 놓기

우리의 메인 메뉴는 화면의 가장자리에 여백을 가지고 있습니다. 메뉴는 두 부분으로 나뉩니다: 왼쪽은, 로고와 메뉴 옵션이 있습니다. 오른쪽에는, 캐릭터들이 있습니다. 이 작업을 위해 두 개의 컨테이너 중 하나를 사용할 수 있습니다: HSplitContainer 아니면 HBoxContainer 입니다. 분할 컨테이너는 영역을 두 개로 나눕니다: 왼쪽과 오른쪽 아니면 위쪽과 아래쪽으로 말입니다. 또한 조절 막대를 사용하여 왼쪽과 오른쪽 영역의 크기를 조절할 수 있습니다. 반면에, HBoxContainer 는 단지 스스로를 자식의 수 만큼으로 자신을 나눕니다. 비록 분할 컨테이너가 크기 조절 행동을 비활성화 할 순 있지만, 저는 박스 컨테이너를 추천합니다.

MarginContainer 를 선택하고 HBoxContainer 를 추가합니다. 그런 다음, 우리는 HBoxContainer 의 자식으로 두 개의 컨테이너가 필요합니다: 메뉴 옵션에 쓸 VBoxContainer 왼쪽에, 그리고 삽화를 넣을 CenterContainer 가 오른쪽에 있어야 합니다.

../../_images/ui_main_menu_containers_step_1.png

네 개의 중첩된 컨테이너를 갖고 있어야 하고, TextureRect 노드가 밑에 있어야 합니다

노드 트리에서, 왼쪽에 놓을 모든 TextureRect 노드를 선택하세요: 로고, 메뉴 옵션 그리고 버전 노트입니다. VBoxContainer로 드래그 앤 드롭하세요. 노드는 자동으로 위치가 맞춰집니다.

../../_images/ui_main_menu_containers_step_2.png

컨테이너가 자동으로 텍스처를 위치시키고 크기를 조정합니다

우리는 해결해야 할 두 가지 문제가 남았습니다:

  1. 오른쪽의 캐릭터가 중앙이 아닙니다
  2. 로고와 다른 UI 요소들 사이에 공간이 없습니다

오른쪽에 캐릭터가 중앙에 오게 하려면, 먼저 CenterContainer를 선택합니다. 그 후 인스펙터에서, Size Flags 카테고리로 내려가 Vertical 속성의 오른쪽에 있는 영역을 클릭하고, ExpandFill을 체크하세요. Horizontal 속성에도 똑같이 적용합니다. 이렇게 하면 CenterContainerVBoxContainer처럼 모든 이용 가능한 영역으로 펴집니다. 마지막으로 캐릭터를 CenterContainer에 드래그 앤 드롭 하세요. 캐릭터 요소는 자동으로 중앙에 자리 잡을 것입니다.

../../_images/ui_main_menu_containers_step_3.png

캐릭터 노드는 CenterContainer에 배치되자마자 화면의 오른쪽의 중앙에 있습니다

왼쪽에 메뉴 옵션과 로고에 공간을 내기 위해, 우리는 마지막 컨테이너와 사이즈 플래그를 사용할 것입니다. VBoxContainer 를 선택하고 Control+A 를 눌러 컨테이너 안에 새 노드를 추가합니다. 두 번째 VBoxContainer 를 추가하고 "MenuOptions"이라고 이름을 짓습니다. 모든 세 개의 메뉴 옵션, ContinueNewGame 그리고 Options 을 선택하고, 그들을 새로 만든 VBoxContainer 안에 드래그 앤 드랍 합니다. UI의 레이아웃은 거의 변경되지 않아야합니다.

../../_images/ui_main_menu_containers_step_4.png

UI 레이아웃을 유지하기 위해 다른 두 노드 사이에 새 컨테이너를 배치합니다

이제 우리는 메뉴 옵션들을 그룹화하여, 그들의 컨테이너를 가능한 많은 수직 공간을 차지하도록 확장시킬 수 있습니다. MenuOptions 노드를 선택합니다. 인스펙터에서, Size Flags 카테고리로 내립니다. Vertical 속성의 오른쪽 영역을 클릭하고, Expand와 추가로 Fill을 체크합니다. 컨테이너는 모든 사용 가능한 수직 공간을 차지하도록 확장합니다. 하지만 이웃들, LogoVersion 요소들은 그렇지 못합니다.

VBoxContainer 에 노드가 중앙에 있게 하기 위해서, 인스펙터의 위쪽으로 가서 Alignment 속성을 Center 로 바꿉니다.

../../_images/ui_main_menu_containers_step_5.png

메뉴 옵션은 UI의 왼쪽 행에 세로로 가운데에 있어야 합니다

일을 마무리하기 위해, 메뉴 옵션 사이에 간격을 추가합시다. Size Flags 밑에 있는 Custom Constants 카테고리를 확장하고, Separation 변수 옆에 있는 영역을 클릭합니다. 그것을 30으로 설정합니다. 엔터 키를 누르면, Separation 속성이 작동하게 되고 Godot는 메뉴 옵션 사이에 30 픽셀을 추가합니다.

../../_images/ui_main_menu_design_final_result.png

최종 인터페이스

코드 한 줄도 안 쓰고, 우리는 정확하고 반응하는 메인 메뉴를 갖게 되었습니다.

여기까지 오신 것에 축하합니다! 당신의 것과 비교하기 위한 ui_main_menu_design.zip을 내려받으실 수 있습니다. 다음 튜토리얼에서는, 당신은 막대와 아이템 수 카운터가 있는 게임 사용자 인터페이스를 만들 것입니다.

UI 모형 파헤치기

반응 형 사용자 인터페이스는 UI가 모든 화면 유형에 크기를 맞게 조정하도록 만드는 것을 의미합니다.TV 화면과 컴퓨터는 다른 크기와 비율을 갖습니다. Godot에서, 우리는 컨테이너를 사용하여 UI 요소들의 크기와 위치를 제어합니다.

중첩한 순서가 중요합니다. UI가 다른 화면 비율에 휼륭하게 적응하는지 보기 위해, 루트 노드를 선택하고, Q키를 눌러 선택 모드를 활성화 한 뒤, 컨테이너를 선택하고 컨테이너의 모서리를 클릭하고 드래그 하여 크기를 바꿔보세요. UI 구성 요소들이 내부에 있어야 합니다.

당신은 비록 컨테이너가 스프라이트를 움직이게 하지만, 크기를 조절하지 않는 것을 봤을 것입니다. 이것은 정상입니다. 우리는 UI 시스템이 다른 화면 비율을 처리하기를 원하지만, 또한 게임 전체가 다른 화면 해상도에 적응해야 합니다. 이를 위해, Godot는 창 전체를 위 아래로 크기를 조절합니다.

당신은 프로젝트 설정에서 크기를 바꿀 수 있습니다: 프로젝트 -> 프로젝트 설정을 클릭하세요. 창의 왼쪽 행에서, Display 카테고리를 보세요. Window 하위 카테고리를 클릭하세요. 창의 오른쪽에서 Stretch 섹션을 찾으실 수 있습니다. 세 개의 설정, Mode, Aspect 그리고 Shrink는 화면 크기를 제어합니다. 더 많은 정보는 Multiple resolutions 에서 보실 수 있습니다.