GUI 설계하기

이제 기초를 갖춘 모양이니, 어떻게 게임 그래픽 사용자 인터페이스 (GUI)를 만드는 지, 다시 사용할 수 있는 UI 구성 요소와 함께 알아봅시다: 체력 막대, 에너지 막대, 그리고 폭탄과 에메랄드 카운터. 이 튜토리얼을 마치면, 바로 GDScript나 VisualScript로 제어할 수 있는 게임 GUI를 갖게될 것입니다:

../../_images/ui_gui_design_final_result.png

최종 결과물

이번에 배울 내용입니다:

  1. 유연한 UI 구성 요소 만들기
  2. 씬 상속 사용하기
  3. 복잡한 UI 만들기

프로젝트 파일을 다운로드하세요: ui_gui_design.zip 그리고 압축을 푸세요. 이 튜토리얼을 따라오려면 Godot에 start/ 프로젝트를 가져오세요. end/ 폭더는 최종 결과물이 들어 있습니다.

주석

You can watch this tutorial as a video on YouTube.

UI 파헤치기

최종 UI를 분해하고 사용할 컨테이너를 계획해봅시다. 타이틀 화면 만들기일 때와 마찬가지로, 시작은 MarginContainer입니다. 그러면 세 개로 된 열을 볼 수 있습니다:

  1. 왼쪽의 체력과 에너지 카운터
  2. 체력과 에너지 막대
  3. 오른쪽의 폭탄과 에메랄드 카운터

하지만 막대의 라벨과 게이지는 두 부분으로 나뉘지만, 같은 UI 요소입니다. 이렇게 생각한다면, 이제 두 개의 열만 남습니다:

  1. 왼쪽의 체력과 에너지 막대
  2. 오른쪽의 폭탄과 에메랄드 카운터

이렇게 하면 컨테이너를 더 쉽게 중첩할 수 있습니다: MarginContainer로 화면의 가장자리에는 여백이 있습니다. 이어서 HBoxContainer가 두 개의 열을 관리하게 됩니다. VBoxContainer로 두 개의 막대를 위에서 쌓도록 만듭니다. 그리고 폭탄과 에메랄드 카운터를 나란히 놓기 위해, 마지막 HBoxContainer를 오른쪽 열에 놓습니다.

../../_images/ui_gui_step_tutorial_containers_structure.png

4 개의 컨테이너로 말끔한 UI 레이아웃을 얻었습니다

각 UI 구성 요소에는 추가적인 컨테이너가 필요할 것입니다. 하지만 이것으로 메인 GUI 씬의 구조를 만들었습니다. 이 계획에 따라, Godot로 들어가 GUI를 만들 수 있습니다.

기초 GUI 만들기

GUI에는 할 수 있는 두 가지 접근법이 있습니다: 별개의 씬에서 요소를 설계한 후 그 요소들을 함께 넣을 수 있습니다. 혹은 하나의 씬에서 모든 것을 기초 작업한 후 나중에 세부적으로 접근합니다. 저는 하나의 씬에서 작업하는 것을 추천합니다. UI의 배치 및 크기 조정을 더 빨리 할 수 있기 때문이죠. 일단 보기 좋게 만든 후, 노드 트리의 전체 섹션을 다시 사용할 수 있는 하위 씬으로 저장할 수 있습니다. 잠시 후 그렇게 할 것입니다.

일단 적은 수의 컨테이너로 시작합시다.

새 씬을 만들고 MarginContainer를 추가하세요. 노드를 선택하고 GUI 라고 이름 지으세요.

인터페이스가 화면에 위에 고정되어 있어야 합니다. GUI 노드를 선택하고, 뷰포트 상단에 있는 레이아웃(Layout) 버튼을 클릭하세요. 위쪽 넓게(Top Wide) 설정을 선택하세요. GUI 노드는 부모의, 기본적으로 뷰포트의 위쪽 모서리에 고정될 것입니다. 세로축에 자동으로 크기가 조절되어서 자식 UI 구성 요소가 들어갈 자리를 마련합니다.

GUI.tscn으로 씬을 저장하세요. 이 씬에 GUI 전체를 넣을 것입니다.

