🎮 UI в Unity: Часть 5 – Активные UI-элементы

Активные элементы — это "живые" компоненты интерфейса, которые реагируют на действия пользователя. Давайте разберём ключевые из них!

🕹 Основные активные элементы
1. Кнопка (Button)
- Зачем: Основной элемент для кликов/тапов
- Фишки:
- 4 состояния (Normal, Highlighted, Pressed, Disabled)
- Событие onClick для привязки действий

// Пример скрипта для кнопки
button.onClick.AddListener(() => Debug.Log("Клик!"));

2. Поле ввода (InputField/TMP_InputField)
- Зачем: Текстовый ввод (логины, чаты)
- Фишки:
- Валидация (цифры/буквы/пароли)
- События onValueChanged, onEndEdit

inputField.onEndEdit.AddListener(text => Debug.Log($"Введено: {text}"));

3. Переключатель (Toggle)
- Зачем: Чекбоксы и радио-кнопки
- Фишки:
- Группировка через Toggle Group
- Событие onValueChanged

toggle.onValueChanged.AddListener(isOn => Debug.Log($"Состояние: {isOn}"));

4. Слайдер (Slider)
- Зачем: Выбор значений в диапазоне (громкость, настройки)
- Фишки:
- Настройка min/max значений
- Событие onValueChanged

slider.onValueChanged.AddListener(value => audio.volume = value);

5. Скроллвью (ScrollView)
- Зачем: Прокрутка контента (списки, инвентарь)
- Фишки:
- Вертикальный/горизонтальный режим
- Оптимизация через Mask + Layout Group

⚡️ Важные особенности
- Наследование от Selectable – все активные элементы имеют:
- Состояния (Hover, Pressed)
- Навигацию (клавиши/геймпад)
- Требуют EventSystem – без него не будут работать!

💡 Советы по использованию
1. Для текста всегда выбирайте TextMeshPro (лучше качество)
2. Оптимизация: Отключайте ненужные Raycast Target у декоративных элементов
3. Анимации: Добавляйте эффекты через Animator к состояниям (например, пульсацию при наведении)

Как вы могли заметить, я немного пропал и совсем ничего не постил — исправляюсь! Сейчас готовлю материалы по нескольким темам: профайлинг, новая система инпута, Scriptable Objects и Character Controller. По итогам я хочу показать вам применение всего, что мы до этого изучали на конкретном примере. Есть несколько идей и я предложу вам выбрать после того, как мы рассмотрим все нужные темы. А пока выбирайте, с чего вы хотели бы начать?

Чтож, промежуточный результат голосования я вижу - думаю, что в дальнейшем он не изменится, а потому приступаю к написанию постов по Scriptable Objects. Чтобы материал не был сухим и оторванным от реальности я покажу работу SO на примере небольшого глоссария — раздела игры, посвящённого разным врагам. Заодно коснёмся темы UI. Ждите совсем скоро - будет интересно!

🎮 ScriptableObjects в Unity

ScriptableObject (SO) — это мощный инструмент для хранения данных и логики вне GameObject.

Идеально для: настроек персонажей, информации о предметах, диалогов и любых конфигов!

🔥 Зачем использовать?
✔️ Экономия памяти – один SO может использоваться тысячами объектов
✔️ Гибкость – изменение данных без правки кода
✔️ Интеграция с Inspector – настройки как у компонентов

🛠 Основы создания
Скрипт:

using UnityEngine;

[CreateAssetMenu(fileName = "NewCharacter", menuName = "Characters/CharacterData")]
public class CharacterData : ScriptableObject {
    public string characterName;
    public int maxHealth;
    public float moveSpeed;
}

Для создания ScriptableObject важно наследовать класс от ScriptableObject и использовать модификатор [CreateAssetMenu], указав название для создаваемых SO и положение объекта во всплывающем меню.

Создание ассета:
ПКМ в Project → Create → Characters → CharacterData

Заполните параметры в инспекторе

💡 Пример: Базовая система персонажей
1. Данные персонажа (SO)

using UnityEngine;

[CreateAssetMenu(fileName = "NewCharacter", menuName = "Characters/CharacterData")]
public class CharacterData : ScriptableObject {
    public string characterName;
    public int maxHealth;
    public float moveSpeed;
}

2. Использование в скрипте

// PlayerController.cs
public class PlayerController : MonoBehaviour {
    public CharacterData data; // Перетащите сюда SO

    private int currentHealth;

    void Start() {
        currentHealth = data.maxHealth;
    }

    void Update() {
        float move = Input.GetAxis("Horizontal") * data.moveSpeed;
        transform.Translate(move * Time.deltaTime, 0, 0);
    }
}

3. Преимущества подхода
- Можно создать разные вариации персонажей (игрок, враг, NPC) без дублирования кода - достаточно установить новый конфиг для изменения настроек персонажа.
- Баланс игры меняется без пересборки – просто редактируем SO
- Данные можно переиспользовать (например, несколько врагов с одними параметрами)

📊 Когда выбирать ScriptableObject?
1. Настройки персонажей/врагов — ✅ Идеально
2. Система диалогов/квестов — ✅ Отлично

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

Вдальнейшем мы напишем небольшой глоссарий, описывающий информацию о различных противниках. Ждите – следующий пост совсем скоро!

ScriptableObjects: Создание глоссария - часть 1

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

Для создания класса нам необходимо выделить наиболее важные и общие для всех врагов параметры. В моём случае это будут:
1. Название типа противников
2. Здоровье противников
3. Урон противников.

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

🛠Создание конфигов
Чтобы создать ScriptableObject вам необходимо создать базовый скрипт в файлах проекта: ПКМ -> Create -> C# Script.

