Разработка графического интерфейса

Теперь, когда вы освоили основы, мы рассмотрим, как построить пользовательский интерфейс игры (GUI) с многократно используемыми компонентами: шкала здоровья, энергии, и счетчики бомб и кристаллов. К концу этого урока у вас будет GUI, готовый к управлению с помощью GDscript или VisualScript:

../../_images/ui_gui_design_final_result.png

Окончательный результат

Вы также научитесь:

  1. Создание гибких компонентов UI
  2. Использовать наследование сцен
  3. Построение сложного UI

Скачайте файлы проекта: ui_gui_design.zip и извлеките архив. Импортируйте проект start/ в Godot, чтобы следовать этому руководству. Папка `end/`содержит конечный результат.

Примечание

Вы можете посмотреть это руководство как видео на Youtube.

Разбивка UI

Давайте разберём окончательный UI спланируем, какие контейнеры мы будем использовать. Как и в: Дизайн начального экрана, начнём с MarginContainer. Затем мы видим три столбца:

  1. Слева счетчики здоровья и энергии
  2. Шкалы здоровья и энергии
  3. Справа счётчики бомб и кристаллов

Но счётчики и шкалы являются частями одного и того же элемента UI. Таким образом, у нас остались две колонки:

  1. Слева шкалы здоровья и энергии
  2. Справа счётчики бомб и кристаллов

Это облегчает вложение контейнеров: у нас есть некоторые поля вокруг границы экрана с помощью MarginContainer, а затем HBoxContainer для управления нашими двумя колонками. Две шкалы ложатся друг на друга внутри VBoxContainer. И нам понадобится последний HBoxContainer в правой колонке, чтобы поместить счетчики бомб и кристаллов бок о бок.

../../_images/ui_gui_step_tutorial_containers_structure.png

Мы получаем чистую компоновку UI только с 4 контейнерами

Нам понадобятся дополнительные контейнеры внутри некоторых компонентов UI, но это дает нам структуру основной сцены GUI. С этим планом мы можем перейти в Godot и создать наш GUI.

Создание базового GUI

Есть два способа создания GUI: можно проектировать каждый элемент в отдельной сцене, или же сделать прототипы всех элементов в одной сцене и разбить это на сцены позже. Я рекомендую работать с одной сценой, ведь это позволит вам экспериментировать с пропорциями и я расположением элементов UI. Как только вы добьётесь желанного результата, можно будет сохранить целые разделы дерева узлов как отдельные сцены, которые можно будет переиспользовать. Мы сделаем это немного позже.

Сейчас давайте начнем с нескольких контейнеров.

Создайте новую сцену и добавьте MarginContainer. Выберите узел и назовите его GUI.

Мы хотим, чтобы наш интерфейс был привязан к верхней части экрана. Выберите узел GUI и нажмите кнопку «Макет» в верхней части окна. Выберите опцию Top Wide. Узел GUI будет привязан к верхнему краю родительского элемента, по умолчанию — к видовому экрану. Он будет автоматически изменять размер по вертикальной оси, чтобы дать пространство для его дочерних компонентов.

Сохраните сцену как GUI.tscn. Мы оставим весь GUI в нём.

Выбрав MarginContainer, направляйтесь к инспектору и прокрутите вниз до раздела пользовательских констант(custom constants). Разверните его и щелкните на поле рядом с каждым из свойств Margin. Установите их все на 20 пикселей. Затем добавьте узел HBoxContainer. Он будет содержать наши две шкалы слева и отделять их от двух счетчиков справа.

Мы хотим, чтобы шкалы были вертикальными внутри HBoxContainer. Чтобы сделать это, давайте добавим VBoxContainer. Назовите его Bars. Выберите родитель HBoxContainer снова, и на этот раз, добавьте еще один HBoxContainer. Он будет держать счетчики, поэтому назовите его Counters. С этими четырьмя контейнерами, у нас есть базис для нашей GUI сцены.

../../_images/ui_gui_containers_structure_in_godot.png

У нас должны быть 4 контейнера, которые выглядят так

Примечание