MarginContainer를 선택한 채로, 인스펙터(Inspecter)로 가서 Custon Constants 섹션으로 내려가세요. 접힌 상태를 펼쳐주고, 각 Margin 속성의 옆에 있는 영역을 클릭하세요. 모두 20 픽셀로 설정하세요. 다음으로, HBoxContainer 노드를 추가하세요. 이 컨테이너에는 왼쪽에 있으면서 두 개의 막대가 들어갈 것입니다. 그러면서 오른쪽에 있는 두 개의 카운터와 분리할 것입니다.

HBoxContainer 안에 막대를 수직으로 쌓아야 합니다. VBoxContainerHBoxContainer의 자식으로 추가하세요. 그리고 이름은 Bars라고 지으세요. 부모 HBoxContainer를 다시 선택하고, 이번에는 다른 HBoxContainer를 자식으로 추가하세요. 이것의 이름은 Counters라고 지으세요. 네 개의 컨테이너로, GUI 씬의 기초를 만들었습니다.

../../_images/ui_gui_containers_structure_in_godot.png

4 개의 컨테이너가 이렇게 있어야 합니다

주석

이 방법이 가능한 이유는, 먼저 UI 설계를 파헤치고 사용할 컨테이너에 대해 생각할 시간을 가졌기 때문입니다. 이 튜토리얼을 따라갈 때, 이상하다고 느꼈을 지도 모릅니다. 하지만 실제 게임을 작업해본다면, 이것이 효율적인 워크플로라는 것을 보게될 것입니다.

Bars의 기초 만들기

각 막대는 나란히 놓인 두 개의 하위 요소로 나뉩니다: 체력을 세는 라벨이 왼쪽, 그리고 게이지가 오른쪽에 있습니다. 다시 말하지만, HBoxContainer는 이 일에 최적한 도구입니다. Bars 노드를 선택하고, 새 HBoxContainer를 안에 추가하세요. 이름은 Bar라고 지으세요.

라벨에는 적어도 세 개의 노드가 더 필요합니다: 배경에 쓸 NinePatchRect, 그 배경에서 왼쪽에 HP 또는 EP라고 적힌 텍스처, 그리고 오른쪽에 값을 표시하기 위한 Label. Control 노드는 원하는 만큼 중첩할 수 있습니다. 그리고 NinePatchRect를 다른 두 요소의 부모로 사용할 수 있습니다. 기본적으로, 컨테이너를 UI 구성 요소를 조직하도록 도움이 되는 역할로 사용할 수 있습니다. 나중에 체력 카운터와 게이지 사이에 영역을 추가하기 위해서, MarginContainer가 필요할 것입니다. Bar를 선택하고 MarginContainer를 추가하세요. 이름은 Count라고 지으세요. 이 컨테이너 안에 세 개의 노드를 추가하세요:

  1. NinePatchRect, 이름은 Background
  2. TextureRect, 이름은 Title
  3. Label, 이름은 Number

노드를 형제로 추가하려면, 항상 먼저 Count 노드를 선택하세요.

../../_images/ui_gui_step_tutorial_bar_template_1.png

씬 트리는 다음과 같아야 합니다. 이제 텍스처를 줄 준비가 되었습니다

씬은 아직 텅텅 비어 있습니다. 텍스처를 줄 시간입니다. 텍스처를 불러오려면, 뷰포트 왼쪽에 있는 파일 시스템(FileSystem) 독으로 가세요. res://assets/GUI 폴더로 들어가세요.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

인터페이스를 장식할 텍스처 목록은 다음과 같아야 합니다.

씬(Scene) 독에서 Background를 선택하세요. 인스펙터(Inspector)에서 Texture 속성을 볼 수 있습니다. 파일 시스템(FileSystem) 탭으로 가서, label_HP_bg.pngTexture 슬롯으로 드래그하세요. 찌그러진 채로 들어갑니다. 컨테이너 안의 요소에게 최소 크기를 주지 않으면, 부모 MarginContainer가 텍스처 크기를 0 으로 만듭니다. Background 노드를 선택하세요. 인스펙터(Inspector) Rect 섹션으로 내려가세요. Min Size를 (100, 40)으로 설정하세요. Background가 부모 컨테이너에 따라 크기가 조절된 것을 볼 수 있습니다.

다음으로 Title을 선택하고, label_HP.pngTexture 슬롯으로 드래그 앤 드롭하세요. Number 노드를 선택하고, Text 속성 옆의 영역을 클릭한 뒤 10을 입력하세요. 이제 두 노드 모두 뷰포트에서 볼 수 있습니다. 두 노드는 부모 MarginContainer의 왼쪽 위 모서리에 포개져 있어야 합니다.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

