타이틀 화면 만들기

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

  1. A main menu.
  2. A game UI with a health bar, energy bar, bomb and money counters.

You will learn how to design game UIs efficiently, and how to use Godot's Control nodes. This page focuses on the visual part: everything you do from the editor. To learn how to code a life bar, read 코드를 통해 게임의 UI를 제어하기.

../../_images/ui_main_menu_design_final_result.png

The GUI you're going to create.

프로젝트 파일을 내려받으세요: 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. The graphics might skew the players' perception of the experience and you'll miss out on valuable feedback.
  2. If the User Experience doesn't work, you'll have to redo some sprites.

참고

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

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

  1. Build it all in a single scene, and eventually save some branches as reusable scenes.
  2. Build template scenes for reusable components and create specific components that inherit from your base scenes.

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

../../_images/ui_main_menu_placeholder_assets.png

The files you'll find in Godot. The graphics look cleaner than on the rough design, but they're still placeholders.

메인 메뉴 디자인하기

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

UI 모형 파헤치기

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

  1. Break down the UI into nested boxes, from the largest that contains everything, to the smallest ones, that encompass one widget, like a bar with its label, a panel or a button.
  2. If there's some padding around an area, use a MarginContainer.
  3. If the elements are arranged in rows or columns, use an HBoxContainer or VBoxContainer.

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

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

../../_images/ui_mockup_break_down.png

Interface building blocks, broken down using the three rules of thumb.

참고

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

메인 메뉴 씬 준비하기

Let's create the main menu. We'll build it in a single scene. To create an empty scene, click on Scene > New Scene.

씬을 저장하기 전에 루트 노드를 추가해야 합니다. 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. the title or logo,
  2. the three text options as individual nodes,
  3. the version note,
  4. and the main menu’s illustration.

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

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] > Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_images/ui_texturerect_load_texture.png

The file browser lets you find and load textures.

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

The six nodes with textures loaded.

주석

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

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

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

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

../../_images/ui_main_menu_containers_step_1.png

You should have four nested containers and the TextureRect nodes sitting aside from it.

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options (Continue, NewGame, Options), and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_images/ui_main_menu_containers_step_2.png

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

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

  1. The characters on the right aren't centered.
  2. There's no space between the logo and the other UI elements.

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_images/ui_main_menu_containers_step_3.png

The character node centers inside the right half of the screen as soon as you place it inside the 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 Meta+A 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

Place the new container between the other two nodes to retain the UI's layout.

Now we grouped the menu options together, we can tell their container to expand to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll down to the Size Flags category. Click on the field to the right of the Vertical property, and check Expand in addition to Fill. The container expands to take all the available vertical space while respecting its neighbors, the Logo and Version elements.

To center the nodes in the VBoxContainer, scroll to the top of the Inspector and change the Alignment property to Center.

../../_images/ui_main_menu_containers_step_5.png

The menu options should center vertically in the UI's left column.

To wrap things up, let's add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

The final interface.

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

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

UI 모형 파헤치기

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

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

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

You can change the scale mode in the project settings: click Project > Project Settings in the top menu. In the window's left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you'll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Multiple resolutions.