Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Вступ до графічного інтерфейсу користувача

Важливо, щоб гра надавала гравцям зрозумілий, інформативний, але візуально приємний інтерфейс користувача. Хоча вузли Control мають пристойно функціональний вигляд із коробки, завжди є місце для унікальності та індивідуального налаштування. Для цього движок Godot містить систему для оформлення графічного інтерфейсу (або створення тем), яка дозволяє вам налаштувати вигляд кожного елемента керування у вашому інтерфейсі користувача, включно з вашими власними елементами керування.

Ось приклад цієї системи в дії — гра з графічним інтерфейсом користувача, який радикально відрізняється від стандартної теми інтерфейсу користувача движка:

A "Gear Up!" екран у Tank Kings, люб’язно наданий Winterpixel Games

Окрім досягнення унікального вигляду вашої гри, ця система також дозволяє розробникам надавати параметри налаштування для кінцевих користувачів, зокрема налаштування доступності. Теми інтерфейсу користувача застосовуються каскадним способом (тобто вони поширюються від батьківських елементів керування до дочірніх), що означає, що параметри шрифту або налаштування для користувачів із дальтоніком можна застосувати в одному місці та вплинути на все дерево інтерфейсу користувача. Звичайно, цю систему також можна використовувати для геймплея: ваша гра, заснована на героях, може змінити свій стиль для вибраного персонажа гравця, або ви можете надати сторонам різні відтінки у своєму командному проекті.

Основи тем

Система створення скінів керується ресурсом Theme. Кожен проект Godot має власну тему за замовчуванням, яка містить налаштування, що використовуються вбудованими вузлами керування. Це те, що надає елементам керування виразний вигляд із коробки. Однак тема лише описує конфігурацію, і завданням кожного окремого елемента керування є використання цієї конфігурації так, як вона вимагає для відображення. Це важливо пам’ятати під час впровадження your own custom controls.

Примітка

Навіть сам редактор Godot покладається на тему за замовчуванням. Але він виглядає не так, як проект Godot, оскільки він застосовує власну сильно налаштовану тему поверх стандартної. В принципі, це працює так само, як і у вашій грі, як описано нижче.

Тематичні предмети

Конфігурація, яка зберігається в темі, складається з елементів теми. Кожен елемент має унікальне ім’я та має бути одного з таких типів даних:

• Color

  Значення color, яке часто використовується для шрифтів і фону. Кольори також можна використовувати для модуляції елементів керування та значків.

• constant

  Ціле значення, яке можна використовувати або для числових властивостей елементів керування (наприклад, розділення елементів у BoxContainer), або для логічних прапорів (таких як малювання ліній зв’язку в Tree).

• Шрифт

  Ресурс font, який використовується елементами керування, які відображають текст. Шрифти містять більшість параметрів відтворення тексту, за винятком його розміру та кольору. Крім того, вирівнювання та напрямок тексту контролюються окремими елементами керування.

• font size

  Ціле число, яке використовується разом із шрифтом для визначення розміру тексту, який має відображатися.

• Icon

  Ресурс texture, який зазвичай використовується для відображення значка (наприклад, на Button).

• styleBox

  Ресурс StyleBox, набір параметрів конфігурації, які визначають спосіб відображення панелі інтерфейсу. Це не обмежується елементом керування Panel, оскільки поля стилів використовуються багатьма елементами керування для фону та накладень.

  Різні елементи керування застосовуватимуть StyleBox по-різному. Зокрема, поля стилів фокус малюються як накладення на інші поля стилів (наприклад, звичайні або натиснуті), щоб базове поле стилів залишалося видимим. Це означає, що поле стилю фокуса має бути розроблено як контур або напівпрозоре поле, щоб його фон залишався видимим.

Типи тем

Щоб допомогти з організацією елементів, кожну тему розділено на типи, і кожен елемент має належати до одного типу. Іншими словами, кожен елемент теми визначається своїм іменем, типом даних і типом теми. Ця комбінація має бути унікальною в межах теми. Наприклад, не може бути двох елементів кольору з назвою font_color у типі під назвою Label, але може бути інший font_color елемент у типі LineEdit.

