Cave: Система пользовательского интерфейса (Game UI)

В этом уроке вы узнаете, как использовать текст в системе интерфейса Cave Engine.

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

Мы рассмотрим, как создавать элементы текста, настраивать их внешний вид и регулировать такие свойства, как шрифт, размер, цвет, интервал, выравнивание и анкоринг.

1. Подготовка места для текста

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

В этом примере мы создадим простое главное меню для игры, содержащее три кнопки:

• Начать игру
• Настройки
• Выход

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

Затем дублируйте одну из кнопок, созданных ранее, пока у вас не будет трех кнопок, и сделайте все их дочерними элементами этого UI Element.

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

2. Добавление текста

Теперь создайте UI Element типа Text и сделайте его дочерним элементом кнопки Начать.

Затем настройте масштаб текстового элемента, пока он не станет подходящего размера для интерфейса.

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

Повторите тот же процесс для других кнопок в меню.

Создайте один Text UI Element для кнопки Настройки и еще один для кнопки Выход, сделав каждый элемент текста дочерним элементом своей соответствующей кнопки.

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

3. Настройки текста

Выберите текстовый UI Element, который мы создали для кнопки Начать.

Во вкладке Text вы найдете все свойства, отвечающие за конфигурацию содержания текста и его визуального внешнего вида.

Свойство Content определяет текст, который будет отображаться элементом UI.

Просто введите желаемое содержание в это поле, и оно будет показано в интерфейсе.

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

• Источник шрифта

Свойство Font Source позволяет вам выбрать шрифт и изменить внешний вид текста.

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

• Цвет

Свойство Color позволяет вам изменить цвет текста.

Это полезно для адаптации текста к стилю интерфейса, улучшения читаемости или создания визуального контраста с фоном.

• Масштаб

Свойство Scale контролирует общий масштаб текста, увеличивая или уменьшая его размер.

Используйте это, чтобы сделать текст более читаемым или лучше соответствовать размеру кнопки, панели или области интерфейса, где он размещен.

• Горизонтальный масштаб

Свойство Horizontal Scale настраивает только горизонтальный масштаб текста.

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

• Интервал

Свойство Spacing контролирует пространство между символами.

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

• Высота строки

Свойство Line Height определяет расстояние между строками текста.

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

• Выравнивание текста

Свойство Text Align определяет, как строки текста выровнены внутри элемента.

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

• Анкоринг текста

Свойство Text Anchor определяет анкоринг текста внутри элемента UI.

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

4. Кастомизация текста

Теперь отредактируйте текстовые элементы так, чтобы они наилучшим образом соответствовали вашему проекту.

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

С помощью этих параметров вы можете создать различные стили текста и адаптировать интерфейс к визуальной идентичности вашей игры.

Например, кнопки меню могут использовать крупный и читаемый шрифт, в то время как описания и второстепенные метки могут использовать меньший текст с более мягкими цветами.

С теми знаниями, которые вы получили в этом квесте, у вас теперь есть основы, необходимые для создания полных интерфейсов в Cave Engine.

Вы можете свободно редактировать UI Elements, настраивать текст, создавать и изменять стили UI, организовывать иерархию UI, настраивать анкоринг и использовать Callbacks для выполнения пользовательской логики.

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

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

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