Система здоровья
Сначала мы создадим простую систему здоровья для наших противников, которая позволит им умирать по человечески.
Заходим в BP_Enemy и создаем две переменные float типа — Health и Max Health. Первая отвечает за текущее здоровье, вторая за максимально доступное.
Устанавливаем начальное значение здоровья
В Begin Play подключаем вот такой код, после чего устанавливаем базовое значение переменной Max Health на желаемое.
Создаем ивент урона
Ура, наши враги теперь могут получать урон и, в случае если здоровье дойдет до нуля, они исчезнут.
Виджеты
Интерфейс — это способ показать игроку, что происходит в коде игры, в понятной ему форме.
Интерфейс есть в любых играх — и на самом деле многие вещи, которые не кажутся интерфейсом, являются им. Интерфейс это обратная связь на то, что происходит внутри.
А кроме того, интерфейс помогает игроку не только анализировать происходящее, но и взаимодействовать с сущностями игры и получать информацию об их состоянии.
User Interface
Пользовательский (UI) — «лицо» программы или устройства, с которым взаимодействует человек. Это кнопки, меню, иконки, текст и все визуальные элементы которые вы видите на экране.
Какой интерфейс есть на экране в шутере?
Диегетический интерфейс
Иногда разработчики делают интерфейс не на экране в виде кнопок, а прямо внутри игры, вписывая его в логику игрового мира. Например, когда мы наносим огромному слайму урон, он уменьшается в размере, пока не пропадет. В Borderlands все интерактивные объекты имеют особенные зеленоватые вставки, нужные для того, чтобы отличить игровой объект от неигрового.
А теперь сделаем свой виджет
Создадим Widget Blueprint.
Сразу добавляем в него Canvas Panel, она поможет нам организовать все остальные элементы внутри виджета.
Изображения
Супер простой виджет — просто 2D изображение. Что с ним можно делать?
- Настраивать размер,
- менять положение на экране,
- менять картинку и тинт этой картинки,
- делать ей тайлинг,
- настраивать прозрачность картинки
Как вставить свою картинку
Ищем Appearance, раскрываем Brush и в Image выбираем или перетаскиваем нужноое нам изображение.
Кстати, вставлять можно не только картинки, но и материалы! Главное — сменить им режим на UserInterface.
После размещения чего угодно
Обязательно нужно настроить якорь! Виджет крепится к якорю и существует на холсте относительно него.
Неправильно выставленный якорь может привести к тому, что виджет сползет в неверное место.
Настроить якорь очень просто — в редакторе уже есть пресеты положений якоря, и в 99,9% случаев нужно просто выбирать наиболее близкое к фактическому положение.
Практика: делаем прицел
- Создаем Image
- Настраиваем якорь и положение в центре экрана
- Настраиваем размер
- Скачиваем из интернета картинку с прицелом и вставляем
Добавляем интерфейс на экран
Добавляем в Begin Play две вот такие ноды. Первая создает выбранный вами виджет, потом мы запоминаем его в переменную, а следующая нода вывод картинку на экран.
Текстовые блоки
Одни из наиболее часто встречающихся виджетов. Мы с его помощью сделаем виджет обоймы.
Показываем патроны в обойме
Создаем Binding параметра внутри виджета. У нас открывается функция и в ней мы пишем вот такой код. Он подтягивает переменную, отображающую кол-во патронов, из персонажа.
Практика: показываем обойму!
Теперь сделайте Binding второму текстовому блоку, скопируйте туда код и перепишите так, чтобы он показывал максимальное количество патронов, а не текущее!
Прогресс бары
Делаем собственное HP
Сначала добавим переменную Max HP в нашем персонаже. Установим ей, сколько хотим, чтобы у персонажа было здоровья. И в Begin Play добавим вот такой код.
Создаем прогресс бар в нашем UI_HUD и переименовываем в HP_Bar, и Percent устанавливаем на 1.
В Ивенте Any Damage добавляем такой код в False у Branch. Print String можно удалить.
Делаем HP врагам
Создаем новый виджет — в нем мы будем делать хп нашим врагам! Называем WB_EnemyHP.
Создаем Canvas Panel и размещаем Progress Bar в центре экрана.
Открываем BP_Enemy (который родитель) и добавляем ему Widget Component. В Widget Class добавляем только что созданный виджет.
В Any Damage перед Branch добавляем такой код.
Сделаем виньетку
Чтобы игрок понимал, когда он получает урон, обычно в играх показывают разные эффекты по краям экрана.
Материал для виньетки
Создаем Image, ставим в центр экрана и делаем размер 1920 на 1080, а вместо картинки ставим наш материал.
Ставим Render Opacity на 0
Теперь виньетка должна пропасть — сейчас мы будем делать так, чтобы она появлялась только во время получения урона.
Анимации
Виджеты можно анимировать — внизу есть специальный для этого интерфейс, позволяющий создать анимации. Давайте проанимируем прозрачность виньетке!
Анимируем виньетку
Открываем вкладку Animation, Создаем анимацию, называем ее Damage, выбираем и в соседнем окне нажимаем Add и добавляем Image.
Добавляем Render Opasity и переходим к таймлайну справа. Перемещаем ползунок на 0.50 и ставим значение 1. Потом — на 1 и ставим 0.
Подключаем анимацию
Создаем Custom Event и называем его VignetteAnim и делаем вот такой код, который и будет запускать нашу анимацию.
Теперь переходим в персонажа и добавляем код, который запустит нашу анимацию при получении урона
Практика: анимируем прицел
Теперь нам нужно сделать анимацию прицела на выстрел:
- Создайте анимацию, добавьте в нее изображение прицела
- Добавьте ему transform
- Сделайте быструю анимацию
- Создайте ивент для анимации в виджете
- Подключите ивент с анимацией к ивенту Left Mouse Buttom в персонаже.
Домашнее задание
Собрать вашу локацию в движке — и расставить противников.
В идеале — начать ее украшать и расставлять какие-то ассеты, но достаточно просто принести ее на занятие в ГОТОВОМ виде.