Мы можем работать таким образом, потому что сначала мы сделали разбивку дизайна UI и потратили пару минут, чтобы поразмышлять о контейнерах, которые мы будем использовать. Пока вы следуете руководству, это может показаться странным. Но как только вы начнете разрабатывать реальные игры, вы увидите, что это эффективный рабочий процесс.

Создание базы для шкал прогресса

Каждая шкала делится на два подэлемента, которые выравниваются по горизонтали: ярлык с количеством здоровья слева и датчик справа. Еще раз, HBoxContainer является идеальным инструментом для работы. Выберите узел Bars и добавьте новый HBoxContainer внутри него. Назовите его Bar.

Сама метка требует по крайней мере трех узлов: a 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

Ваше дерево сцены должно выглядеть так. Мы готовы добавить несколько текстур

Наша сцена всё ещё пустая. Значит, пришло время закинуть в неё немного текстур. Чтобы загрузить текстуры head to the FileSystem dock to the left of the viewport. Browse down to the res://assets/GUI folder.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

Вы должны увидеть список текстур, которые мы будем использовать для нашего интерфейса.

Выберите Background в панели сцены. В инспекторе вы найдите свойство Texture. Из вкладки Файловая система перетащите label_HP_bg.png на параметр Texture. Картинка будет сжата. Родительский MarginContainer будет уменьшать его размер до нуля, пока мы принудительно не изменим элементы внутри контейнера, чтобы получить минимальный размер. Выберите узел Background. В инспекторе прокрутите вниз до раздела Rect. Установите Min Size на (100, 40). Вы должны увидеть изменение размера Background вместе с его родительскими контейнерами.

Далее, выберите Title и перетащите label_HP.png в слот Texture. Выберите узел Number, щелкните на поле рядом с свойством Text и введите 10. Таким образом, мы можем видеть оба узла на видовом экране. Они должны складываться в верхнем левом углу своего родителя MarginContainer.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

Если вы выберите оба узла, вы должны увидеть что-то такое:

Поскольку у них есть контейнер в качестве прямого родителя, мы не можем свободно перемещать их: узел Count всегда будет сбрасывать свои якоря, их размер и положение. Попробуйте переместить и изменить размер узлов на видовом экране. Затем выберите любой из трех текстур и нажмите Ctrl + Up или Ctrl Down, чтобы упорядочить их в сцене. Они вернуться к их предыдущему размеру и положению.

Родительские контейнеры управляют размером, масштабом, отступами и якорями их дочерних элементов. Чтобы изменить узлы, необходимо вложить их в обычный элемент управления Control или другой элемент UI. Мы будем использовать Background в качестве родителя для Title и``Number``. Выберите Title and Number, и перетащите их на Background.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

Используя узел Background в качестве родителя для двух текстур, мы берем под контроль Count который является MarginContainer’ом

Выберите Title и в инспекторе, измените его Stretch Mode на Keep Centered. Далее найдите категорию Rect в инспекторе и измените свойство Size на (50, 40), так что это займет только левую половину заднего фона. Затем выберите узел Number. В окне просмотра щелкните на Layout и выберите Full Rect. Размер узла будет изменен в соответствии с Background. Отправляйтесь к инспектору и измените его свойство Align на Right и VAlign на Center. Текст должен быть привязан к центру правого края Background’a. Измените размер узла по горизонтали так, чтобы он занимал правую половину Background’a и было немного отступа с правого края.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

Вот как грани узлов должны выглядеть на видовом экране. Они расставлены грубо, но вам и не нужно размещать их слишком точно сейчас.

Замена шрифта у Label

Шрифт у метки(label) слишком мал. Нам нужно его изменить. Выберите узел Number в инспекторе, и прокрутите вниз до класса Control и найдите категорию Custom Font. Щелкните на поле рядом со свойством Font и выберите New Dynamic Font. Нажмите на поле еще раз и выберите Редактировать.

Вы попадете в Dynamic Font. Разверните категорию Font и щелкните на поле рядом с Font Data. Нажмите кнопку Load. В браузере файлов, перейдите вниз к папке Assets/Font и дважды щелкните на Comfortaa-Bold.ttf, чтобы открыть его. Вы должны увидеть обновление шрифта на видовом экране. Разверните категорию параметров, чтобы изменить размер шрифта. Задайте для свойства Size более высокое значение, например 24 или``28``.

