GUI 설계하기

이제 기초를 갖췄으니, 재 사용 가능한 UI 구성 요소를 가지고 어떻게 게임 사용자 인터페이스 (GUI)를 만드는지 알아봅시다: 체력 막대, 에너지 막대, 그리고 폭탄과 에메랄드 카운터입니다. 이 튜토리얼이 끝나면, GDscript나 VisualScript를 가지고 제어할 수 있는 게임 GUI를 가지게 될 것입니다:

../../_images/ui_gui_design_final_result.png

최종 결과물

또한 배울 것입니다:

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

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

주석

이 튜토리얼을 유튜브에서 보실 수 있습니다.

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 노드를 선택하고 뷰포트 상단에 있는 레이아웃 버튼을 클릭합니다. Top Wide 옵션을 선택합니다. GUI 노드는 기본적으로 뷰포트의 상위 가장자리에 고정됩니다. 하위 UI 구성 요소를 위한 공간을 확보하기 위해 수직 축에서 자동으로 크기가 조정됩니다.

'GUI.tscn으로 씬을 저장합니다. 우리는 그 씬 안에 전체적인 GUI를 놓습니다.

MarginContainer 가 선택된 채로, 인스펙터에서 custom constants 섹션으로 창을 내립니다. 창을 펼치고 각 Margin 속성 옆에 빈 공간을 클릭합니다. 이들 모두를 20 으로 설정합니다. 다음으로, HBoxContainer 노드를 추가합니다. 이것은 왼쪽에 두 개의 막대와 오른쪽에 두 개의 카운터를 분리할 것입니다.

HBoxContainer 안에 막대를 세로로 쌓을 겁니다. GUI``의 자식으로 ``VBoxContainer를 추가하고 Bars 라고 이름 짓습니다. 부모 HBoxContainer\ 를 다시 선택하고, 이번엔 다른 HBoxContainer를 자식으로 추가합니다. Counters라고 이름 짓습니다. 이 네 개의 컨테이너로 우리는 GUI 씬의 기초를 만들었습니다.

../../_images/ui_gui_containers_structure_in_godot.png

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

주석

먼저 UI 디자인을 부수고 사용할 컨테이너를 생각했기 때문에 이 방법이 가능한 것입니다. 당신이 튜토리얼을 그대로 따라간다면, 이것이 이상하게 보일 것입니다. 하지만 실제 게임에서 이것이 효과적인 작업 흐름임을 볼 수 있습니다.

막대의 기초 만들기

각 막대는 수평으로 정렬된 두 개의 세부 요소로 나뉩니다: 왼쪽에는 체력을 표시하는 라벨, 그리고 오른쪽에서 게이지를 표시합니다. 앞서 말했듯이, HBoxContainer 는 이 작업에 적합합니다. Bars 노드를 선택하고 그 안에 HBoxContainer 를 추가하세요. 이름을 Bar 로 짓습니다.