두 노드를 선택하면 이렇게 보여야 합니다

As they have a container as their direct parent, we cannot move them freely: the Count node will always reset their anchors, their size and position. Try to move and resize the nodes in the viewport. Then, select any of the three textures and press Ctrl + Up or Ctrl + Down to reorder them in the Scene dock. They'll snap back to their previous size and position.

부모 컨테이너는 크기, 규모, 여백, 그리고 바로 아래 자식의 앵커를 제어합니다. 노드를 수정하려면, 일반적인 Control이나 다른 UI 요소 안에 노드를 중첩해야 합니다. BackgroundTitleNumber의 부모로 사용할 것입니다. TitleNumber를 둘 다 선택하세요. 그리고 Background로 드래그 앤 드롭하세요.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

Background 노드를 두 텍스처의 부모로 사용했기 때문에, Count MarginContainer로 부터 자유로워졌습니다

인스펙터(Inspecter)에서 Title을 선택하고, Stretch Mode 속성을 Keep Centered로 바꾸세요. 다음으로, 인스펙터(Inspecter)에서 Rect 카테고리로 가서 Size 속성을 (50, 40)으로 바꾸세요. Background의 왼쪽 절반만 차지하게 될 것입니다. 다음은 Number 노드를 선택하세요. 뷰포트에서 레이아웃(Layout) 메뉴를 클릭하고 사각형 전체(Full Rect)을 클릭하세요. 노드는 Background에 맞게 크기가 조절됩니다. 인스펙터(Inspecter)로 가서 Align 속성을 Right로 바꾸세요. 그리고 Valign 속성은 Center 로 바꾸세요. 글자는 Background의 오른쪽 모서리의 중심에 고정될 것입니다. 노드 크기를 수평으로 조절하세요. 그러면 이제 Background의 오른쪽 절반을 차지하면서, 오른쪽 모서리에는 약간의 여백을 갖게 됩니다.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

노드의 경계 사각형이 뷰포트에서 이렇게 보여야 합니다. 지금은 정확하게 놓지 않아도 됩니다. 적당하게 하세요.

Label의 폰트 교체하기

Label의 폰트는 너무 작습니다. 이것을 교체해야 합니다. Number 노드를 선택하세요. 그리고 인스펙터(Inspector)에서, Control 클래스로 내려간 뒤, Custom Font 카테고리를 찾으세요. Font 속성 옆의 영역을 클릭한 다음, Dynamic Font(New Dynamic Font)를 클릭하세요. 영역을 다시 클릭한 다음 편집하기(Edit)를 선택하세요.

Dynamic Font 리소스에 들어가야 합니다. Font 카테고리를 펼치고, Font Data 옆의 영역을 클릭하세요. 불러오기(Load) 버튼을 클릭하세요. 파일 브라우저에서 assets/font 폴더로 간 다음, Comfortaa-Bold.ttf를 더블클릭해서 여세요. 뷰포트에서 폰트가 업데이트된 것을 볼 수 있습니다. Settings 카테고리를 펼치고 Font Size를 바꾸세요. Size 속성을 더 높은 숫자, 2428로 설정하세요.

이제 문자의 기준선이 필요합니다. 왼쪽의 HP 텍스처와 나란히 있는 Number의 아래 모서리 말이죠. 그러러면, 역시나 DynamicFont 리소스로 가서, Extra Spacing 카테고리 밑의 Bottom 속성을 조절하면 됩니다. 이 속성은 문자의 아래에 여백을 추가해줍니다. 씬 탭에서 Number 노드를 클릭하고 노드의 속성으로 돌아가세요. 그리고 ValignBottom으로 바꾸세요. 문자의 기준선을 조절하려면, Custom Font 카테고리 밑의 Font 영역을 다시 클릭하세요. 그리고 문자가 Title 노드와 나란히 있을 때까지 Bottom 속성을 조절하세요. 저는 2 픽셀의 값을 사용했습니다.

../../_images/ui_gui_step_tutorial_number_baseline.png

Bottom 에 2픽셀 값으로, Number는 Title과 일직선이 되었습니다

이걸로, 우리는 GUI의 가장 어려운 부분을 마쳤습니다. 축하합니다! 더 단순한 노드로 넘어갑시다.