Теперь нам нужно изменить нижний край числа, чтобы выровнять с текстурой HP слева. Для этого, все в том же DynamicFont, вы можете настроить свойство Bottom находящийся в категории Extra Spacing. Оно добавляет некоторое расстояние от текста. Щелкните на узел Number, чтобы вернуться к свойствам узла и изменить VAlign на Bottom. Чтобы изменить линию текста, нажмите на поле шрифта в категории Custom Font и настройте свойство Bottom, пока текст не будет выровнен с узлом Title. Я использовал значение 2’ух пикселей.

../../_images/ui_gui_step_tutorial_number_baseline.png

При значении Bottom, равным 2 пикселям, Number выравнивается по Title

С этим, мы закончили самую сложную часть. Поздравляю! Давайте перейдем к более простым узлам.

Добавление шкалы прогресса

Нам нужен один последний элемент, чтобы закончить нашу шкалу жизни: собственно сам датчик. Узел 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, чтобы дублировать его. Перетащите новый узел под Counters в нижнюю часть дерева сцены. Вы должны увидеть как он изменит размер автоматически. Не беспокойтесь об этом сейчас, мы исправим его в ближайшее время.

Переименуйте узел Count2 в Counter. В отличие от шкал, мы хотим, чтобы число было слева, а иконку - справа. Настройка одинакова: нам нужен фон, NinePatchFrame, и узлы для надписи и числа. Узел Title является TextureRect, так что нам нужно отобразить иконку. В дереве сцены выберите узел Title и переименуйте его в Icon.

../../_images/ui_gui_step_tutorial_counter_design_1.png

Вот так древо узлов должно выглядеть на данный момент

Выбрав узел Icon, в инспекторе прокрутите вверх, чтобы увидеть слот Texture. Направляйтесь в файловую систему слева и выберите bombs_icon.png. Перетащите его на слот Texture. На вкладке Сцена выберите узлы Icon и Number. Щелкните на Макет на панели инструментов в верхней части окна и выберите Full Rect. Оба узла будут обновляться в соответствии с размером Background'a.

../../_images/ui_gui_step_tutorial_counter_design_2.png

Узлы привязаны ко всему Background’у, но их положение свободное

Давайте изменим свойство выравнивания у Number'ов, чтобы переместить его влево и по центру Background'a. Выберите узел Number, измените его свойство Align на влево(left) и свойство VAlign на центр(center). Затем измените размер левого края немного, чтобы добавить некоторое пространство между левым краем Background'a и текстом.

../../_images/ui_gui_step_tutorial_counter_design_3.png

Узел Number выравнивается по центру слева

Чтобы перекрывать иконку и фон, нам нужно кое-что подправить. Во-первых, наш фон несколько высокий. Это потому, что он находится внутри MarginСontainer’a, который контролируется самым верхним узлом GUI. Выберите узел GUI в верхней части дерева сцены и уменьшите его по вертикали так, чтобы он был как можно тоньше. Вы увидите, что датчик мешает вам сделать его слишком маленьким. Родительский контейнер не может быть меньше минимального размера его дочерних. Поля контейнера также учитываются.

Выберите Icon, нажмите кнопку Макет, и выберите Full Rect, чтобы повторно отцентрировать его. Нам нужно привязать Background к правому краю. Снова откройте меню «Макет» и выберите Center Right. Переместите Icon вверх, поэтому он выравнивается центрально и по вертикали вместе с Background.

../../_images/ui_gui_step_tutorial_counter_design_4.png

Иконка бомбы крепится к правому краю фона. Измените размер контейнера Counter, чтобы увидеть как узел Icon прилипает к его правой стороне

Поскольку мы продублировали Counter как Count, шрифт узла 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 позволяет нам делать это с помощью наследования сцен.

Давайте сохраним Counter и Bar как отдельные сцены, число которых мы будем уменьшать для создания LifeBar, EnergyBar, BombCounter, и RupeeCounter. Выберите HBoxContainer с именем Bar. Щелкните правой кнопкой мыши на нем и нажмите на Сохранить ветку как сцену. Сохраните сцену как Bar.tscn. Вы должны увидеть, что вся ветвь узла превратится в один узел Bar.