라벨에는 적어도 세 개의 노드가 더 필요합니다: 배경에 쓸 NinePatchRect, 그 배경에서 왼쪽에는 HPEP 를 쓸 텍스처, 그리고 값을 나타내는 Label 입니다. 우리는 원하는 대로 Control 노드를 중첩시킬 수 있습니다. 즉, NinePatchRect 를 다른 두 개의 요소를 포괄하는 부모로 사용할 수 있다는 것입니다. 일반적으로, 우리는 컨테이너를 사용합니다, 그것이 그들의 역할이니까요. 라이프 카운터와 게이지 사이에 공간이 필요하니 나중에 MarginContainer` 가 필요할 것입니다. Bar 를 선택하고 MarginContainer 를 추가하세요. Count 라고 이름짓습니다. 그 안에는, 다음의 노드들을 추가하세요:

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

노드들을 형제로 만들기 위해, 항상 Count 노드를 먼저 선택해야 합니다.

../../_images/ui_gui_step_tutorial_bar_template_1.png

당신의 씬 트리는 이렇게 되야 합니다. 이제 텍스처를 넣을 준비가 끝났습니다

씬은 아직 텅 빈 상태입니다. 이제 텍스처를 추가해 봅시다. 텍스처를 불러오기 위해선, 뷰포트의 왼쪽에 있는 파일 시스템 독으로 가세요. 경로를 res://assets/GUI 로 하세요.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

우리가 인터페이스에 쓸 텍스처의 목록이 이렇게 나와야 합니다.

씬 독에서 Background 를 선택합니다. 인스펙터에서, Texture 속성을 보세요. 파일 시스템 탭에서 label_HP_bg.pngTexture 슬롯으로 드래그 합니다. 찌그러진 채로 있습니다. 텍스처가 부모 MarginContainer의 영향을 받기 때문에 그 영향을 최소화 하지 않으면 컨테이너는 텍스처의 크기를 0으로 만듭니다. Background 노드를 선택합니다. 인스펙터에서, Rect 섹션으로 갑니다. Min Size 를 (100, 40)으로 설정합니다. Background 가 부모 컨테이너에 크기가 조정된 것을 보실 수 있습니다.

다음으로, Title 을 선택하고 label_HP.pngTexture 슬롯으로 드래그 앤 드롭 하세요. Number 노드를 선택하고, Text 속성 우측 공간을 클릭하고 10 을 칩니다. 이걸로, 당신은 두 노드 모두를 뷰포트에서 볼 수 있습니다. 이 둘은 부모 MarginContainer 의 왼쪽 위에 포개져있어야 합니다.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

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

직계 부모인 컨테이너를 갖게 되었으니, 우리는 이들을 자유롭게 움직일 수 없습니다: Count 노드는 앵커나 크기, 위치가 항상 원상복귀 됩니다. 뷰포트에서 노드를 움직이거나 크기를 바꾸려고 시도해보시죠. 그 이후에는, 세 개의 텍스처 중 하나를 선택하고 Ctrl 위 아니면 Ctrl 아래를 눌러 그들을 씬 독에 다시 맞춰주세요. 텍스처들은 이전 크기와 위치로 돌아갈 것입니다.

부모 컨테이너는 크기, 규모, 여백, 그리고 직계 자식의 앵커를 제어합니다. 노드를 수정하기 위해, 그들을 기본 Control 노드나 다른 UI 요소들 안에 중첩시켜야 합니다. 우리는 TitleNumber 의 부모로 Background 를 사용할 겁니다. TitleNumber 를 선택하고, Background 에 드래그 앤 드롭 하세요.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

두 텍스처의 부모로 Background 노드를 사용해서, 우리는 Count MarginContainer의 통제권을 빼앗아 버립니다

Title을 선택하고 인스펙터에서, Stretch Mode 속성을 Keep Centered로 바꿔줍니다. 그런 다음 Rect 카테고리로 간 후 Size 속성을 (50, 40)으로 해서 배경의 왼쪽 절반을 차지하게 합니다. 다음으로, Number 노드를 선택합니다. 뷰포트에서, 레이아웃 메뉴를 클릭하고 Full Rect를 클릭합니다. 노드의 크기가 Background에 맞게 조정될 겁니다. 인스펙터로 가서 Align 속성을 Right로 설정하고, VAlign 속성을 Center로 설정합니다. 텍스트는 Background의 오른쪽 부분에서 중앙에 스냅되어야 합니다. 노드의 크기를 가로로 조정하면, 노드는 Background의 오른쪽 절반을 차지하게 되고 오른쪽에 약간의 공간이 남습니다.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

노드의 경계 사각형이 뷰포트에 이렇게 보여야 합니다. 대략적으로만 하세요, 아직 너무 세밀해야 할 필요는 없습니다.

라벨의 폰트 바꾸기

라벨의 폰트가 너무 작습니다. 우리는 바꿔야 합니다. Number 노드를 선택하고 인스펙터에서, Control 클래스로 가서, Custom Font 카테고리로 갑니다. Font 속성 옆의 영역을 클릭하고 Dynamic Font 를 클릭합니다. 다시 그 영역을 클릭하고 편집을 선택합니다.

Dynamic Font 리소스로 들어갑니다. Font 카테고리를 열고 Font Data 옆의 영역을 클릭하세요. 로드 버튼을 클릭하세요. 파일 브라우저에서, assets/font folder 경로를 치시고 Comfortaa-Bold.ttf 를 클릭해서 여세요. 뷰포트가 업데이트 된 것을 보실 수 있습니다. Settings 카테고리를 열고 폰트 사이즈를 변경하세요. Size 속성을 2428 정도로 설정하세요.

이제 왼쪽의 HP 텍스처와 일직선으로 하기 위해, 텍스트의 기준선과 숫자 하단의 가장자리가 필요합니다. 그러기 위해, 다시 DynamicFont 리소스에서, Extra Spacing 카테고리의 Bottom 속성을 잡아당길 수 있습니다. 그것은 텍스트에 하단 여백을 추가합니다. 씬 탭에 있는 Number 노드를 클릭하고 노드 속성으로 돌아가서 VAlignBottom 으로 바꿉니다. 텍스트의 기준선을 적용하기 위해 Custom Font 카테고리의 폰트 영역을 다시 클릭하고 Bottom 속성을 Title 노드와 일직선이 될 때까지 잡아당깁니다. 저는 2 픽셀 값을 사용했습니다.

../../_images/ui_gui_step_tutorial_number_baseline.png

Bottom 에 2픽셀 값으로, Number는 Title과 일직선이 됨

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

경과 막대를 추가하기

우리는 체력 막대를 완성하기 위해 마지막 요소가 필요합니다: 게이지 그 자체이죠. 우리가 필요한 모든 것은 TextureProgress 노드에 있습니다.

Bar 노드를 선택하고 안에 TextureProgress 를 추가합니다. Gauge 라고 이름을 짓습니다. 인스펙터에서 Textures 섹션을 엽니다. 파일 시스템 독에서 lifebar_bg.png 텍스처를 Under 슬롯에 드래그 앤 드롭 합니다. lifebar_fill.png 이미지도 Progress 슬롯에 넣어줍니다. 인스펙터에서 Range 클래스 하단에, Value 속성을 50 으로 설정하면 게이지가 찬 모습을 볼 수 있습니다.

오직 다섯 Control 노드로, 우리의 첫 막대가 준비되었습니다.

../../_images/ui_gui_step_tutorial_bar_final.png

이겁니다, 우리의 막대는 준비가 되었습니다. 마지막 부분은 빨리 끝났네요, 그렇지 않나요? 강력한 컨테이너 설정 덕분입니다.

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

폭탄과 에메랄드 카운터는 바의 Count 노드와 비슷합니다. 복사해서 템플릿으로 사용해서 만들어 보는 겁니다.

Bar 노드 아래에 있는 Count 를 선택한뒤, Ctrl D 를 눌러 노드를 복사합니다. 그리고 새로 만들어진 노드를 드래그-앤-드롭 으로 씬트리 가장 아래에 있는 Counter HBoxContainer 에 넣어 줍니다. 사이즈가 자동으로 변경되는것을 볼 수 있을겁니다. 걱정하지 마시고 조금 뒤에 수정하기로 하고 다음으로 넘어가가로 하죠.

Count2 노드의 이름을 Counter``로 변경합니다. 바와는 다르게 숫자는 왼쪽, 아이콘은 오른쪽에 오도록 작업할 겁니다. 구성은 동일합니다: 배경 (``NinePatchRect), 타이틀, 그리고 숫자 노드가 들어갑니다. Title 노드는 TextureRect 노드이므로, 아이콘을 표시합니다. 씬 트리에서 Title 노드를 선택하고 이름을 Icon 으로 변경합니다.

../../_images/ui_gui_step_tutorial_counter_design_1.png

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

Icon 노드를 선택하고 인스펙터를 스크롤하여 Texture 슬롯을 찾습니다. 파일 시스템 독에서 bombs_icon.png 를 드래그하여 Texture 슬롯에 놓습니다. 씬 탭에서 IconNumber 노드를 선택 하고 뷰포트 상단에 도구 모음에서 레이아웃 메뉴를 클릭하고 Full Rect 를 선택 합니다. 두 노드 모두 Background 의 크기에 맞게 업데이트될 것입니다.

../../_images/ui_gui_step_tutorial_counter_design_2.png

노드는 전체 배경에 앵커됐지만, 위치가 알맞지 않네요

Number 의 align 속성을 변경하여 그것이 왼쪽이고 Background 의 중앙에 있게 할 겁니다. Number 노드를 선택하고, Align 속성을 왼쪽으로 하고 VAlign 속성을 가운데로 바꿉니다. 그 후 그것의 왼쪽 모서리를 살짝 건드리면 Background 의 왼쪽 모서리와 텍스트 사이에 채우기가 적용됩니다.

../../_images/ui_gui_step_tutorial_counter_design_3.png

왼쪽과 중앙에 정렬된 Number 노드

아이콘과 배경을 씌우기 위해, 이들을 조금 비틀 필요가 있습니다. 먼저, 배경은 약간 좀 큽니다. 왜냐하면 가장 위에있는 GUI 노드에 의해 제어되는 마진 컨테이너 안에 있기 때문입니다. 씬 트릭 꼭대기의 GUI 노드를 선택하고 세로 크기를 줄여서 가능한 얇게 만듭니다. 게이지가 너무 작게 만들어지지 않게 되는 것을 볼 수 있을 겁니다. 컨테이너는 자식의 최소 크기보다 더 작아질 수 없습니다. 컨테이너의 마진 또한 마찬가지입니다.

Icon을 선택하고, 레이아웃 메뉴를 클릭하고, 다시 중앙에 놓이도록 Full Rect 를 선택하세요. 우리는 이것이 Background 의 오른쪽 모서리에 앵커하도록 해야 합니다. 다시 레이아웃 메뉴를 열고 Center Rignt 를 선택하세요. 아이콘을 위로 움직여서 Background 에 세로로 가운데에 있도록 합니다.

../../_images/ui_gui_step_tutorial_counter_design_4.png

폭탄 아이콘의 앵커는 Background의 오른쪽 가장자리로 설정합니다. Counter 컨테이너의 크기를 변경하여 Icon 노드가 오른쪽 모서리에 고정되도록 하십시오

우리가 막대의 Count 에서 Counter 를 복제했기 때문에, Number 노드의 폰트는 꺼져 있습니다. Number 노드를 다시 선택하고 Font 속성으로 갑니다, 그리고 클릭하고 DynamicFont 리소스에 접근합니다. Extra Spacing 섹션에서, 폰트의 기준선을 재 설정하기 위해 Bottom 값을 0 으로 합니다. 카운터는 이제 생각한 대로 작동합니다.

Counters가 뷰포트의 오른쪽 모서리에 고정되도록 만듭니다. 그러기 위해 Bars 컨테이너가 전체 수평 공간을 차지하도록 설정해야 합니다. Bars 노드를 선택하고 Size Flags 카테고리로 갑니다. Horizontal 카테고리에서, Expand 값을 체크합니다. Bars 노드는 크기가 조절되면서 카운터를 화면 가장 오른쪽으로 밀어냅니다.

../../_images/ui_gui_step_tutorial_counter_design_5.png

확장된 컨테이너가 부모의 모든 공간을 차지하고, 나머지 것들을 치워버립니다

막대와 카운터를 재사용 가능한 UI 구성 요소로 바꾸기

우리는 하나의 막대와 카운터 도구를 갖고 있습니다. 하지만 각자 두 가지가 필요합니다. 나중에 막대의 디자인이나 기능성을 바꿔야 될지도 모릅니다. 그럴 때 UI 요소들의 템플릿을 저장하는 하나의 씬과, 유사한 작업에 쓸 자식 씬들을 가진다면 멋질 것입니다. Godot는 상속된 씬으로 이를 제공합니다.

CounterBar 분기를 각각의 씬으로 저장해서 LifeBar, EnergyBar, BombCounter, 그리고 EmeraldCounter를 만들 겁니다. Bar HBoxContainer를 선택합니다. 우클릭을 한 후 선택 노드를 다른 씬으로 저장을 클릭합니다. 씬을 Bar.tscn 이란 이름으로 저장합니다. 노드 분기가 이제 하나의 Bar 노드로 된 것을 보실 수 있습니다.

참고

하나의 씬은 하나의 노드 트리 입니다. 가장 위의 노드가 트리의 루트 이고 계층 구조 밑의 자식들이 이 됩니다. 루트를 제외하고 하나의 자식을 가진 노드가 분기입니다. 노드 분기를 각각의 씬으로 캡슐화 할 수 있고, 혹은 다른 씬에서 활성 상태로 불러와 병합할 수 있습니다. 씬 독에서 아무 노드나 선택하고 선택 노드를 다른 씬으로 저장이나 다른 씬에서 가져오기를 선택하세요.

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

../../_images/ui_gui_step_tutorial_bar_template_scene.png

추가적인 변화 없이, 막대를 사용할 수 있음

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

우리는 같은 방법으로 작동하는 두 막대가 필요합니다: 왼쪽에 라벨이 있고, 값을 지니고 있습니다, 그리고 오른쪽에 수평 게이지가 있습니다. 차이라면 하나는 HP 라벨이고 초록색이라는 것, 그리고 다른 것은 EP 이고 노란색인 것입니다. Godot는 게임 내에 모든 막대에 다시 사용할 수 있는 기본 기반을 만드는 강력한 도구를 제공합니다: 상속된 씬 입니다.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

상속된 씬은 GUI 씬이 깔끔하도록 돕습니다. 마지막에는, 각 UI 구성 요소를 위한 하나의 노드와 컨테이너 만을 갖게 될 것입니다.

상속된 씬에서, 당신은 이름을 제외하고, 인스펙터에서 모든 노드의 속성을 바꿀 수 있습니다. 부모 씬을 변형하고 저장한다면, 모든 상속된 씬은 그 변화를 반영해 업데이트 됩니다. 상속된 씬에서 값을 바꾼다면, 항상 부모의 속성보다 우선시됩니다. 종종 동일한 요소를 변화 시켜야 하는 UI에 유용합니다. 일반적으로, UI 디자인, 버튼, 패널 등등이 기본 스타일과 상호작용을 공유합니다. 우리는 모든 변화를 수동으로 복사하지 않으려 합니다.

새로고침 아이콘이 당신이 오버라이드한 속성 옆에 나타날 것입니다. 클릭하면 값을 부모의 기본형으로 되돌립니다.

주석

씬 상속의 생각은 노드 트리나, GDScript의 extends 키워드와 비슷합니다. 상속된 씬은 부모처럼 모든 것을 할 수 있습니다, 그리고 속성, 리소스를 오버라이드하고, 기ㅡㅇ을 확장하기 위해 노드와 스크립트 추가도 가능합니다.

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

-> 상속 으로 가서 새 타입의 Bar 를 만듭니다. 막대 씬을 선택하고 엽니다. 새로운 [저장되지 않음] 탬을 보실 수 있는데, 그것은 Bar 씬에서 루트 노드를 제외한 모든 노드가 회색으로 처리된 씬입니다. Control+S (맥에서는 Meta+S) 를 눌러 새 상속 씬을 저장하고 LifeBar 라고 이름짓습니다.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

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

먼저, 루트나 가장 위에 있는 노드를 LifeBar 라고 이름짓습니다. 우리는 항상 루트가 이 UI 구성 요소를 정확하게 나타내길 원합니다. 나중에 우리가 만들 EnergyBar 와의 차이점도 이름입니다. 씬 안의 다른 노드는 구성 요소의 구조를 광범위하게 나타내야 하기에, 이들은 모두 상속 씬 안에서 작동합니다. TextureProgressNumber 노드처럼 말이죠.

주석

이제까지 웹 디자인을 해본 적 있으시다면, 이것은 CSS에서 작업하는 것과 같은 형식입니다: 기초 클래스를 만들고 모디파이어 클래스로 변수를 추가하는 형식입니다. 기본 버튼 클래스에서, 사용자는 초록 버튼과 빨간 버튼으로 프롬포트를 선택하거나 취소할 수 있게 됩니다. 새 클래스는 부모 요소의 이름과 어떻게 그것이 변형하는 지를 설명하는 추가 키워트를 갖고 있습니다. 우리가 상속 씬을 만들고 가장 위에 있는 노드 이름을 바꿀 때, 우리는 같은 것을 하고 있는 것입니다.

에너지 막대 디자인하기

우리는 이미 메인 Bar 씬으로 LifeBar 의 디자인을 설정했습니다. 이제 EnergyBar 가 필요합니다.

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

파일 시스템 독으로 가서, 씬 트리에서 Title 노드를 선택하고 label_EP.png 파일을 텍스처 슬롯에 드래그 앤 드롭 합니다. Number 노드를 선택하고 Text 속성을 14 처럼 다른 값으로 바꿉니다.

EP 텍스처가 HP보다 더 작은 것을 눈치채셨을겁니다. 이에 맞추기 위해 Number 폰트 크기를 업데이트해야 합니다. 한 폰트는 하나의 리소스입니다. 이 리소스를 사용하는 모든 프로젝트가 리소스의 속성 변화에 영향을 받습니다. 우리는 크기를 40 처럼 크게 바꾸고 LifeBarBar 씬으로 돌아갑니다. 텍스트가 커진 것을 보실 수 있습니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

폰트 리소스를 변경하면, 이것을 사용하는 모든 노드가 영향을 받습니다

이 노드의 폰트 크기 만을 바꾸고 싶다면, 폰트 리소스의 복사본을 만들어야 합니다. Number 노드를 다시 선택하고 인스펙터 우측 상단에 있는 렌치와 드라이버 아이콘을 클릭하세요. 하단 메뉴에서, 하위 리소스를 유일하게 만들기 설정을 선택합니다. Godot는 이 노드의 모든 리소스를 발견해서 유일한 복사본을 만들어냅니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

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

참고

Ctrl+D, 혹은 맥에서 Meta+D 를 통해 씬트리에서 노드를 복사할 때, 원래 노드의 리소스를 공유합니다. 리소스를 변형시켜도 원래 노드에 영향을 주지 않으려면 하위 리소스를 유일하게 만들기 를 사용해야 합니다.

Custom Font 섹션으로 내려가서 Font 를 엽니다. Size20 이나 22 와 같은 더 작은 값으로 낮춥니다. 그리고 Bottom 간격 값을 왼쪽 EP 라벨의 텍스트 기준선에 정렬시킬 필요가 있습니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

HP보다 더 작은 폰트를 가진, EP 카운터 위젯

이제, TextureProgress 노드를 선택합니다. energy_bar_bg.png 파일을 Under 슬롯에 드래그하고 energy_bar_fill.pngProgress 텍스처 슬롯에 넣습니다.

노드의 경계 사각형이 게이지에 맞도록 노드의 크기를 수직으로 조정해야 합니다.``Count`` 노드도 마찬가지로 막대에 경계 사각형에 정렬해야 합니다. TextureProgress 의 최소 크기가 텍스처의 크기에 맞춰져 있기 때문에, 당신은 Count 노드를 축소 시킬 수 없을 겁니다. 그것이 Bar 컨테이너의 크기이기도 합니다. 이것은 크기를 줄일 수 있습니다.

마지막으로 중요한 것은, Background 컨테이너가 최소 크기를 가져서 조금 넓어진 것입니다. 컨테이너를 선택하고 Rect 섹션에서, Min Size 속성을 80 픽셀로 낮춥니다. 자동으로 크기가 조절되고 TitleNumber 노드도 다시 자리를 잡게 될 겁니다.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

카운터는 이제 약간 더 작아져 더 좋아졌습니다

참고

Count 노드의 크기는 TextureProgress 의 위치에 영향을 받습니다. 우리는 막대를 수직으로 정렬할 것이기 때문에, Counter의 왼쪽 여백을 이용해 EP 라벨의 크기를 조정하는 것이 더 좋습니다. EnergyBar의 Count와 LifeBar의 Count 노드가 둘다 100 픽셀 너비이기 때문에, 이 방법으로 두 게이지는 완벽하게 정렬할 것입니다.

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

카운터를 다뤄볼 차례입니다. -> 상속 으로 가서 Counter.tscn 을 기본으로 선택하세요. 루트 노드의 이름을 BombCounter 로 바꿔줍니다. 새 씬을 BombCounter.tscn 으로 저장합니다. 이것이 이 씬의 전부입니다.

../../_images/ui_gui_step_tutorial_design_counters_1.png

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

다시 -> 상속 으로 가서 Counter.tscn을 다시 선택합니다. 루트 노드 이름을 EmeraldCounter로 하고 씬을 EmeraldCounter.tscn로 저장합니다. 여기에, 우리는 주로 폭탄 아이콘과 에메랄드 아이콘을 재배치 할 필요가 있습니다. 파일 시스템 탭에서, Emeralds_icon.pngIcon 노드의 Texture 슬롯으로 드래그 합니다. Icon은 이미 Background 의 오른쪽 모서리에 앵커 되었으므로, 아이콘의 위치를 바꿀 수 있고, EmeraldCounter의 크기와 위치를 조정해서 아이콘의 크기를 조정할 수 있습니다. 에메랄드 아이콘을 조금 오른쪽 아래로 옮깁니다. 키보드의 화살표 키를 사용하여 위치를 조금씩 옮길 수 있습니다. 저장하면, 이제 모든 UI 요소가 끝났습니다.

../../_images/ui_gui_step_tutorial_design_counters_2.png

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

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

메인 GUI 씬에 모든 UI 요소들을 추가할 시간입니다. GUI.tscn 다시 열고 BarCounter 노드를 삭제합니다. 파일 시스템 독에서, 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 노드를 선택하고 인스펙터에서 Size Flags 섹션을 펼칩니다. Vertical 속성에서 Fill 태그를 해제하고 Shrink Center를 체크하여 컨테이너가 HBoxContainer에서 중앙에 있도록 합니다.

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

이제 두 카운터 모두 괜찮은 크기입니다

참고

Counters 컨테이너의 Min Size 속성을 바꿔 카운터의 배경 높이를 조정합니다.

EnergyBar의 EP 라벨에 한 가지 문제가 남았습니다: 두 막대는 수직으로 정렬되어야 합니다. EnergyBar 노드 옆의 아이콘을 클릭하여 노드의 씬을 엽니다. Count 노드를 선택하고 Custom Constant 섹션으로 갑니다. Margin Left20으로 추가합니다. Rect 섹션에서 노드의 Min Size를 다시 100으로 돌려놓습니다, LifeBar와 같은 값입니다. Count는 왼쪽에 이제 여백이 생기게 됩니다. 저장하고 다시 GUI 씬으로 돌아가면, 그것이 LifeBar 와 수직으로 정렬될 것입니다.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

완벽하게 정렬된 두 막대

주석

우리는 이 방법으로 EnergyBar를 설정할 수 있었습니다. 하지만 이것은 언제든지 씬으로 돌아가서, 변형하고, 그리고 프로젝트를 통해 전파된 변화를 볼 수 있다는 것을 보여줍니다!

게임 모형에 GUI를 배치하기

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

파일 시스템 독으로 가서 LevelMockup.tscn 을 여십시오.

bg 노드 아래와 Characters 노드 위에 GUI.tscn 씬을 끌어다 놓습니다. GUI는 전체 뷰포트에 맞게 확장할 것입니다. 레이아웃 메뉴로 가서 Center Top 옵션을 선택하면 그것이 게임 화면의 위쪽 모서리에 고정됩니다. 그 후 GUI가 가능한 수직으로 작아지도록 크기를 조정하세요. 이제 게임의 맥락에서 인터페이스가 어떻게 보이는지 볼 수 있습니다.

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

../../_images/ui_gui_design_final_result.png

최종 결과물

주석

반응 형 디자인의 마지막 주석. GUI의 크기를 조정하면, 노드가 움직이지만, 텍스처와 문자는 크기가 조정되지 않는 것을 보실 수 있습니다. GUI는 텍스처 기반의 최소 크기를 갖고 있습니다. 게임에서, 우리는 인터페이스가 웹 사이트처럼 유연하게 되기를 원하진 않습니다. 당신은 가로와 세로 화면을 모두 지원하고 싶진 않습니다. 그것은 다른 것입니다. 가로 화면에서, 가장 일반적인 비율은 4:3 에서 16:9 입니다. 그들은 서로 가깝습니다. 이것이 우리가 화면 크기를 바꿀 때 GUI 요소가 수평으로만 움직여도 충분한 이유입니다.