Полоса здоровья в Unity3D: шаг за шагом

Мужчина в VR-гарнитуре с панелью здоровья над головой

Создадим простую полоску здоровья в Unity3D: добавим UI Image на Canvas, подключим спрайт с типом Filled, возьмём значение здоровья из скрипта персонажа и связав его с fillAmount у Image — получим рабочую полосу. Добавим смену цвета (зелёный/красный), тестирование и чек‑листы для разработчиков и QA.

Pioneered in some of the world’s earliest video games, health is a common mechanic that persists in many of today’s most popular titles. Health makes it possible to employ complex fight mechanics, create player progression, and make your game more intuitive. But how do you add a health system to your own games?

Unity3D makes it easy to add 2D UI elements to 3D games, so it’s a great place to start exploring health bars for the first time.

Чем вы научитесь

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

Как добавлять 2D UI-элементы и спрайты в Unity3D.
Как получать и изменять компоненты игрового объекта из кода.
Как передавать и читать переменные между разными скриптами.

Требования и подготовка

Unity (рекомендуется версия 2019.4+ или новее).
Установленный модуль 2D (если пункты UI не отображаются: Window > Package Manager → 2D).
Базовый персонаж в сцене; в примерах объект персонажа называется Character_Model.

Важно: в примерах используется встроенная система uGUI (Canvas, Image). Для UI Toolkit подход и код будут отличаться.

Шаг 1: Создайте сцену и UI-элемент

Перед кодом нужна сцена с моделью игрока. Если у вас ещё нет контроллера персонажа, создайте простой объект с именем Character_Model и добавьте к нему скрипт Character_Control.

Добавьте UI-элемент: в Hierarchy правой кнопкой → UI → Image. Unity создаст Canvas и дочерний Image. Переименуйте дочерний объект в Healthbar и настройте ширину, высоту и позицию через инспектор.

Добавление UI Image в Unity (Canvas и Image в иерархии)

Можно добавить второй, чуть больший Image с чёрным цветом как фон/рамку и убедиться, что он находится выше (перед) в иерархии, чтобы отображаться позади основной зелёной полосы.

Создайте спрайт: в Project → правый клик → Create → 2D → Sprites → Square.

Создание 2D Sprite — квадрат в проекте Unity

Выделите Healthbar в иерархии и перетащите созданный спрайт в поле Source Image в инспекторе. В Image установите:

Image Type: Filled
Fill Method: Horizontal
Fill Origin: Left

Теперь при изменении параметра Fill Amount в инспекторе вы увидите, как полоса сокращается и растёт.

Назначение спрайта в поле Source Image в инспекторе

Шаг 2: Добавьте переменную здоровья

В контроллер персонажа (Character_Control) добавьте публичную переменную для хранения текущего здоровья. В примере логично работать с числом в диапазоне 0..1, чтобы соответствовать fillAmount.

public float playerHealth = 1.0f;

Использование float позволяет хранить проценты — например, 0.5f соответствует 50% полосы.

Шаг 3: Чтение переменной из другого скрипта

Создайте новый скрипт Health и прикрепите его к объекту Healthbar (тот самый UI Image). В методе Update мы будем искать игровой объект персонажа и читать переменную playerHealth из его контроллера.

Обратите внимание: для корректной работы используйте дженерики GetComponent() и GetComponent().

Пример корректного кода для чтения значения:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Health : MonoBehaviour
{
    public float currentHealth;

    void Update()
    {
        GameObject Character_Model = GameObject.Find("Character_Model");
        if (Character_Model == null) return; // безопасная проверка

        Character_Control character_Control = Character_Model.GetComponent();
        if (character_Control == null) return; // безопасная проверка

        currentHealth = character_Control.playerHealth;
    }
}

Важно использовать проверки на null: поиск по имени и получение компонента может вернуть null в ранних этапах сцены.

Шаг 4: Свяжите UI Image с переменной и добавьте цвет

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Health : MonoBehaviour
{
    private static Image Healthbar;
    public float currentHealth;

    void Start()
    {
        Healthbar = GetComponent();
    }

    void Update()
    {
        GameObject Character_Model = GameObject.Find("Character_Model");
        if (Character_Model == null || Healthbar == null) return;

        Character_Control character_Control = Character_Model.GetComponent();
        if (character_Control == null) return;

        currentHealth = character_Control.playerHealth;
        Healthbar.fillAmount = currentHealth;

        Color greenHealth = new Color(0.6f, 1f, 0.6f, 1f);

        if (currentHealth >= 0.3f)
        {
            Healthbar.color = greenHealth;
        }
        else
        {
            Healthbar.color = Color.red;
        }
    }
}

Примечания:

Использование private static Image Healthbar — приемлемо для простых проектов, однако в больших проектах лучше избегать статических ссылок на компоненты UI.
Цвета заданы в формате RGBA с компонентами 0..1.

