Анимация в 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 имеются кривые, которые слегка изменяют пропорции воспроизведения анимации, задержки и акценты на каких то ключевых кадрах. На словах сложно объяснить как они работают, но очень наглядно сразу становится понятно какой это волшебный инструмент. ВАЖНО: На каждый ключевой кадр можно повесить свою кривую, и он будет действовать до следующего правила по искривлению.
Что мы получили в итоге?
Получилась несложная анимации в двух цветах.
Полученный результат мы можем выгрузить в различных форматах, которые скушает любой игровой движок.
Подробнее
с WiflOtf kajAH
1. Обвожу контура в иллюстраторе с эскиза, постепенно добавляя небольшие детали. 2. Подбираю цвет и крашу все детали, задаю им корректный draw order. (прим. Draw order-это отображение объектов, по оси z) 3. Добавляю тени и мелкие детали, разбавляю плоские формы при помощи градиентов 4. Вторая вариация летучей мыши для разных игровых ситуаций
a File Edit Window Help lïSR ♦> r* K IS 15 Eá Property X tí Name: bat_wing2 Type: Slot Color: r BlendMode: Normal ▼ Alpha: • 100 % ^ Display: bat_wing2 ▼ ^ Accpt Prnnprtv nOOCl nupciiy Name: bat_wing2 Asset: bat_wing2 Replace Ima jp 0 M'sh Edit Mesh Reset Bones with weight Add Bone to Bind Auto Generate Weight *new_bat X ■ , _J20Q I100, , o ^ Armature Jf- 0 o o o 1 o 0 2 0 0 □1 X r Library X •+ O Search Library ^ bat ► M library/ R. wi 9.B Edit Mesh 0 Deform * F G? G? P E? Density 1 i Vertices:143 m a
s File Edit Window Help 1+ Ä H r It It 15 12 Property X relcome new_bat X Name: Ä Armature Animation Color: BlendMode: Normal Display: Asset Property Name: Asset: Replace Image 0 Mesh Edit Mesh Reset Bones with weight ■ bone8 Ö bone13 bone14 bone11 ■ bone9 bone12 bonelO Auto Generate Weight A m Æ 250 300 350 450 500 , , I550 i t |600 , , , |650 , , , [700 , , , ^ ¡750 bat_wing2 Ф 407.93 -254.06 ^ И 1.00 1.00 f c O.oo f 1Ш 756.00 Ü 445.00
Timeline X
4* 144.01 -40.44 F И 1.00 1.00 С -160.83 F !■
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 • • ► [0] batjors • • ► [0] bat_head2 • • / bone • • / bone15 • • / bone8 • • / bonel R a
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 ♦ ♦ 28 30 32 34 36 38 □1 X DrawOrde Property Scene X [700, <, [sop, , , [899, , [1000, , , 111,00 , , |iqqq ^ +, © 0 /+ M 61% ▼ Search Library Q «*> * bat • • ▼ -i- root • • ► [H] bat_head1 • • w K bat_wing2 © 0 bat_wing2 0 0 bat_wing2_red • • ► [H] bat_wing1 • • ► [H] batjors • • ► [H] bat_head2 • • ▼ / bone • • ► Z' bone15 • • > / bone8 • • > / bonel re .a, r r_ 'O' C 0 S E NN ◄ ® H M lil Speed: • x1 Time: 0.00 s FPS: 24 Animation X + @ b k a 40 4 \2 44 1 16 48 ! 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 Search Library Q V animtionO V newAnimation A V newAnimation_1 _ v newAnimation_2 Total Time: 0.63s Blend Time: 0 ▼ fTTTl — • + Play Times: 0 o m
Dragon bones - building object,Gaming,,This video is illustration to my tutorial text. This is NOT a standalone tutorial because of missing comments. Full post here. ATTENTION: Russian language only. https://habr.com/ru/post/350254/
Dragon Bones - Bat animation process,Gaming,,This video is illustration to my tutorial text. This is NOT a standalone tutorial because of missing comments. Full post here. ATTENTION: Russian language only. https://habr.com/ru/post/350254/
Школа Арт-клуба,школа артклуба, школа арт-клуба,,Арт-клуб,арт-клуб, артклуб,,фэндомы,длиннопост,DragonBone
А второе?)
после появления DMCA если копираст пишет абузу, надо удалять. иначе хостер удалит тебя
автору не понравилось, что его достижения "присвоили". Не знаю, кто виноват, кто прав, но копираст имеет преимущество в этом вопросе.
Ну а бухтеть на администрацию это старинный обычай же, уж не обессудь.
Видео было еёное, может еще что
Свободно распространяется видео.
Так же в посте было 2 ссылки на Телеграф и мой текст.
Вопрос остается открытым - почему пост был удален по обращению левой личности?
можно, конечно, слать автора нахер, а потом пытаться бодаться вплоть до судов - но зачем и кому это надо?
автор имеет преимущество в вопросах распространения своего контента
http://webcache.googleusercontent.com/search?q=cache:KZMPRI_B9CQJ:joyreactor.cc/post/3994733+&cd=1&hl=ru&ct=clnk&gl=ru
Явным образом указано - "Автор статьи: Виктория Ершова".
Если контент выложен правообладателем в свободный доступ, то правообладатель подразумевает этим в каком то плане свободу дистрибуции данного объекта авторского права.
если автор против распространения своего контента таким способом - мы не будем биться с автором.
Блять, червонец- это "замудренная регистрация.
Охуеть. Червонец в наше время, оказывается, "замудренная регистрация".
Что за хуйня? Сказала бы просто, что червонец зажала, а то ноет про "замудренную регистрацию"
Плюс DragoneBones и Spine это инструменты только для анимации 2D и в них все для этого сделано, а Blender это много целевой инструмент не только для анимации, есть разница :)