경과 막대 추가하기

체력 막대를 완성하기까지 하나의 요소가 남았습니다: 게이지 그 자체죠. Godot에는 지금 우리에게 필요한 TextureProgress 노드라는 것을 갖고 있습니다.

Bar 노드를 선택하고, 안에 TextureProgress를 추가하세요. 이름은 Gauge라고 지으세요. 인스펙터(Inspector)에서 Textures 섹션을 펼치세요. 파일 시스템(FileSystem) 독으로 가서 lifebar_bg.png 텍스처를 Under 슬롯으로 드래그 앤 드롭하세요. 마찬가지로 lifebar_fill.png 이미지는 Progress 슬롯에 드롭하세요. 인스펙터(Inspector)의 Range 클래스 아래에서, Value 속성을 50으로 바꾸고 게이지가 차오른 모습을 확인하세요.

단지 다섯 개의 Control 노드만으로, 첫 번째 막대를 사용할 수 있게 되었습니다.

../../_images/ui_gui_step_tutorial_bar_final.png

됐습니다. 체력 막대는 준비됬습니다. 마지막 부분은 빨리 끝났네요. 그렇지 않나요? 강력한 컨테이너 설정 덕분입니다.

폭탄과 에메랄드 카운터 설계하기

폭탄과 에메랄드 카운터는 Bar의 Count 노드와 비슷합니다. 따라서 Count 노드를 복제해서 템플릿으로 사용할 것입니다.

Under the Bar node, select Count and press Ctrl + D to duplicate it. Drag and drop the new node under the Counters HBoxContainer at the bottom of the scene tree. You should see it resize automatically. Don't worry about this for now, we'll fix the size soon.

Count2 노드의 이름을 Counter로 바꾸세요. Bars와 달리, 왼쪽에 숫자가 있고 오른쪽에 아이콘이 있어야 합니다. 설정은 전과 같습니다: Background가 필요하고 (NinePatchRect), Title, Number 노드가 필요합니다. Title 노드는 아이콘을 표시해야 하므로 TextureRect가 됩니다. 씬 트리에서 Title 노드를 선택하세요. 그리고 이름을 Icon으로 바꾸세요.

../../_images/ui_gui_step_tutorial_counter_design_1.png

이것이 현재까지 작업한 노드 트리의 모습입니다

Icon 노드를 선택하고, 인스펙터(Inspector)에서 Texture 슬롯이 보일 때까지 위로 올라가세요. 왼쪽의 파일 시스템(FileSystem) 독으로 가서 bombs_icon.png를 선택하세요. Texture 슬롯에 드래그 앤 드롭하세요. 씬(Scene) 탭에서 IconNumber 노드 모두 선택하세요. 뷰포트 상단에 있는 툴바의 레이아웃(Layout) 메뉴로 가서 사각형 전체(Full Rect)를 선택하세요. 두 노드 모두 Background의 크기에 맞게 업데이트될 것입니다.

../../_images/ui_gui_step_tutorial_counter_design_2.png

노드는 전체 Background에 고정됐지만, 위치가 어긋납니다

Let's change the Number's align properties to move it to the left and center of the Background. Select the Number node, change its Align property to left and the Valign property to center. Then resize its left edge a bit to add some padding between the left edge of the Background and the text.

../../_images/ui_gui_step_tutorial_counter_design_3.png

The Number node aligned to the left and center

Icon과 Background를 겹치려면, 몇 가지 조정이 필요합니다. 먼저 Background가 예상보다 약간 큽니다. 최상위의 GUI 노드에서 제어되는 MarginContainer에 속해있기 때문입니다. 씬 트리의 맨 위에 있는GUI 노드를 선택하고 최대한 가늘게 세로로 크기를 줄여보세요. Gauge는 너무 작아지지 않는 것을 볼 수 있습니다. 컨테이너는 자식을 자식의 최소 크기보다 더 작게 만들 수 없습니다. 컨테이너의 여백도 마찬가지입니다.

Icon을 선택하고 레이아웃(Layout) 메뉴를 클릭하세요. 그리고 사각형 전체(Full Rect)를 선택해서 다시 가운데에 있도록 하세요. 다시 레이아웃(Layout) 메뉴를 열고 오른쪽 중앙(Center Right)을 선택하세요. Icon을 위로 움직여서 Background와 수직으로 가운데에 있도록 하세요.

