타이틀 화면 만들기

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

  1. 메인 메뉴.
  2. 체력 막대, 에너지 막대, 폭탄과 돈 개수 카운터가 있는 게임 UI.

게임 UI를 효율적으로 설계하는 법과 Godot의 Control 노드를 사용하는 방법에 대해 배울 것입니다. 이 페이지에서는 시각적인 부분에 중점을 두겠습니다: 편집기에서 모두 작업할 수 있습니다. 체력 막대를 코딩하는 법에 대해 알고 싶다면 코드를 통해 게임의 UI를 제어하기를 읽어주세요.

../../_images/ui_main_menu_design_final_result.png

앞으로 만들게 될 GUI.

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

주석

Godot의 UI 시스템이 어떻게 작동하는지 알아보려면 :doc:'ui_introduction_to_the_ui_system'를 먼저 읽어보세요.

게임 UI를 디자인하는 방법

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

../../_images/ui_design_rough.png

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

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

  1. 그래픽이 플레이어의 경험에 대한 인식을 왜곡하여, 소중한 피드백을 놓치게 될 것입니다.
  2. 사용자 경험이 잘 이루어지지 못하면, 일부 스프라이트는 다시 작업해야 할 것입니다.

참고

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

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

  1. 하나의 씬에서 전부 만들어 버리고, 다시 사용할 수 있는 씬으로 분기로 만들어 저장할 수 있습니다.
  2. 다시 사용할 수 있는 구성 요소를 위한 템플릿 씬을 만들고, 기본 씬에서 상속되는 특정 구성 요소를 만들 수 있습니다.

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

../../_images/ui_main_menu_placeholder_assets.png

Godot에서 찾을 수 있는 파일. 그래픽은 대략적인 디자인보다 더 깔끔해 보이지만, 여전히 자리 표시자입니다.

메인 메뉴 디자인하기

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

UI 모형 파헤치기

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

  1. UI를 중첩된 상자로 분류해봅시다. 모두를 포괄하는 가장 큰 상자에서, 가장 작은 상자까지 말이죠. 라벨이 있는 막대, 패널, 버튼과 같은, 하나의 위젯도 이 상자에 포함됩니다.
  2. 영역 주변에 여백을 만들려면, MarginContainer를 사용하세요.
  3. 요소를 행 또는 열로 배열한다면, HBoxContainer 또는 VBoxContainer를 사용하세요.

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

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

../../_images/ui_mockup_break_down.png

블록으로 만든 인터페이스. 세 가지 규칙을 사용하여 분류했습니다.

참고

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

메인 메뉴 씬 준비하기

주석

이 튜토리얼은 창 크기 1366x768 를 기준으로 합니다. 프로젝트의 기준 창 크기를 변경하려면, 에디터 상단의 프로젝트>프로젝트 설정**을 열고, **Display > Window > Size > Width 항목을 1366 으로 Display > Window > Size > Height768 로 변경합니다.

창 크기 변경을 잊은 경우 앵커와 컨테이너가 예상대로 작동하지 않을 수 있습니다.

메인 메뉴를 만들어봅시다. 하나의 씬에 메뉴를 만들 것입니다. 비어있는 씬을 만들려면, 씬(Scene) > 새 씬(New Scene)을 클릭하세요.

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

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

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

컨테이너가 창에 맞도록 하고 싶습니다. 뷰포트 위의 툴바에서, 레이아웃(Layout) 메뉴를 열고, 마지막 설정인 **사각형 전체(Full Rect)**를선택하세요.

UI 스프라이트 추가하기

MarginContainer 를 선택하고, TextureRect 노드로 UI 요소들을 만듭니다. 필요한 것들은 다음과 같습니다:

  1. 타이틀이나 로고,
  2. 세 개의 텍스트 설정. 개별의 노드로 됨,
  3. 버전 노트,
  4. 그리고 메인 메뉴의 일러스트.

노드 추가(Add Node) 버튼을 누르거나 키보드의 Meta+A를 누르세요. TextureRect를 검색해 해당하는 노드에서 엔터키를 누르세요. 새로 생성된 노드를 선택하고, Meta+D를 5 회 눌러 다섯 개의 TextureRect 인스턴스를 추가로 만드세요.

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

