Создание полосы здоровья

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

1. ВИЗУАЛЬНАЯ ЧАСТЬ. Это то, как будет отображаться полоса здоровья в вашей игре.
2. ПРОГРАМНАЯ ЧАСТЬ. Это непосредственно сам код c#, который будет динамически менять визуальную полосу здоровья.

Визуальная часть

Итак, для начала нам необходимо с помощью окна Hierarchy создать новый игровой объект типа UI – Canvas, в котором в дальнейшем будет размещаться наша полоса здоровья. После создания объекта Canvas, приступим к его настройке. Для этого жмём на игровой объект Canvas, и в окне Inspector проделываем следующие действия:

1. В поле Render Mode выбираем Screen Space – Camera. Это нужно, чтобы наш канвас привязать к нашей игровой камере.
2. В поле Render Camera перетаскиваем объект нашей камеры из окна Hierarchy.
3. В поле UI Scale Mode выбираем Scale With Screen Size.
4. В поле Reference Resolution указываем Х=1920 Y=1080. Если Вы создаёте игру для мобильных устройств, то установите Х=1080 Y=1920

Настройки канваса завершены. Теперь внутри этого канваса нужно создать нашу полосу здоровья. Полоса здоровья будет состоять из двух частей(спрайтов): полоса прогресса, и её рамка. Скачать эти спрайты можно по клике на ссылку <a download href="https://unityhub.ru/files/guides/BarProgress.zip">Скачать</a>.

Создание рамки

Создаём игровой объект типа UI – Image, называем его, например, Border, и помещаем его внутрь объекта Canvas. Далее в окне Inspector настраиваем данный объект. Для этого в поле Suorce Image загружаем изображение(спрайт) нашей рамки.

Создание полосы здоровья

Создаём ещё один игровой объект типа UI – Image, называем его, например, Bar, и помещаем его внутрь объекта Canvas. В окне Inspector настраиваем данный объект следующим образом:

1. В поле Suorce Image загружаем изображение(спрайт) нашей полосы здоровья.
2. В поле Image Type выбираем Filed.
3. В поле Fill Method выбираем Horizontal.
4. В поле Fill Origin выбираем Left.
5. В поле Preserve Aspect ставим галочку, чтобы изображение имело пропорции оригинала.

На данном этапе всё! Чтобы убедиться что мы всё правильно сделали, попробуйте у объекта Bar изменить в Inspector-е значение поля Fill Amount используя ползунок. От таких манипуляций, размер полосы вашего здоровья на игровой сцене должен меняться, в зависимости от значения, указанного в поле Fill Amount. Если всё работает, значит на данном этапе Вы всё сделали правильно.

Программная часть

Перед тем, как мы перейдём к основному коду, предлагаю для начала создать файл типа скрипт C#, и назвать его, например, InfoPlayer. В данном скрипте мы будем хранить информацию о текущем и максимальном здоровье нашего игрока:

using UnityEngine;
using UnityEngine.UI;

public class InfoPlayer: MonoBehaviour
{
    public float HP = 74f;
    public float maxHP = 100f;

}

Не забудьте этот скрипт присвоить к игровому объекту вашего персонажа.

Но а теперь перейдёт к самому интересному. Как вы уже догадались, для динамического изменения полосы здоровья, нам нужно с помощью программного кода c# менять значение Fill Amount у нашего объекта Bar. Для этого создаём новый c# скрипт, с названием, например, HealthBar. Данный скрипт присваиваем к игровому объекту, в котором будем менять значение Fill Amount, а именно к объекту Bar. Весь код выглядит следующим образом:

using UnityEngine;
using UnityEngine.UI;

public class HealthBar : MonoBehaviour
{
    public Image healthBar;
    public InfoPlayer player;

    void Start()
    {
        healthBar = GetComponent<Image>();
        player = FindObjectOfType<InfoPlayer>();
    }

    
    void Update()
    {
        healthBar.fillAmount = player.HP / player.maxHP;
    }
}

Давайте разберём этот код по порядку.

Поскольку мы используем игровые объекты типа UI, то нам необходимо подключить дополнительную библиотеку:

using UnityEngine.UI; 

Далее объявляем 2 переменные. Переменная healthBar будет хранить ссылку на компонент Image для того, чтобы менять в этом компоненте свойство Fill Amount. А в переменной player будем хранить ссылку на объект нашего игрового персонажа, чтобы извлекать из него информацию о текущем(HP) и максимальном(maxHP) здоровье персонажа.

public Image healthBar;
public InfoPlayer player;

В методе Awake() получаем ссылки на компонент Image и Player. Теперь в наших переменных имеется вся необходимая информация, для правильного отображения полосы здоровья:

void Awake()
    {
        healthBar = GetComponent<Image>();
        player = FindObjectOfType<InfoPlayer>();
    }

Ну и в завершении, в методе Update() мы устанавливаем значение fillAmount исходя из данных о текущем здоровье игрока(player.HP) и о максимальном здоровье игрока(player.maxHP).

void Update()
    {
        healthBar.fillAmount = player.HP / player.maxHP;
    }

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