Шаг 5: Тестирование и отладка

Чтобы протестировать работу, добавьте в Character_Control временное уменьшение здоровья при нажатии кнопки движения. Например, уменьшать немного при нажатии W:

// Внутри метода Update контроллера персонажа
if (Input.GetKeyDown(KeyCode.W))
{
    playerHealth = Mathf.Max(0f, playerHealth - 0.01f);
}

Советы по тестированию:

Отладочные сообщения: Debug.Log(currentHealth) поможет убедиться, что значение изменяется.
Проверьте порядок объектов в иерархии: фон должен быть выше/раньше, чем цветная полоса, чтобы фон отображался позади.
Убедитесь, что Canvas настроен в правильном Render Mode (Screen Space – Overlay или World Space для «плавающих» баров).

Полный исправленный код компонента Health

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Health : MonoBehaviour
{
    private static Image Healthbar;
    public float currentHealth;

    void Start()
    {
        Healthbar = GetComponent();
    }

    void Update()
    {
        GameObject Character_Model = GameObject.Find("Character_Model");
        if (Character_Model == null || Healthbar == null) return;

        Character_Control character_Control = Character_Model.GetComponent();
        if (character_Control == null) return;

        currentHealth = character_Control.playerHealth;
        Healthbar.fillAmount = currentHealth;

        Color greenHealth = new Color(0.6f, 1f, 0.6f, 1f);

        if (currentHealth >= 0.3f)
        {
            Healthbar.color = greenHealth;
        }
        else
        {
            Healthbar.color = Color.red;
        }
    }
}

Альтернативные подходы

World‑space UI: если нужна полоса над головой персонажа в 3D, используйте Canvas с Render Mode = World Space и привяжите его к позиции персонажа.
Шейдеры: вместо изменения fillAmount можно использовать шейдеры и маски, что даёт более гибкую визуализацию (гладкие анимации, градиенты).
Text‑based UI: добавьте числовой индикатор (например, “75/100”) для точного отображения здоровья.

Когда такой подход не подходит

Если у вас тысячи врагов на сцене одновременно, постоянные Find/GetComponent в Update приведут к падению производительности. В таких случаях используйте события, пул объектов и кеширование ссылок.
Для сложных RPG с системой уязвимости/щитов/эффектов потребуется более развитая модель здоровья (структуры, события, сетевые синхронизации).

Практическая методология (мини‑SOP)

Подготовка: создайте Canvas и Image, назначьте спрайт и тип Filled.
Контроллер: добавьте playerHealth в скрипт персонажа (float 0..1).
UI‑скрипт: в Start получите Image и сохраните ссылку; в Update считывайте значение и обновляйте fillAmount.
Валидация: добавьте проверки на null и ограничьте значение в диапазоне 0..1.
Тест: уменьшение/увеличение здоровья с клавиатуры, проверка визуальных состояний.

Чек‑листы по ролям

Разработчик (Gameplay):

playerHealth объявлен и инициализирован
логика уменьшения/восстановления реализована
события о критическом здоровье отправляются (если нужны)

UI‑дизайнер:

корректный спрайт и Image Type = Filled
читаемая цветовая схема (зелёный/жёлтый/красный)
фон и отступы правильно настроены

QA:

полоса реагирует на изменения здоровья
при 0 отображается пустая полоса, при 1 — полная
цвет меняется при пороге 0.3
нет ошибок null reference в консоли

Критерии приёмки

Полоса здоровья отображается в игре и изменяет ширину в ответ на изменение playerHealth.
При playerHealth >= 0.3 полоса зелёная, иначе — красная.
Отсутствие ошибок в консоли при загрузке сцены и при тестовых изменениях здоровья.
Производительность не деградирует при наличии нескольких UI-элементов (проконтролировать падение FPS).

Ментальные модели и эвристики

Представляйте health как процент (0..1) — это упрощает привязку к fillAmount.
Разделяйте модель (переменные состояния персонажа) и представление (UI): изменения модели генерируют события, UI слушает и обновляет отображение.

Безопасность и оптимизация

Не используйте GameObject.Find в каждом Update в крупных проектах. Кешируйте ссылки или используйте паттерн подписчика/наблюдателя.
Для многопользовательских игр синхронизируйте здоровье через сетевой слой, не полагаясь на локальные Fill Amount для логики.

Краткий глоссарий

Canvas: контейнер для UI-элементов в Unity.
Image: компонент, отображающий спрайт/картинку в UI.
fillAmount: параметр Image (тип Filled), задающий долю заполнения от 0 до 1.

Заключение

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

Короткие рекомендации для дальнейшего улучшения:

Переведите передачу изменений на событийную систему (Action/UnityEvent) для эффективности.
Добавьте анимацию изменения fillAmount через Mathf.Lerp или корутины для плавного перехода.
Рассмотрите возможности шейдеров для декоративных эффектов.