Анимация в 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, отрисовать сетку и привязать кости, так как делали с основными спрайтами, чтобы при той же анимации, все отображалось корректно. Чтобы добавить спрайт, просто перетаскиваем драг’н’дропом в соответствующий раздел.
![ 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 • • ►](http://img1.joyreactor.cc/pics/post/full/%D0%A8%D0%BA%D0%BE%D0%BB%D0%B0-%D0%90%D1%80%D1%82-%D0%BA%D0%BB%D1%83%D0%B1%D0%B0-%D0%90%D1%80%D1%82-%D0%BA%D0%BB%D1%83%D0%B1-%D0%B4%D0%BB%D0%B8%D0%BD%D0%BD%D0%BE%D0%BF%D0%BE%D1%81%D1%82-DragonBone-5312241.png "Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone")
4. В Dragon Bones имеются кривые, которые слегка изменяют пропорции воспроизведения анимации, задержки и акценты на каких то ключевых кадрах. На словах сложно объяснить как они работают, но очень наглядно сразу становится понятно какой это волшебный инструмент. ВАЖНО: На каждый ключевой кадр можно повесить свою кривую, и он будет действовать до следующего правила по искривлению.
![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 ♦ ♦](http://img0.joyreactor.cc/pics/post/full/%D0%A8%D0%BA%D0%BE%D0%BB%D0%B0-%D0%90%D1%80%D1%82-%D0%BA%D0%BB%D1%83%D0%B1%D0%B0-%D0%90%D1%80%D1%82-%D0%BA%D0%BB%D1%83%D0%B1-%D0%B4%D0%BB%D0%B8%D0%BD%D0%BD%D0%BE%D0%BF%D0%BE%D1%81%D1%82-DragonBone-5312242.png "Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone")
Что мы получили в итоге?
Получилась несложная анимации в двух цветах.
Полученный результат мы можем выгрузить в различных форматах, которые скушает любой игровой движок.
Скопипизженно с HABR
![ Чу ПК * « )) * • V )] * • У * 3
Я * КП • - ф,NASA,Марс,марсоход,Mars 2020,perseverance](http://img0.joyreactor.cc/pics/post/full/NASA-%D0%9C%D0%B0%D1%80%D1%81-%D0%BC%D0%B0%D1%80%D1%81%D0%BE%D1%85%D0%BE%D0%B4-Mars-2020-5687664.jpeg "NASA,Марс,марсоход,Mars 2020,perseverance")
Отличный комментарий!