После этого переименуйте скрипт в соответствии с тем, что вы создаёте. В моём случае скрипт называется Enemy.

Открыв скрипт, измените код программы следующим образом:

using UnityEngine;

[CreateAssetMenu(fileName = "Enemy", menuName = "Entities/Enemy")]
public class Enemy : ScriptableObject
{
    public string enemyName;
    public int hp;
    public int damage;
}

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

Вместо наследования от MonoBehaviour наш класс наследуется от ScriptableObject. Также перед объявлением класса мы используем CreateAssetMenu, чтобы обозначить изначальное название конфига при создании и то, где мы сможем найти его во всплывающем меню. Исходя из приведённого выше кода мы сможем создать Enemy используя ПКМ -> Create -> Entities -> Enemy

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

В следующем посте сверстаем UI для глоссария – ждите совсем скоро!

ScriptableObjects: Создание глоссария - часть 2

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

🛠Подготовка
Для начала нужно настроить холст. Нам понадобится лишь установить Scale With Screen Size, чтобы объекты Canvas масштабировались вместе с изменением размеров экрана, после чего нужно выставить эталонное разрешение - то, которое установлено у вас во вкладке Game. У меня, как вы видите, это 1920х1080.

Далее требуется разбить глоссарий на нижнюю и верхнюю область. Обратите внимание, что это сделано с использованием так называемых “якорей”(Anchors). Если говорить по простому, то якорь, это точка, к которой привинчивается объект на макете(Canvas). Это может быть середина холста, его нижний левый край или произвольная, выбранная вами точка. Также каждый якорь может быть прикручен к разным точкам, и тогда вместо указания позиции для объекта мы будем указывать отступы от якорей. Использование якорей это навык очень важный для вёрстки. Тема использования якорей достаточно важна, поэтому её нельзя игнорировать, но также эта тема не настолько велика, чтобы писать отдельный пост. Накидайте бананов, если хотите подробно разобрать позиционирование UI элементов на Canvas

❓Что нужно отображать?
После того, как мы установили базовый макет, нужно определиться с тем, что мы будем выводить на этом макете? В случае с нашими ScriptableObject`ами – это имя, здоровье и урон, то есть те самые параметры, которые мы определили для них в прошлом посте.

Чтобы выводить эту информацию нам понадобится объект с компонентом TextMeshPro – этот элемент вы сможете найти во вкладке UI во всплывающем окошке при попытке создать объект. Я создаю пары Label-Value, то есть объект, указывающий на тип значения и само значение, чтобы пользователь по подписи мог понять, что является здоровьем, а что уроном. Затем нужно лишь расставить эти элементы на холсте

🧐Кого нужно отображать?
Создав макет и добавив поля для вывода информации нам остаётся лишь добавить интерфейс для выбора противников, информацию о которых пользователь сможет узнать. Для этого в нижней части экрана я создаю кнопки – объекты Button, подписывая их так, чтобы пользователь понимал, какого противника он выберет для рассмотрения при нажатии.

✍🏻Итог
Теперь у нас есть набор конфигов, каждый из которых хранит информацию о конкретном противнике и макет глоссария, через который пользователь сможет рассмотреть информацию о каждом из противников. В следующем посте мы наконец добавим скрипты для управления этим макетом и установления связи между ним и конфигами, чем, наконец, закроем тему ScriptableObject. Ждите совсем скоро!

Пока готовится следующий пост по глоссарию решил поделиться с вами актуальным проектом. Вдохновился "ULTRAKILL" и решил создать свой FPS. Систему движений решил скопировать, а графику планирую сделать похожей на "Buckshot roulette". Пока тестирую физику, подбираю визуал и интерфейс. Как вам?

Охуеть, 20 подписчиков

Я понял в каком направлении развивать канал...

ScriptableObjects: Создание глоссария - часть 3

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

🛠Проектирование
Прежде чем приступать к написанию скрипта, нужно определиться с задачами, которые он должен решать. Какого функционала мы ожидаем от нашего глоссария? Для такой системы можно придумать множество дополнительных фич, таких как: звуковой эффект при выборе, подсветка выбранной кнопки, изменение её размера, анимации и так далее. В нашем случае мы обойдёмся самым простым вариантом - изменение содержимого текстовых полей при нажатии на кнопки. Для этого будет достаточно одного скрипта, который будет содержать ссылки на нужные текстовые поля и публичный метод для вывода информации о враге. Давайте перейдём к реализации скрипта

🧑‍💻Код

using TMPro;
using UnityEngine;

public class GlossaryInfoShowController : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI _enemyName;
    [SerializeField] private TextMeshProUGUI _hp;
    [SerializeField] private TextMeshProUGUI _damage;


    public void ShowEnemyInfo(Enemy enemyConfig)
    {
        _enemyName.text = enemyConfig.enemyName;
        _hp.text = enemyConfig.hp.ToString();
        _damage.text = enemyConfig.damage.ToString();
    }

}

Это весь код, необходимый для работы нашего глоссария. Мы используем обычный MonoBehaviour, в котором определяем три приватных поля. Благодаря модификатору [SerializeField] мы сможем указать ссылки через инспектор несмотря на приватность. Именно эти поля будет менять скрипт внутри своего публичного метода ShowEnemyInfo(). Как видно из кода, метод принимает один аргумент как раз того типа, который мы создавали в первом посте для хранения конфигов о противнике. Теперь всё готово и осталось добавить скрипт на сцену

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

✍🏻Итог
Теперь у нас есть полностью рабочая система глоссария, отображающая информацию о любом враге, которого мы выберем. Для масштабирования подобной системы достаточно лишь создать ещё больше конфигов и добавить больше кнопок!