../../_images/ui_gui_step_tutorial_counter_design_4.png

폭탄 아이콘은 Background의 오른쪽 모서리에 앵커하세요. Counter 컨테이너의 크기를 조절하여 Icon 노드가 오른쪽 모서리에 고정되도록 하세요

Bar의 Count에서 Counter를 복제했기 때문에, Number 노드의 폰트는 꺼져 있습니다. Number 노드를 다시 선택하고 Font 속성으로 가세요. 그리고 속성을 클릭해서 DynamicFont 리소스에 접근하세요. Extra Spacing 섹션에서 Bottom 값을 0으로 바꿔서 폰트의 기준선을 초기화하세요. Counter는 이제 생각한대로 작동합니다.

Counters 앵커가 뷰포트의 오른쪽 모서리에 있도록 만듭시다. 그러러면 먼저 Bars 컨테이너가 가능한 전체 수평 공간을 차지하도록 설정해야 합니다. Bars 노드를 선택하고 Size Flags 카테고리로 내려가세요. Horizontal 카테고리에서 Expand 값을 체크하세요. Bars 노드는 크기가 조절되면서 Counter를 화면의 오른쪽 모서리로 밀어낼 것입니다.

../../_images/ui_gui_step_tutorial_counter_design_5.png

펼쳐진 컨테이너가 부모가 정한 영역 전체를 먹어 버리면서, 나머지를 저 멀리로 밀어냅니다

Bar와 Counter를 다시 사용할 수 있는 UI 구성 요소로 바꾸기

Bar 위젯 하나와 Counter 위젯 하나를 갖고 있습니다. 하지만 각각 두 개가 필요합니다. 나중에는 Bars의 디자인이나 기능을 바꾸게 될 것입니다. 하나의 씬마다 한 UI 요소의 템플릿을 갖도록 만들고, 그것으로 자식 씬을 다양하게 만들 수 있다면 멋질 것입니다. Godot에서는 이를 상속된 씬으로 제공합니다.

CounterBar 분기 각각을 개별 씬으로 저장합시다. 저장해두면 나중에 LifeBar, EnergyBar, BombCounter, EmeraldCounter를 만들 시간을 줄일 수 있습니다. Bar HBoxContainer를 선택하세요. 우클릭하고 분기를 씬으로 저장하기(Save Branch as Scene)를 클릭하세요. 씬을 Bar.tscn으로 저장하세요. 노드 분기가 하나의 Bar 노드로 바뀐 것을 볼 수 있습니다.

참고

한 씬은 하나의 노드 트리입니다. 최상위의 노드는 트리의 루트(Root)이고, 계층 구조의 아래에 해당하는 자식은 입니다. 하나 이상의 자식을 갖는 노드의 루트는 분기(Branch)입니다. 노드 분기를 개별 씬으로 캡슐화할 수 있습니다. 아니면 다른 씬에서 활성 씬으로 불러와서 병합할 수 있습니다. 씬(Scene) 독에서 아무 노드나 우클릭하고 분기를 씬으로 저장하기(Save Branch as Scene)씬에서 병합하기(Merge from Scene)를 선택하세요.

그런 다음 Counter 노드를 선택하고 같은 작업을 반복하세요. 우클릭, 분기를 씬으로 저장하기(Save Branch as Scene), 그리고 Counter.tscn으로 저장하세요. 씬 트리에서 노드의 오른쪽에 새로운 편집 씬 아이콘이 나타납니다. Bar 옆에 있는 것을 클릭해서 해당 씬을 여세요. Bar의 경계 사각형이 내용물에 맞도록 노드의 크기를 조정하세요. Control 노드의 이름을 짓고 배치하는 방법으로, 이 템플릿을 상속하여 체력 막대를 만들 준비가 되었습니다. Counter도 마찬가지입니다.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

추가 변경 사항 없이 Bar를 사용할 수 있음

씬 상속을 사용해서 나머지 요소를 만들기

똑같이 작동하는 두 막대가 필요합니다: 왼쪽에는 일정 값이 있는 라벨 기능을 맡고, 오른쪽에는 가로로 된 게이지가 있죠. 유일한 차이점은 한 쪽은 HP 라벨이면서 초록 색상인 반면, 다른 쪽은 EP라고 적혀 있고 노랑색인 것입니다. Godot는 일반적인 베이스를 만들어 게임 내 모든 막대에 재사용할 수 있도록 강력한 도구를 제공합니다: 상속된 씬.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