Тема Godot за замовчуванням постачається з декількома вже визначеними типами тем, по одному для кожного вбудованого вузла керування, який використовує оболонку інтерфейсу користувача. Наведений вище приклад містить фактичні елементи теми, присутні в темі за замовчуванням. Ви можете звернутися до розділу Властивості теми в довідці про клас для кожного елемента керування, щоб побачити, які елементи доступні для нього та його дочірніх класів.

Примітка

Дочірні класи можуть використовувати елементи теми, визначені для їх батьківського класу (Button та його похідні є гарним прикладом цього). Фактично, кожен елемент керування може використовувати кожен елемент теми будь-якого типу теми, якщо це необхідно (але для ясності та передбачуваності ми намагаємося уникати цього в движку).

Важливо пам'ятати, що для дитячих класів цей процес автоматизований. Кожного разу, коли вбудований елемент керування запитує елемент теми з теми, він може пропустити тип теми, а замість цього буде використано назву її класу. Крім того, імена класів батьківських класів також будуть використовуватися по черзі. Це дозволяє змінам батьківського класу, наприклад Button, впливати на всі похідні класи без необхідності налаштовувати кожен з них.

Ви також можете визначити власні типи тем, а також налаштувати як вбудовані елементи керування, так і власні. Оскільки вбудовані елементи керування не знають про типи ваших власних тем, для доступу до цих елементів необхідно використовувати скрипти. Усі вузли керування мають кілька методів, які дозволяють отримувати елементи теми з теми, що до них застосована. Ці методи приймають тип теми як один з аргументів.

GDScriptC#

var accent_color = get_theme_color("accent_color", "MyType")
label.add_theme_color_override("font_color", accent_color)

Щоб надати більше можливостей для налаштування, типи також можна пов’язувати разом як варіанти типу. Це ще один варіант використання користувацьких типів тем. Наприклад, тема може містити тип Заголовок, який можна позначити як варіацію базового типу Мітка. Окремий елемент керування Label можна налаштувати на використання варіанту Header для свого типу, і кожного разу, коли елемент теми запитується з теми, цей варіант використовуватиметься перед будь-яким іншим типом. Це дозволяє зберігати різні попередні налаштування елементів теми для одного класу вузла керування в одному ресурсі Тема.

Попередження

Лише варіації, доступні в темі за замовчуванням або визначені в користувальницькій темі проекту, відображаються на панелі «Інспектор» як параметри. Ви все ще можете вручну ввести назву варіанту, який визначено поза цими двома місцями, але рекомендується зберегти всі варіанти в темі проекту.

Ви можете дізнатися більше про створення та використання варіантів типу теми в dedicated article.

Налаштування елемента керування

Кожен вузол керування можна налаштувати безпосередньо без використання тем. Це називається локальними перевизначеннями. Кожну властивість теми з посилання на клас елемента керування можна перевизначити безпосередньо в самому елементі керування за допомогою док-станції Inspector або сценаріїв. Це дозволяє вносити детальні зміни до певної частини інтерфейсу користувача, не впливаючи ні на що інше в проекті, включно з дочірніми елементами цього елемента керування.

Локальні перевизначення менш корисні для візуального вигляду вашого інтерфейсу користувача, особливо якщо ви прагнете узгодженості. Однак для вузлів макета вони важливі. Такі вузли, як BoxContainer і GridContainer використовують константи теми для визначення поділу між їхніми дочірніми елементами, а MarginContainer зберігає настроювані поля в своїх елементах теми .

Щоразу, коли елемент керування має заміну елемента локальної теми, це значення, яке він використовує. Значення, надані темою, ігноруються.

Налаштування проекту

З коробки кожен проект приймає тему проекту за замовчуванням, надану Godot. Сама тема за замовчуванням є постійною та не може бути змінена, але її елементи можна замінити спеціальною темою. Спеціальні теми можна застосовувати двома способами: як налаштування проекту та як властивість вузла в усьому дереві вузлів керування.