Совет

Сцена представляет собой дерево узлов. Верхний узел является корнем (root) дерева, и дети в нижней части иерархии листья (leaves). Любой узел, отличный от корня, вместе с еще одним дочерним является ветвью (branch). Мы можем инкапсулировать ветви узлов в отдельные сцены, или загружать и объединять их из других сцен в активную сцену. Щелкните правой кнопкой мыши на любом узле в панели сцен и выберите Сохранить ветвь как сцену или Соединить со сценой.

Затем выберите узел Counter и сделайте то же самое. Щелкните правой кнопкой мыши на Сохранить ветвь как сцену и сохраните ее как Counter.tscn. Справа от узлов в дереве сцены появится новый значок редактирования сцены. Нажмите на один рядом с Bar, чтобы открыть соответствующую сцену. Измените размер узла Bar так, чтобы его ограничивающий прямоугольник соответствовал (по размерам) его содержимому. Теперь мы назвали и разместили Control узлы, мы готовы наследовать этот шаблон и создать шкалу жизни. Теперь сделайте то же самое для Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

Без каких-либо лишних изменений, наша шкала готова к использованию

Использование наследования для создания оставшихся элементов

Нам нужны две шкалы, которые работают одинаково: они должны иметь Label слева, с некоторым значением и горизонтальным счетчиком справа. Единственная разница заключается в том, что один имеет HP Label и он зеленый, а другой называется EP и он желтый. Godot дает нам мощный инструмент для создания шаблонов для повторного их использования для всех шкал в игре: Наследование Сцен.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

Унаследованные сцены помогают нам делать сцену GUI чище. В конце концов, мы будем иметь только контейнеры и один узел для каждого компонента UI.

В унаследованной сцене можно изменить любое свойство каждого узла в инспекторе, кроме его имени. При изменении и сохранении родительской сцены все унаследованные сцены обновляются в соответствии с изменениями. Если изменить значение в унаследованной сцене, оно всегда переопределяет родительское свойство. Это полезно для UI, так как они часто требуют вариаций одних и тех же элементов. В общем, в дизайне UI, кнопки, панели и т.д. имеют общий базовый стиль и взаимодействия. Мы не хотим копировать все его вариации вручную.

Рядом со свойствами, которые вы переопределяете, появится значок перезагрузки. Щелкните его, чтобы сбросить значение на по-умолчанию родительской сцены.

Примечание

Подумайте о наследовании сцены, как о древе узлов, или ключевом слове в GDScript``extends``. Унаследованная сцена делает все, как и ее родительский элемент, но можно переопределить свойства, ресурсы и добавить дополнительные узлы и скрипты для расширения функциональности.

Наследование Bar для создания шкалы здоровья