상속된 씬은 GUI 씬을 깔끔하게 유지하도록 도와줍니다. 끝날 무렵에는, 컨테이너와 각 UI 구성 요소 별 노드 하나만을 갖게될 것입니다.

상송된 씬이라면, 인스펙터(Inspector)에서 이름을 제외한 모든 속성을 바꿀 수 있습니다. 부모 씬을 수정하고 저장했다면, 모든 상속된 씬은 업데이트되면서 변경 사항이 반영됩니다. 상속된 씬에서 어떤 값을 바꿨다면, 그것을 부모의 속성을 다시 정의한 것이 됩니다. 이 점이 UI에서는 유용합니다. 종종 UI는 같은 요소에서 다양함이 요구되기 때문이죠. 일반적으로 UI 디자인, 버튼, 패널 등은 일반적인 베이스 스타일과 상호 작용을 공유합니다. 이 모든 다양성을 수동으로 복사하고 싶진 않죠.

다시 정의한 속성 옆에 다시 불러오기 아이콘이 나타날 것입니다. 클릭해서 부모 씬의 기본 값으로 값을 초기화하세요.

주석

씬 상속의 개념은 노드 트리, 혹은 GDScript에서의 extends 키워드와 비슷합니다. 상속된 씬은 부모가 하는 모든 것을 합니다. 하지만 속성, 리소스를 다시 정의할 수 있고, 기능을 확장하기 위해 노드나 스크립트를 추가할 수 있습니다.

LifeBar를 만들기 위해 Bar 씬을 상속하기

Go to Scene -> New Inherited Scene to create a new type of Bar. Select the Bar scene and open it. You should see a new [unsaved] tab, that's like your Bar, but with all nodes except the root in grey. Press Ctrl + S (Cmd + S on macOS) to save the new inherited scene and name it LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

회색 노드를 이름을 바꿀 수 없습니다. 이것은 부모 씬을 갖고 있음을 뜻합니다

먼저 루트나 상위 계층의 노드의 이름을 LifeBar로 바꾸세요. 항상 루트는 UI 구성 요소가 정확히 어떤 것인지를 설명해야 합니다. 이 이름이 막대와 나중에 만들 EnergyBar를 구별하게 만듭니다. 씬에 있는 다른 노드는 구성 요소의 구조를 넓은 범위에서 설명해야 합니다. 따라서 모든 상속된 씬에서도 설명이 돼야 하죠. 마치 TextureProgressNumber노드처럼 말입니다.

주석

이제까지 웹 디자인을 해본 적이 있다면, 이 작업은 CSS를 가지고 작업하는 것과 상동할 것입니다: 기초 클래스를 만들고, 수정자 클래스로 변화를 추가하는 것이죠. 기초 버튼 클래스부터, 사용자가 프롬프트를 수락하고 거절하도록 만드는 초록 버튼과 빨강 버튼이라는 변화를 주듯이 말입니다. 새 클래스에는 부모 요소의 이름과 어떻게 수정하는 지에 관한 추가 키워드가 있습니다. 상속된 씬을 만들고, 최상위의 노드의 이름을 바꿀 때, 같은 작업을 하고 있는 셈이죠.

EnergyBar 설계하기

이미 메인 Bar 씬으로 LifeBar의 설계를 마쳤습니다. 이제 필요한 것은 EnergyBar입니다.

새 상속 씬을 만듭시다. 그리고 다시 한번, Bar.tscn 씬을 선택하고 여세요. Bar 루트 노드를 더블클릭하고, 이름을 EnergyBar로 바꾸세요. 새 씬을 EnergyBar.tscn으로 저장하세요. HP 텍스처를 EP로 교체해야 하고, 게이지의 텍스처를 바꿔야 합니다.

왼쪽의 파일 시스템(FileSystem) 독으로 가세요. 씬 트리에서 Title 노드를 선택하고 텍스처 슬롯으로 laber_EP.png 파일을 드래그 앤 드롭하세요. Number 노드를 선택하고 Text 속성을 14로, 혹은 그 외 기존과 다른 값으로 바꾸세요.

