Анимация в DragonBone для художников

Чтож, вчерашний пост со ссылками на туториал тоже пропал, хоть и не содержал авторского контента. Невероятно, но факт)) Занятные приключения копипасты на UGC-сайте продолжаются.
Возьмем тутор у доброго человека HARDSLIME и понаблюдаем исчезнет ли пост)
_________________________________________________________________________________

В этой статье рассмотрим процесс разработки типичного персонажа нашей дебютной игры. Я продемонстрирую свою привычную структуру работы, однако, заострю внимание на создании анимации в Dragon Bones, приложу пояснения и самописные видео-туториалы.



Итак, начнем.

Текущая задача: Редизайн морально устаревшей модели стандартного летающего монстра полугодовой давности. Летучая мышь не успела за нашим скилом и стала не актуальной в рамках выбранного нами графического стиля. 


Модель которую будем переделывать

Как минимум, задача у нас изначально слегка упрощена: не нужно искать концепцию для персонажа, но, тем не менее, работа будет производиться практически с нулевой точки.

Этап 1: Работа с референсами
Среди людей, производящих графический контент, ничего не берется на пустом месте. Никогда не верил тем людям, которые сидя на стуле кричат: “О вдохновение!”, и начинают малевать шедевры. 

И этому есть самые простые объяснения: “Черт возьми, моя мышь такая дурацкая, потому что я даже не знаю как выглядят летучие мыши! Без референсов я нарисовал просто шарик с крыльями!”.

Итак, открываем гугл и начинаем “вдохновляться” настоящими летучими мышами, строением их туловища и мордочками. Разберем строение на примере:



Определяюсь с общими формами и пропорциями. Начинаю подмечать особенности строения и крепления крыльев. Крылья представляют из себя каркас с натянутыми перепонками. Имеются маленькие ножки и большие уши. И если с туловищем все понятно (хотя в предыдущей версии я умудрился нарисовать крылья вверх ногами), то с мордой у летучих мышей все куда сложнее, и зачастую выглядят они ну… не очень.

,Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone


Этап 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. Ключевые кадры создаются автоматически, если вы сделали какое то действие с костью. (При условии что нажат соответствующий флажок) 

Timeline X,Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone


2. С одной из последних версий в Dragon bones появились отдельные таймлайны для таких переменных как Move, Rotate и Scale. Чтобы принудительно поставить ключевую точку по одной из них, следует нажать на флажок.

4* 144.01 -40.44 F И 1.00 1.00 С -160.83 F !■,Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone


3. Для того, чтобы изменять скины для персонажа, нужно добавлять спрайты в соответствующие подпапки (displays). Предварительно их нужно превратить в mesh, отрисовать сетку и привязать кости, так как делали с основными спрайтами, чтобы при той же анимации, все отображалось корректно. Чтобы добавить спрайт, просто перетаскиваем драг’н’дропом в соответствующий раздел.



4. В Dragon Bones имеются кривые, которые слегка изменяют пропорции воспроизведения анимации, задержки и акценты на каких то ключевых кадрах. На словах сложно объяснить как они работают, но очень наглядно сразу становится понятно какой это волшебный инструмент. ВАЖНО: На каждый ключевой кадр можно повесить свою кривую, и он будет действовать до следующего правила по искривлению.



Что мы получили в итоге?

Получилась несложная анимации в двух цветах.





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