Існує два параметри проекту, які можна налаштувати, щоб вплинути на весь проект: GUI > Theme > Custom дозволяє встановити спеціальну тему для всього проекту, а GUI > Theme > Custom Font робить те саме для запасного варіанта за замовчуванням шрифт. Коли вузол керування запитує елемент теми, спочатку перевіряється спеціальна тема проекту, якщо вона присутня. Тема за замовчуванням позначається, лише якщо в ньому немає елемента.

Це дозволяє налаштувати вигляд за замовчуванням кожного елемента керування Godot за допомогою єдиного тематичного ресурсу, але ви можете зробити це більш детально. Кожний вузол керування також має властивість theme, яка дозволяє встановити спеціальну тему для гілки вузлів, починаючи з цього елемента керування. Це означає, що елемент керування та всі його дочірні елементи, а також їхні дочірні елементи, у свою чергу, спочатку перевірять цей власний ресурс теми, перш ніж повернутися до проекту та тем за замовчуванням.

Примітка

Замість того, щоб змінювати параметри проекту, ви можете встановити ресурс спеціальної теми для самого кореневого вузла керування всієї вашої гілки інтерфейсу користувача з майже таким самим ефектом. Хоча у запущеному проекті він поводитиметься належним чином, окремі сцени все одно відображатимуться з використанням теми за замовчуванням під час попереднього перегляду або безпосереднього запуску. Щоб виправити це, ви можете встановити той самий ресурс теми для кореневого керування кожної окремої сцени.

Наприклад, ви можете мати певний стиль для кнопок у темі проекту, але бажаєте інший вигляд кнопок у спливаючому діалоговому вікні. Ви можете встановити спеціальний ресурс теми для кореневого елемента керування вашого спливаючого вікна та визначити інший стиль для кнопок у цьому ресурсі. Поки ланцюжок вузлів керування між коренем спливаючого вікна та кнопками не переривається, ці кнопки використовуватимуть стилі, визначені в ресурсі теми, який є найближчим до них. Усі інші елементи керування все одно будуть оформлені за допомогою теми для всього проекту та стилів теми за замовчуванням.

Підводячи підсумок, для довільного елемента управління пошук елементів його теми виглядатиме приблизно так:

1. Перевірте локальні перевизначення того самого типу даних і імені.

2. Використання варіанту типу елемента керування, імені класу та назв батьківського класу:

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

   2. Якщо так, перевірте цю тему для відповідного елемента з такою ж назвою, даними та типом теми;

   3. Якщо спеціальної теми немає або в ній відсутній елемент, перейдіть до батьківського контролю;

   4. Повторіть кроки a-c. поки не буде досягнуто кореня дерева або не буде досягнуто неконтрольний вузол.

3. Використовуючи варіант типу елемента керування, назву класу та імена батьківського класу, перевірте тему для всього проекту, якщо вона присутня.

4. Використовуючи зміну типу елемента керування, назву класу та імена батьківських класів, перевірте тему за замовчуванням.

Навіть якщо елемент не існує в жодній темі, буде повернено відповідне значення за замовчуванням для цього типу даних.

Поза контролем

Звичайно, теми є ідеальним типом ресурсу для зберігання конфігурації чогось візуального. Хоча підтримка тематизації вбудована в контрольні вузли, інші вузли також можуть використовувати їх, як і будь-який інший ресурс.

Прикладом використання тем для чогось поза контролем може бути модуляція спрайтів для тих самих підрозділів у різних командах у стратегічній грі. Ресурс теми може визначати набір кольорів, а спрайти (за допомогою сценаріїв) можуть використовувати ці кольори для малювання текстури. Основна перевага полягає в тому, що ви можете створювати різні теми, використовуючи однакові елементи теми для червоних, синіх і зелених команд, і міняти їх місцями за допомогою однієї зміни ресурсу.