Перейдите к Сцена -> Новая Унаследованная сцена`, чтобы создать новый тип ``Bar. Выберите сцену Bar и откройте ее. Вы должны увидеть новую [несохраненную] вкладку, которая, такая же как ваш Bar, но со всеми узлами, кроме корневой сцены в сером цвете. Нажмите Ctrl+S для сохранения Новой Унаследованной сцены и назовите ее LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

Нельзя переименовать серые узлы. Это говорит вам, что у них есть родительская сцена

Сначала переименуйте корневой или верхний узел в LifeBar. Желательно, чтобы корень описал именно то, что этот компонент UI. Название отличает этот бар от EnergyBar, который мы создадим следующим. Другие узлы внутри сцены должны описывать структуру компонента с широкими терминами, поэтому он работает со всеми унаследованными сценами. Как наши TextureProgress и Number узлы.

Примечание

Если вы когда-либо делали веб-дизайн, то это схоже с работой с CSS: вы создаете базовый класс и добавляете вариации с классами модификаторов. От базового класса кнопок, у вас будут вариации зеленая и красная кнопки для пользователя, чтобы принимать и отказываться от чего-то. Новый класс содержит имя родительского элемента и дополнительное ключевое слово, чтобы объяснить, как он изменяет его. Когда мы создаем унаследованную сцену и изменяем имя узла верхнего уровня, мы делаем то же самое.

Дизайн шкалы Энергии

Мы уже создали дизайн LifeBar'a с главной сценой``Bar``. Теперь нам нужно сделать EnergyBar.

Давайте создадим новую унаследованную сцену и еще раз выбираем сцену Bar.tscn и откроем ее. Дважды щелкните на корневой узел Bar и переименуйте его в EnergyBar. Сохраните новую сцену как EnergyBar.tscn. Мы должны заменить текстуру HP на EP, и изменить текстуры на шкале.

Направляйтесь к панели файловой системы слева, выберите узел Title в дереве сцены и перетащите файл label_EP.png на слот текстуры(texture). Выберите узел Number и измените его свойство Text на другое значение, например 14.

Вы заметите, что текстура EP меньше, чем HP. Мы должны обновить размер шрифта у Number'ов, чтобы он был более подходящим. Шрифт — это ресурс. Все узлы во всем проекте, в которых используется этот ресурс, будут затронуты любым изменяемым свойством. Вы можете изменить размер на огромное значение, к примеру 40 и переключитесь обратно в сцену LifeBar или Bar. Вы увидите, что текст увеличился в размерах.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

Если мы изменим ресурс шрифта, все используемые им узлы будут затронуты

Чтобы изменить размер шрифта только на этом узле, необходимо создать копию ресурса шрифта. Снова выберите узел Number и нажмите на значок гаечного ключа и отвертки в правом верхнем углу инспектора. В раскрывающемся меню выберите опцию Сделать вложенные ресурсы уникальным. Godot найдет все ресурсы, которые использует этот узел, и создаст для нас уникальные копии.

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

Используйте этот параметр для создания уникальных копий ресурсов для одного узла

Совет

При дублировании узла из дерева сцены с помощью Ctrl+D, он делит свои ресурсы с исходным узлом. Вы должны использовать Сделать вложенные ресурсы уникальными перед тем, как вы сможете настроить ресурсы, не влияя на исходный узел.

Прокрутите вниз до раздела Custom Font и откройте Font. Уменьшите Size до меньшего значения, например 20 или 22. Также может понадобиться настроить значение интервала Bottom для выравнивания основания текста с Label EP слева.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

Счетчик EP, с меньшим шрифтом, чем его аналог HP

Теперь выберите узел TextureProgress. Перетащите файл energy_bar_bg.png в слот Under и сделайте то же самое для energy_bar_fill.png и поместите его на слот текстуры Progress.

Вы можете изменить размер узла по вертикали, чтобы его ограничивающий прямоугольник вмещался в шкалу. Проделайте тоже самое с Count до тех пор, пока его размер не будет на ровне со шкалой. Поскольку минимальный размер TextureProgress устанавливается на основе его текстур, вы не сможете уменьшить узел Count. Такой же размер будет иметь контейнер Bar. Можно уменьшить и его.

Последнее, но самое важное. Контейнер Background имеет свойство, задающее минимальный размер. Текущее значение делает элемент немного великоватым. Выберите этот элемент и в разделе Rect измените свойство ``Min Size на 80 пикселей. Размер элемента, а также позиции Title и Number должны измениться автоматически.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

Теперь счётчик выглядит лучше потому-что стал меньше

Совет

Размер узла Count влияет на расположение TextureProgress. Так как мы выровняли наши шкалы вертикально, теперь с помощью левого края счетчика изменим размер нашего EP Label. Таким образом, и шкала Энергии и шкала Здоровья теперь по 100 пикселей шириной, так что оба датчика будет выравниваться идеально.

Подготовка счётчиков бомб и кристаллов

Давайте теперь позаботимся о счетчиках. Перейдите к Сцена -> Новая Унаследованная Сцена и выберите Counter.tscn в качестве базового. Также переименуйте корневой узел на BombCounter. Сохраните новую сцену как BombCounter.tscn. На этом работа с этой сценой завершена.

../../_images/ui_gui_step_tutorial_design_counters_1.png

Счетчик бомбы делаем так же как и предыдущую сцену

Перейдите к Сцена -> Новая Унаследованная Сцена выберите Counter.tscn. Переименуйте корневой узел в RupeeCounter и сохраните сцену как RupeeCounter.tscn. Теперь нам нужно заменить иконки бомбы и кристалла. Из Файловой системы перетащите rupees_icon.png в узел Icon в слот Texture.``Icon`` уже привязался к правому краю узла Background, теперь мы можем изменять его позицию, и он будет масштабироваться и передвигаться вместе с контейнером RupeeCounter. Сдвиньте значок кристалла немного вправо и вниз. Используйте клавиши со стрелками на клавиатуре, чтобы сдвинуть его более точно. Сохраняем, и вот мы сделали все элементы нашего интерфейса.

../../_images/ui_gui_step_tutorial_design_counters_2.png

Так должен выглядеть счётчик кристаллов

Финальное добавление компонентов GUI

Пришло время добавить все элементы интерфейса, на предназначенную для них сцену. Откройте сцену GUI.tscn и удалите узлы Bar и Counter`. В доке FileSystem (Файловая Система) найдите ``LifeBar.tscn и перетащите на контейнер Bars, который должен находиться в дереве сцены. Сделайте тоже самое и для элемента EnergyBar. Вы должны разместить их вертикально.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