EP 텍스처가 HP보다 더 작은 것을 눈치챘을 것입니다. 텍스처에 맞도록 Number의 폰트 크기를 업데이트해야 합니다. 폰트는 리소스입니다. 전체 프로젝트에 있는 노드 중 이 리소스를 사용하고 있는 노드는 이 리소스의 속성을 바꾼 것에 영향을 받게 될 것입니다. 한번 Size를 40과 같은 큰 값으로 바꾸고 LifeBarBar 씬으로 돌아가보세요. 문자 크기가 커진 것을 볼 수 있습니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

폰트 리소스를 바꾸게 되면, 이 리소스를 사용하는 모든 노드가 영향을 받습니다

이 노드에서만 폰트 크기를 바꾸도록 하려면, 폰트 리소스의 사본을 만들어야 합니다. Number 노드를 다시 선택하고, 인스펙터(Inspector)의 오른쪽 상단에 있는 렌치와 스크루드라이버 아이콘을 클릭하세요. 드롭다운 메뉴에서 하위 리소스를 유일하게 만들기(Make Sub-Resources Unique)를 선택하세요. Godot는 이 노드에서 사용하는 모든 리소스를 찾아서 유일한 사본을 만들어 줄 것입니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

이 설정을 사용해서 한 노드를 위한 유일한 리소스 사본을 만들었습니다

참고

When you duplicate a node from the Scene tree, with Ctrl + D (Cmd + D on macOS), it shares its resources with the original node. You need to use Make Sub-Resources Unique before you can tweak the resources without affecting the source node.

Custom Font 섹션으로 내려가서``Font``를 여세요. Size20이나 22처럼 더 작은 값으로 낮추세요. 그리고 Bottom 영역 값을 조정해서 문자의 기준선이 왼쪽의 EP 라벨과 나란하도록 해야합니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

EP Count 위젯은 HP보다 더 작은 폰트로 되어 있습니다

이제 TextureProgress 노드를 선택하세요. Under 슬롯에 ``energy_bar_bg.png 파일을 드래그하고, Progress 텍스처 슬롯에도 마찬가지로 energy_bar_fill.png를 드래그하세요.

노드의 경계 사각형이 게이지에 맞도록 노드를 수직으로 크기를 조절할 수 있습니다. 크기가 막대와 나란해질 때까지 Count 노드에도 똑같이 적용하세요. TextureProgress의 최소 크기가 텍스처로 설정되어 있기 때문에, Count 노드를 그보다 더 작게 줄일 수는 없습니다. Bar 컨테이너에도 마찬가지입니다. TextureProgress도 같이 크기를 줄여야 할 것입니다.

마지막으로 Background 컨테이너가 최소 크기를 가져서 원래보다 조금 더 커졌습니다. 컨테이너를 선택하고, Rect 섹션에서 Min Size 속성을 80 픽셀로 바꾸세요. 자동으로 크기가 조절되면서 TitleNumber 노드의 위치도 다시 조정될 것입니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

Count는 더 작아져서 보기 좋아졌습니다

참고

Count 노드의 크기는 TextureProgress의 위치에 영향을 받습니다. Bar를 수직으로 나열하기 때문에, EP 라벨의 크기를 조절하기 위해 Counter의 왼쪽 여백을 사용하는 것이 좋습니다. EnergyBar의 Count와 LifeBar의 Count 노드 둘다 100 픽셀 너비이기 때문에, 이 방법으로 두 게이지가 완벽하게 나란히 있을 수 있는 것입니다.

폭탄과 에메랄드 카운터 준비하기

카운터를 다루어봅시다. 씬(Scene) -> 상속 씬(New Inherited Scene)으로 가서, Counter.tscn을 기본 씬으로 선택하세요. 루트 노드의 이름도 BombCounter로 바꾸세요. 새 씬을 BombCounter.tscn으로 저장하세요. 이것이 이 씬의 전부입니다.

../../_images/ui_gui_step_tutorial_design_counters_1.png

폭탄 카운터는 원래 Counter 씬과 같습니다

Go to Scene -> New Inherited Scene again and select Counter.tscn once more. Rename the root node EmeraldCounter and save the scene as EmeraldCounter.tscn. For this one, we mainly need to replace the bomb icon with the emerald icon. In the FileSystem tab, drag the emeralds_icon.png onto the Icon node's Texture slot. Icon already anchors to the right edge of the Background node so we can change its position and it will scale and reposition with the EmeraldCounter container. Shift the emerald icon a bit to the right and down. Use the Arrow Keys on the keyboard to nudge its position. Save, and we're done with all the UI elements.