../../_images/ui_texturerect_load_texture.png

파일 브라우저에서 불러올 텍스처를 찾을 수 있습니다.

이 작업을 나머지 TextureRect 노드에서 반복하세요. 그러고 나면 각 노드마다 로고, 삽화, 세 개의 메뉴 설정 그리고 버전 노트를 갖고 있을 것입니다. 그 후, 씬 탭에서 각 노드를 더블 클릭하고 이름을 바꾸세요. 컨테이너에 아직 아무 노드도 놓지 않아서 지금은 분명히 노드가 어질러져 있을 것입니다.

../../_images/ui_main_menu_6_texturerect_nodes.png

텍스처를 불러온 6 개의 노드.

주석

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

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

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

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

../../_images/ui_main_menu_containers_step_1.png

4 개의 중첩된 컨테이너가 있고, TextureRect 노드가 컨테이너 옆에 있어야 합니다.

노드 트리에서, 왼쪽 측면에 있어야 할 모든 TextureRect 노드를 선택하세요: 로고, 메뉴 설정 (Continue, NewGame, Options), 그리고 버전 노트. VBoxContainer로 드래그 앤 드롭하세요. 노드는 자동으로 위치가 맞춰질 것입다.

../../_images/ui_main_menu_containers_step_2.png

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

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

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

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

../../_images/ui_main_menu_containers_step_3.png

Characers 노드는 CenterContainer에 배치하자마자 화면의 우측 중앙에 위치하게 됩니다.

왼쪽의 메뉴 옵션과 로고의 간격을 두기위해 하나의 최종 컨테이너와 크기 플래그를 사용합니다. VBoxContainer``를 선택하고 : kbd :`Ctrl + A` (macOS에서는 : kbd :`Cmd + A`)를 눌러 컨테이너 안에 노드를 추가합니다. 추가된 번째 ``VBoxContainer이름을 "MenuOptions"으로 합니다. 세 개의 모든 메뉴 옵션인 Continue, NewGame, Options을 선택하고, 이 노드들을 새로 만든 VBoxContainer 안으로 드래그 앤 드롭합니다. UI의 레이아웃은 거의 변경되지 않아야 합니다.

../../_images/ui_main_menu_containers_step_4.png

UI의 레이아웃을 유지하려면 다른 두 노드 사이에 새 컨테이너를 배치합니다.

이제 메뉴옵션들을 묶었으므로, 메뉴옵션의 컨테이너의 수직 영역을 가능한 많이 펼쳐야 합니다. MenuOptions 노드를 선택하세요. 인스펙터(Inspector)에서 Size Flags 카테고리로 내려가세요. Vertical 속성의 오른쪽 영역을 클릭하고, Expand와 추가로 Fill을 체크하세요. 컨테이너는 이웃의``Logo``및``Version``요소를 존중하면서 사용 가능한 모든 수직 공간을 차지하도록 확장됩니다.

메뉴옵션의 노드들이 중앙으로 가도록 VBoxContainer의 인스펙터(Inspector)의 맨 위로 가서 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가 다양한 화면 비율에 잘 적응하는지 확인하려면 루트 노드를 선택하고 : kbd :`Q`를 눌러 선택 모드를 활성화 한 뒤, 컨테이너를 선택하고 컨테이너 모서리 중 하나를 클릭하고 드래그하여 크기를 조정합니다. UI 구성 요소가 내부에 있어야합니다.

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

프로젝트 설정에서 크기 조절 모드를 바꿀 수 있습니다: 상단 메뉴에서 프로젝트(Project) > 프로젝트 설정(Project Settings)을 클릭하세요. 창의 왼쪽 열에서 Display 카테고리를 보세요. Window 하위 카테고리를 클릭하세요. 창의 오른쪽에서, Stretch 섹션을 확인할 수 있습니다. 화면 크기를 조절하는 세 가지 설정으로, Mode, Aspect, 그리고 Shrink가 있습니다. 더 자세한 정보는 Multiple resolutions을 참고해주세요.