Внешний вид интерфейса

О, красивые кнопочки!

Этот урок посвящён изменению внешнего вида пользовательского интерфейса. Большинство игр, как правило, не нуждаются в этом, так как в конечном итоге просто полагаются на Label, TextureRect, TextureButton и TextureProgress.

Однако некоторые жанры игр, такие как ММО, РПГ, симуляторы и стратегии, предполагают довольно сложный GUI. Также это касается игр, содержащих редактор для создания контента или интерфейс для подключения к сети.

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

Тема

GUI изменяется с помощью ресурса Theme. Тема содержит всю информацию, необходимую для визуализации всех элементов управления. Хотя параметры темы проименованы, иногда (особенно из кода) бывает не очевидно, что именно нужно изменить, поэтому для работы с темами предусмотрено несколько инструментов. В крайнем случае вы можете посмотреть файл scene/resources/default_theme/default_theme.cpp, чтобы понять назначение тех или иных свойств - этот файл всегда будет актуальнее, чем любая документация. В следующих разделах будут описаны инструменты, которые вы можете использовать для настройки темы.

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

Внимание

Не используйте опцию "GUI/Theme/Custom" в настройках проекта, так как существуют известные ошибки с распространением темы. Вместо этого назначьте свою тему в свойстве Theme корневого узла Control. Это автоматически распространит тему на прикреплённые дочерние сцены во время работы игры. Однако чтобы темы правильно работали для прикреплённых сцен и в редакторе, вам необходимо также назначить тему для корневого узла каждой прикреплённой сцены.

Параметры темы

Каждый параметр темы может быть:

  • целочисленной константой - обычно используется для определения расстояний между компонентами или для выравнивания;

  • цветом, с прозрачностью или без - обычно применяется к шрифтам и иконкам;

  • текстурой - используется редко, обычно в качестве маркера выбора или иконки в составном элементе управления (таком как диалог выбора файла);

  • шрифтом - применяется в каждом элементе управления, который отображает текст;

  • StyleBox - ресурс, определяющий вид элемента при различных размерах (позже об этом будет сказано подробнее).

Каждый параметр темы определяется:

  • именем этого параметра;

  • типом элемента управления, к которому он относится.

Пример использования:

var theme = Theme.new()
theme.set_color("font_color", "Label", Color.red)

var label = Label.new()
label.theme = theme
var theme = new Theme();
theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));

var label = new Label();
label.Theme = theme;

В этом примере создаётся новая тема "theme". В ней определяется параметр "font_color" для элементов типа "Label", а затем тема применяется к новому элементу "label". В результате текст этого элемента (а так же дочерних элементов) будет красным.

Этот же параметр можно изменить только для конкретного элемента управления и без прямого использования темы с помощью функции переопределения Control.add_color_override():

var label = Label.new()
label.add_color_override("font_color", Color.red)
var label = new Label();
label.AddColorOverride("fontColor", new Color(1.0f, 0.0f, 0.0f));

Во встроенном справочнике Godot (на вкладке Script) вы можете проверить, какие параметры темы могут быть переопределены; также вы можете найти эту информацию в описании класса Control.

Настройка элементов управления

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

../../_images/themecheck.png

Как видно на изображении выше, параметры в группах "Custom ..." имеют флажки-переключатели. Если такой флажок активировать, соответствующее свойство переопределит параметра темы для этого элемента управления.

Создание темы

Самый простой способ создать новую тему - отредактировать свойство Theme элемента управления. Выберите "New Theme" в выпадающем меню и появится редактор тем. После этого в том же выпадающем меню сохраните новую тему (например, с именем mytheme.theme):

../../_images/sb2.png

Это создаст пустую тему, которую позже можно будет отредактировать и назначить другим элементам управления.

Пример: создание темы для кнопок

Загрузите набор ресурсов (skin_assets.zip) и добавьте его в ваш проект. Откройте редактор тем и в меню "Edit Theme.." выберите "Add Class Items":

../../_images/themeci.png

Появится окно выбора типа создаваемого элемента. Выберите "Button":

../../_images/themeci2.png

Тема и её параметры, применимые для кнопок, появятся в инспекторе, где их можно будет редактировать:

../../_images/themeci3.png

В разделе "Styles" для параметра "Normal" откройте выпадающее меню (кнопка справа от параметра) и выберите в нём "New StyleBoxTexture", а затем откройте появившийся стиль, выбрав в том же меню "Редактировать". Вы необходимо указать текстуру и её размеры, а также размеры полей, которые не будут растягиваться при изменении размеров кнопки. Этот формат называется "9-patch" (дословно "девять лоскутов") или "растяжка 3 на 3":

../../_images/sb1.png

Повторите эти шаги для оставшихся стилей. Среди файлов скачанного архива нет текстур для "Hover" и "Disabled", поэтому используйте те же, что и в "Normal". Установите шрифт из архива в качестве шрифта кнопки и измените его цвет на чёрный. Скоро ваши кнопки будет выглядеть по-другому, в стиле ретро:

../../_images/sb2.png

Сохраните свою тему в файле new_theme.theme. Перейдите в 2D-редактор и создайте там несколько кнопок:

../../_images/skinbuttons1.png

Теперь перейдите к корневому узлу сцены и измените свойство "Theme", установив в нём только что созданную тему. Это должно выглядеть примерно так:

../../_images/skinbuttons2.png

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