LifeBar и EnergyBar выравниваются автоматически

Теперь перетащите сцены BombCounter.tscn и RupeeCounter.tscn на узел Counters. Они автоматически изменят свой размер.

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

Измените размер узлов, чтобы охватить всё доступное пространство по вертикали

Чтобы позволить RupeeCounter и BombCounter использовать размер, который мы определили в Counter.tscn, нам нужно изменить Size Flags в контейнере Counters. Выберите узел Counters и разверните раздел Size Flags в инспекторе. Снимите флажок Fill для свойства Vertical и установите флажок Shrink Center, чтобы контейнер был в центре``HBoxContainer``.

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

Теперь оба счетчика имеют правильный размер

Совет

Измените свойство Min Size у контейнера Counters для управления высоты фона у счетчиков.

У нас осталась одна небольшая проблема с Label’ом EP в EnergyBar: 2 бара должны выравниваться по вертикали. Щелкните на значок рядом с узлом EnergyBar, чтобы открыть его сцену. Выберите узел Count и прокрутите вниз до раздела Custom Constant. Добавьте Margin Left и выставьте значение 20. В разделе Rect установите узел Min Size обратно на 100, то же значение, что и у шкалы Здоровья. Теперь Count должен иметь отступ слева. Если вы сохраните и вернетесь к сцене с GUI, она выровняется по вертикали вместе с LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

2 шкалы идеально выравниваются

Примечание

Мы могли бы сделать это с ``EnergyBar``еще несколько минут назад. Но теперь мы знаем, что можно вернуться к любой сцене в любое время и настроить его, и увидеть что изменения распространяются через весь проект!

Размещение интерфейса на макете игры

Чтобы завершить обучение мы вставим GUI на сцене макета игры.

Отправляйтесь в панель файловой системы и откройте LevelMockup.tscn.

Перетащите сцену GUI.tscn прямо под узел bg и выше Characters. GUI будет масштабироваться по размеру видового экрана. Направляйтесь в меню «Макет» и выберите опцию Center Top, чтобы она привязалась к верхнему краю окна. Теперь измените размер GUI, чтобы сделать его как можно более маленьким по вертикали. Теперь вы можете увидеть, как интерфейс выглядит в самой игре.

Поздравляем с завершением этого обучения. Вы можете найти готовый проект здесь.

../../_images/ui_gui_design_final_result.png

Окончательный результат

Примечание

** Заключительное примечание об Отзывчивом Дизайне **. Если вы изменяете размер GUI, вы увидите, что узлы перемещаются, но текстуры и текст не будут масштабироваться. GUI также имеет минимальный размер, основанный на текстурах внутри него. В играх нам не нужен очень гибкий интерфейс, как веб-сайт. Вы почти никогда не будете поддерживать как портретный так и ландшафтный ориентации экрана. Или первый или второй. В ландшафтной ориентации наиболее распространенные коэффициенты варьируются от 4:3 до 16:9. Они близки друг к другу. Вот почему для элементов GUI достаточно перемещаться только по горизонтали, когда мы изменяем размер окна.