타이틀 화면 만들기

이 다음 두 개의 튜토리얼에서, 당신은 엔진의 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 폴더에서 찾으실 수 있습니다.

주석

Read the 컨트롤(Control) 노드로 인터페이스를 설계하기 first to learn how Godot's UI system works.

게임 UI를 디자인하는 방법

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

../../_images/ui_design_rough.png

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

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

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

참고

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

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

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

We will use the first approach, because the first version of your UI may not work as well as you'd like. You're likely to throw parts away and redesign components as you go. When you're sure everything works, it's easy to make some parts reusable, as you'll see below.

../../_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 요소들을 손으로 놓을 순 있지만, 컨테이너는 더 빠르고 더 정확하며, 반응이 빠릅니다.

메인 메뉴 씬 준비하기

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

We have to add a root node before we can save the scene. Your UI's root should be the outermost container or element. In this case it's a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Ctrl + S (Cmd + S on macOS) to save the scene to the disk. Name it 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. and the main menu's illustration.

Click the Add Node button or press Ctrl + A (Cmd + A on macOS) on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Ctrl + D (Cmd + D on macOS) five times to create five extra TextureRect instances.

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

../../_images/ui_texturerect_load_texture.png

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

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

../../_images/ui_main_menu_6_texturerect_nodes.png

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

주석

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

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

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container's resize behavior, I recommend to favor box containers.

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에 배치하자마자 화면의 우측 중앙에 위치하게 됩니다.

To space out the menu options and the logo on the left, we'll use one final container and its size flags. Select the VBoxContainer and press Ctrl + A (Cmd + A on macOS) to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI's layout should barely change, if at all.

../../_images/ui_main_menu_containers_step_4.png

UI의 레이아웃은 유지하기 위해 두 개의 노드 사이에 새 컨테이너를 놓습니다.

이제 메뉴 설정들을 묶었으므로, 메뉴 설정의 컨테이너의 수직 영역을 가능한 많이 펼쳐야 합니다. MenuOptions 노드를 선택하세요. 인스펙터(Inspecter)에서 Size Flags 카테고리로 내리세요. Vertical 속성의 오른쪽 영역을 클릭하고, Expand와 추가로 Fill을 체크하세요. 컨테이너는 사용 가능한 수직 공간 전체를 차지하도록 펼쳐집니다. 하지만 주변 노드, LogoVersion 요소들은 차지하지 않습니다.

VBoxContainer에서 노드가 중앙에 있게 하려면, 인스펙터(Inspecter)의 맨 위로 가서 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 요소들의 크기와 위치를 제어합니다.

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container's corners to resize it. The UI components should flow inside of it.

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

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