[Из песочницы] Создаем 2D платформер при помощи Unreal Engine 4. Часть 1 — Игровой персонаж, движение

Не так давно компания Epic Games сделала невероятно щедрый подарок всем желающим — движок UE4 с исходным кодом всего за $20/мес, считай даром! Воспользуемся их щедростью и великодушием и попробуем создать что-нибудь не очень сложное, но, по крайней мере, более-менее играбельное — 2D платформер.Прежде всего нам понадобятся: спрайты персонажа текстуры платформ Поскольку лично я рисовать не умею вовсе, да и не в этом наша цель, воспользуемся ресурсами замечательной игры «Castlevania: Symphony of the night», в которой главным героем является Алукард, сын Дракулы. Несложно найти на просторах сети полную раскадровку персонажа — то что нам нужно! Полная раскадровка Alucard’а 03cd87de1b8e40a69fd1ab0979da9bbe.png Давайте подготовим раскадровки для 2х состояний: покой и бег, для этого необходимо удалить красный фон (нам ведь не надо, что бы персонаж перемещался всегда на фоне красного прямоугольника) и вырезать требующиеся части изображения, на выходе получая что-то вроде этого:

1024292d10984a038226ac0ca0d0a66d.png

И этого:

554f7666b85c4da28f26eecfb68a0b6a.png

Из фоновых изображений пока вырезаем только пол:

Длинная и скучная текстура пола 7b327f23513548f8822059aa45c1d375.png С подготовкой все, теперь приступаем к созданию проекта и импорту исходников. В последних версиях UE4 была добавлена возможность сразу создать 2D Side Sroller (blueprint), воспользуемся ей, не забыв убрать стартовый контент — там достаточно много материалов и объектов, которые нам сейчас не нужны. По умолчанию нам дают уже готового к пробежке манекена и пару платформ, все это нам не потребуется, так что удаляем.Базовый контент 6a83ad7b140745b6b39a17e1b7390b67.png Структурируем папки проекта и импортируем соответствующие изображения: 0ef7e7c96d0b4071936787846a26a44b.png

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

Первым делом создаем еще пару папочек, на этот раз в «Sprites» → «Alucard», внутри которой будут папки «Idle» и «Walking» с соответствующими спрайтами. Итак, создаем пустой спрайт, называем его «Idle_1» и открываем. Сразу же переходим в «Edit source region», а в качестве текстуры-источника указываем текстуру «Alucard_Idle».

02034a57eeea4d0f820e5de3a97438c2.png

Один спрайт должен содержать один кадр анимации персонажа, так что скорректируем значения «Source UV» и «Source dimension», что бы получить один кадр, либо просто дважды кликаем на нужно изображение, что бы автоматически определить его границы:

c1920f65c6c940958a4690a51f067d06.png

Проделываем то же самое с оставшимися кадрами покоя и ходьбы:

3d0d6ba057ee4768936d07a57f3dfc5f.png

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

Самое время придать немного жизни нашим спрайтам! Для этого создаем «Animation flipbook», даем ему имя и открываем. Добавляем соответствующие кадры по порядку и выставляем количество кадров в секунду по вкусу, мне нравится 6:

b789767588044e56afa9cc2cd42550d3.png

Повторяем для ходьбы и на выходе имеем 2 flipbook’а:

a643b9e56f8b4c9c87bb6365634eb5ab.png

Теперь добавим на сцену нашу платформу, важно что в ее положении по компонента Y была равна 0. Далее добавим управление (в заготовке оно уже включено, но переназначим, как нам будет удобно): Edit → Project Setting → Input.

1ade0964147345fb9d19ba4f96e78c21.png

Переходим непосредственно к созданию персонажа. В папке «Blueprints» создаем новый BP, нас спросят, какой класс принта, выбираем «Character», даем имя, открываем и направляемся в раздел «Components». Добавляет к капсуле Flipbook, в качестве источника выбираем заготовленную Idle анимацию, так же добавляем SpringArm и к ней цепляем камеру, в принципе можно обойтись и без руки, но лучше с ней. Настраиваем размеры спрайтов и капсулы по вкусу, но капсулу лучше делать немного поменьше, что бы спрайт не парил над землей. У камеры убираем зависимость от контроллера и выставляем ортографический тип, глубину — по вкусу.

72d769114222486fa1207de1caa16a02.png

Компилируем, сохраняем. В настройках мира можно создать свой GameMode, либо поменять в уже существующем «Default Pawn Class» на только что созданного нами персонажа.

36d348421b454d399704b57429922370.png

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

5f9157f5161a4b4cb39a276226d07501.png

Пора научить его передвигаться, для этого вновь открываем BP персонажа и переходим в раздел графа. Стоит отметить, что Blueprints — очень мощный инструмент, с его помощью можно обойтись в проекте без классического написания кода, но на деле это то же самое программирование, просто, собственно, писать надо будет разве что несколько имен, да значений. Итак, прежде всего надо добавить движение по вектору при событии MoveRight:

188c0dd1fb654293938a6d020aa53ccf.png

Тут происходит следующее: при воздействии на ось (у нас может быть два воздействия ± 1) происходит передвижение объекта по оси X на заданное воздействие. В принципе этого достаточно для передвижения, можно пробовать — компилируем, сохраняем, тестируем. Персонаж смещается вдоль оси, но без анимации, ведь мы не предусмотрели ее переключение.

Для переключения между анимациями нам необходимо заменить, собственно анимацию в flipbook нашего персонажа. Сделать это можно несколькими способами, но я предпочитаю наиболее универсальный и, как мне кажется, изящный. Создадим на графе Свое событие, назовем соответственно цели — «Update animation».

e1bdc5f7eb1541789ca558a447336627.png

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

dacf741c50244a0281f66aa1e7451bd6.png

Появилось новое событие — «Event Tick», оно происходит каждый кадр, соответственно каждый кадр у нас теперь происходит проверка необходимости смены анимации. Если сейчас запустить игру, то персонаж будет двигаться с анимацией бега, но всегда будет смотреть в одну сторону, исправим это:

5cd306fcb5f74c7b988c82f2d3c29c13.png

Итоговый результат:

[embedded content]

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

© Habrahabr.ru