Анимация в DragonBone для художников
Чтож, вчерашний пост со ссылками на туториал тоже пропал, хоть и не содержал авторского контента. Невероятно, но факт)) Занятные приключения копипасты на UGC-сайте продолжаются.
Возьмем тутор у доброго человека HARDSLIME и понаблюдаем исчезнет ли пост)
_________________________________________________________________________________
В этой статье рассмотрим процесс разработки типичного персонажа нашей дебютной игры. Я продемонстрирую свою привычную структуру работы, однако, заострю внимание на создании анимации в Dragon Bones, приложу пояснения и самописные видео-туториалы.
Итак, начнем.Текущая задача: Редизайн морально устаревшей модели стандартного летающего монстра полугодовой давности. Летучая мышь не успела за нашим скилом и стала не актуальной в рамках выбранного нами графического стиля. Модель которую будем переделыватьКак минимум, задача у нас изначально слегка упрощена: не нужно искать концепцию для персонажа, но, тем не менее, работа будет производиться практически с нулевой точки. Этап 1: Работа с референсамиСреди людей, производящих графический контент, ничего не берется на пустом месте. Никогда не верил тем людям, которые сидя на стуле кричат: “О вдохновение!”, и начинают малевать шедевры. И этому есть самые простые объяснения: “Черт возьми, моя мышь такая дурацкая, потому что я даже не знаю как выглядят летучие мыши! Без референсов я нарисовал просто шарик с крыльями!”.Итак, открываем гугл и начинаем “вдохновляться” настоящими летучими мышами, строением их туловища и мордочками. Разберем строение на примере:Определяюсь с общими формами и пропорциями. Начинаю подмечать особенности строения и крепления крыльев. Крылья представляют из себя каркас с натянутыми перепонками. Имеются маленькие ножки и большие уши. И если с туловищем все понятно (хотя в предыдущей версии я умудрился нарисовать крылья вверх ногами), то с мордой у летучих мышей все куда сложнее, и зачастую выглядят они ну… не очень.
Этап 2: НаброскиПосле того как определили правильную анатомию, можно приступить к визуализации. Попробовал использовать разные формы туловища, придав им слегка более гротескный вид, на подобие летающих чертей или крупных зверей. В итоге, пришел к выводу использовать изначальный план с маленьким туловищем, лапками сзади и большими крыльями.Несколько рабочих вариантовКраткая выдержка из процессаЭтап 2: Отрисовка/ВекторизацияПосле набросков и утверждения финального результата, я перехожу в Adobe Illustrator. Изображения отрисовываются в векторе — это позволяет всегда легко задать нужный размер без потери качества. Стоит отметить, что в результате я выгружаю растровое изображение в формате .png. В качестве дополнительных материалов для разных игровых уровней, летучая мышь будет иметь две цветовых схемы для разных уровней.Этап 3. АнимацияАнимировать будем в Dragon Bones. Это бесплатный китайский аналог Spine, предоставляющий понятный интерфейс и возможности скелетной и mesh-анимации. Dragon bones распространяется бесплатно и его можно скачать с оф. сайта.
К сожалению сейчас комьюнити у данного ПО не слишком широкое, и даже на английском языке туториалов не много, в основном вся информация на китайском.
Первый шаг, который стоит сделать — разрезать модель таким образом, чтобы каждая подвижная деталь, была отдельно. Сохраняем картинки в формате .png и без фона.После этого загружаем готовые .png в DragonBones, собираем согласно задумке. Необходимо также задать некоторые параметры. Draw order — это отображение по слоям, работающее по принципу слоев в фотошопе. Чем выше объект стоит в иерархии, тем выше он находится над другими слоями.(прим. первый в иерархии — самый дальний)
Сборка персонажаКраткая выписка происходящего на видео вышеДалее нужно преобразовать объекты в mesh, чтобы появилась возможность изменять их форму так, как нам нужно. Для этого выделяем объект на сцене, слева ставим галочку напротив mesh, после этого нажимаем Edit mesh и начинаем отрисовывать сетку таким образом, чтобы изображения нигде не искажалось и не обрезалось. Особое внимание уделяем ребрам жесткости, таким как кости в крыле, которые будут сгибаться.UPD. Для лучшей оптимизации в игровых движках, рекомендуется делать минимум полигонов в модели. В рамках игры и летучей мыши, количество полигонов не сильно влияет на производительность, поэтому могу позволить большеЭту операцию мы проделываем со всеми частями, которые будут морфиться. В основном это крылья и голова. Для тела будет достаточной одной только галочки mesh, сетка не требуется, так как объект будет статичен.Когда все готово, можно прокладывать кости. Для этого используем инструмент кость (bone) в правом верху экрана. На экране всегда присутствует изначальная точка — root. Это базовая кость, к которой по умолчанию привязана вся композиция, она является первой родительской костью. Привязки к родительским костям показаны стрелочками.Сетка костейРасшифровка родительских костейПроложив кости, нужно привязать их к мешу, для этого нажимаем кнопку Add bones to bind, выделяем все кости которые принадлежат к спрайту и жмем правой кнопкой мыши, либо по пустой части экрана, либо на Auto Generate Weight. Кости автоматически привяжутся к спрайту, им задастся значение Weight. Величина Weight или в народе “веса” отвечает, как кость влияет на спрайт. Это важно в случаях, когда к одному спрайту одновременно привязано несколько костей. Регулировка происходит при помощи ползунков, определяющих “зону ответственности” каждой кости. Эту операцию проводим со всеми костями и спрайтами, корректируем величину weight при некорректном сгибе спрайта. Когда все кости привязаны, и отрегулированы, можно приступать непосредственно к анимированию объекта. Для этого я записал небольшое видео.
Построение ключевых кадров на примере крыла
Такая система меш анимирования подходит для всех подвижных частей нашей летучей мыши. Я доделываю тоже самое для второго крыла, слегка добавляю амплитуды для ушей и туловища.TIPS: Некоторые моменты, которые могут прояснить работу, и то что я показал:1. Ключевые кадры создаются автоматически, если вы сделали какое то действие с костью. (При условии что нажат соответствующий флажок) 2. С одной из последних версий в Dragon bones появились отдельные таймлайны для таких переменных как Move, Rotate и Scale. Чтобы принудительно поставить ключевую точку по одной из них, следует нажать на флажок.3. Для того, чтобы изменять скины для персонажа, нужно добавлять спрайты в соответствующие подпапки (displays). Предварительно их нужно превратить в mesh, отрисовать сетку и привязать кости, так как делали с основными спрайтами, чтобы при той же анимации, все отображалось корректно. Чтобы добавить спрайт, просто перетаскиваем драг’н’дропом в соответствующий раздел.4. В Dragon Bones имеются кривые, которые слегка изменяют пропорции воспроизведения анимации, задержки и акценты на каких то ключевых кадрах. На словах сложно объяснить как они работают, но очень наглядно сразу становится понятно какой это волшебный инструмент. ВАЖНО: На каждый ключевой кадр можно повесить свою кривую, и он будет действовать до следующего правила по искривлению.Что мы получили в итоге?Получилась несложная анимации в двух цветах.Полученный результат мы можем выгрузить в различных форматах, которые скушает любой игровой движок.
![
JL
□1 X
Draw Orde
Property
500
600
700
|8q0 , , , \8$9
1000
1100
1200
Scene X
y +.
fe- 0 W 61% ▼ Search Library
<ï> * bat
• • root
• • ► [0] bat_head1
• • [H] bat_wing2
'O0 bat_wing2
© 0 bat_wing2_red
• • [0] bat_wing1
• • ►](https://img2.joyreactor.cc/pics/post/full/Школа-Арт-клуба-Арт-клуб-фэндомы-5312241.png "Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone")
![ftl File Edit Window Help
i+ w R ^ r i: n & &
Curve Editor X
*new_bat X
^ jf Animation
o
— i
30 1Q0
CD J / J T S
% ^
r\V V
«* ja fe F* rj. m |
V animtionO « k ♦
▼ ¡>] bat_wing2 •
Cole
ll Dis index 0 bat_wing2 0 bat_wing2_red
I # T £ O @) EJ ©r
0 2 4 6 8 10 12 14^H6 20
♦ ♦](https://img2.joyreactor.cc/pics/post/full/Школа-Арт-клуба-Арт-клуб-фэндомы-5312242.png "Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone")
Отличный комментарий!