../../_images/ui_gui_step_tutorial_design_counters_2.png

에메랄드 카운터는 이와 같이 보여야 합니다

최종 GUI에 UI 구성 요소들을 추가하기

메인 GUI 씬에 모든 UI 요소를 추가할 시간입니다. 다시 GUI.tscn 씬을 열고, BarCounter 노드를 삭제하세요. 파일 시스템(FileSystem) 독에서 LifeBar.tscn을 찾고, 씬 트리에서 Bars 컨테이너에 드래그 앤 드롭하세요. EnergyBar에도 마찬가지로 하세요. 수직으로 나란히 있는 것을 볼 수 있습니다.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

LifeBar와 EnergyBar가 자동으로 정렬됩니다

이제 BombCounter.tscnEmeraldCounter.tscn 씬을 Counters 노드에 드래그 앤 드롭하세요. 자동으로 크기가 조절될 것입니다.

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

노드는 가능한 모든 수직 공간을 차지하도록 크기를 조절합니다

EmeraldCounterBombCounterCounter.tscn에서 정의한 크기를 사용하도록 하려면, Counters 컨테이너의 Size Flags를 바꿔야 합니다. Counters 노드를 선택하고 인스펙터(Inspector)에서 Size Flags 섹션을 펼치세요. Vertical 속성에 있는 Fill 태그의 체크 상태를 풀고, Shrink Center를 체크하면 컨테이너는 HBoxContainer 안에서 중앙에 위치합니다.

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

이제 카운터 모두 적당한 크기를 가졌습니다

참고

Counters 컨테이너의 Min Size 속성을 바꿔서 Counters의 배경의 높이를 조정하세요.

EnergyBar의 EP 라벨에 한 가지 문제가 남았습니다: 두 막대는 수직으로 나란히 있어야 합니다. EnergyBar 노드 옆의 아이콘을 클릭해서 노드의 씬을 여세요. Count 노드를 선택하고 Custom Constants 섹션으로 가세요. Margin Left20으로 추가하세요. Rect 섹션에서 노드의 Min Size를 다시 100으로 돌려놓으세요. 이 값은 LifeBar에 설정된 값과 같습니다. Count는 왼쪽에 이제 여백이 생길 것입니다. 저장하고 다시 GUI 씬으로 돌아간다면, LifeBar와 수직으로 나란히 있을 것입니다.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

완벽하게 정렬된 두 막대

주석

방금 전, 이 방법으로 EnergyBar를 설정할 수 있었습니다. 하지만 이는 언제든지 돌아가서 값을 조정하고, 그 변경 사항이 프로젝트를 통해 전파되는 것을 볼 수 있다는 것을 보여줍니다!

게임 모형에 GUI를 배치하기

튜토리얼을 마무리하기 위해, 게임 모형 씬에 GUI를 삽입할 것입니다.

파일 시스템(FileSystem) 독으로 가서 LevelMockup.tscn을 여세요.

bg 노드 아래와 Characters 노드 위에 GUI.tscn 씬을 드래그 앤 드롭하세요. GUI는 전체 뷰포트에 맞게 크기가 조절될 것입니다. 레이아웃(Layout) 메뉴로 가서 위쪽 중앙(Center Top) 설정을 선택하세요. GUI는 게임 창의 위쪽 모서리에 앵커될 것입니다. 그런 다음 GUI를 수직으로 가능한 작게 크기를 조절하세요. 이제 게임의 맥락에서 인터페이스가 어떻게 보이는 지 알 수 있습니다.

이 긴 튜토리얼을 마친 것을 축하합니다. 여기서 최종 프로젝트를 찾아가세요: ui_gui_design.zip.

../../_images/ui_gui_design_final_result.png

최종 결과물

주석

A final note about Responsive Design. If you resize the GUI, you'll see the nodes move, but the textures and text won't scale. The GUI also has a minimum size, based on the textures inside of it. In games, we don't need the interface to be as flexible as that of a website. You almost never want to support both landscape and portrait screen orientations. It's one or the other. In landscape orientation, the most common ratios range from 4:3 to 16:9. They are close to one another. That's why it's enough for the GUI elements to only move horizontally when we change the window size.