DragonBone

Подписчиков: 4     Сообщений: 1     Рейтинг постов: 9.9

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

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

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

_________________________________________________________________________________


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

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


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

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

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

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

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

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

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

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

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


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

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



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

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

Несколько рабочих вариантов

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

Краткая выдержка из процесса

Этап 2: Отрисовка/Векторизация
После набросков и утверждения финального результата, я перехожу в Adobe Illustrator. Изображения отрисовываются в векторе — это позволяет всегда легко задать нужный размер без потери качества. Стоит отметить, что в результате я выгружаю растровое изображение в формате .png. В качестве дополнительных материалов для разных игровых уровней, летучая мышь будет иметь две цветовых схемы для разных уровней.

1. Обвожу контура в иллюстраторе с эскиза, постепенно добавляя небольшие детали.

2. Подбираю цвет и крашу все детали, задаю им корректный draw order.
(прим. Draw order-это отображение объектов, по оси z)
3. Добавляю тени и мелкие детали, разбавляю плоские формы при помощи
градиентов

4.


Этап 3. Анимация
Анимировать будем в Dragon Bones. Это бесплатный китайский аналог Spine, предоставляющий понятный интерфейс и возможности скелетной и mesh-анимации. Dragon bones распространяется бесплатно и его можно скачать с оф. сайта.

К сожалению сейчас комьюнити у данного ПО не слишком широкое, и даже на английском языке туториалов не много, в основном вся информация на китайском.


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

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


После этого загружаем готовые .png в DragonBones, собираем согласно задумке. Необходимо также задать некоторые параметры. Draw order — это отображение по слоям, работающее по принципу слоев в фотошопе. Чем выше объект стоит в иерархии, тем выше он находится над другими слоями.(прим. первый в иерархии — самый дальний)



Сборка персонажа

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


Краткая выписка происходящего на видео выше

Далее нужно преобразовать объекты в mesh, чтобы появилась возможность изменять их форму так, как нам нужно. Для этого выделяем объект на сцене, слева ставим галочку напротив mesh, после этого нажимаем Edit mesh и начинаем отрисовывать сетку таким образом, чтобы изображения нигде не искажалось и не обрезалось. Особое внимание уделяем ребрам жесткости, таким как кости в крыле, которые будут сгибаться.

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

UPD. Для лучшей оптимизации в игровых движках, рекомендуется делать минимум полигонов в модели. В рамках игры и летучей мыши, количество полигонов не сильно влияет на производительность, поэтому могу позволить больше

Эту операцию мы проделываем со всеми частями, которые будут морфиться. В основном это крылья и голова. Для тела будет достаточной одной только галочки mesh, сетка не требуется, так как объект будет статичен.

Когда все готово, можно прокладывать кости. Для этого используем инструмент кость (bone) в правом верху экрана. На экране всегда присутствует изначальная точка — root. 
Это базовая кость, к которой по умолчанию привязана вся композиция, она является первой родительской костью. Привязки к родительским костям показаны стрелочками.

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


Сетка костей

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


Расшифровка родительских костей

Проложив кости, нужно привязать их к мешу, для этого нажимаем кнопку Add bones to bind, выделяем все кости которые принадлежат к спрайту и жмем правой кнопкой мыши, либо по пустой части экрана, либо на Auto Generate Weight. Кости автоматически привяжутся к спрайту, им задастся значение Weight. Величина Weight или в народе “веса” отвечает, как кость влияет на спрайт. Это важно в случаях, когда к одному спрайту одновременно привязано несколько костей. Регулировка происходит при помощи ползунков, определяющих “зону ответственности” каждой кости. 

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


Эту операцию проводим со всеми костями и спрайтами, корректируем величину weight при некорректном сгибе спрайта. Когда все кости привязаны, и отрегулированы, можно приступать непосредственно к анимированию объекта. Для этого я записал небольшое видео.

Построение ключевых кадров на примере крыла

Такая система меш анимирования подходит для всех подвижных частей нашей летучей мыши. Я доделываю тоже самое для второго крыла, слегка добавляю амплитуды для ушей и туловища.

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


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, отрисовать сетку и привязать кости, так как делали с основными спрайтами, чтобы при той же анимации, все отображалось корректно. Чтобы добавить спрайт, просто перетаскиваем драг’н’дропом в соответствующий раздел.

	
	
	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
• •	►


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
♦ ♦


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

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

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


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


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

Скопипизженно с HABR
Развернуть
В этом разделе мы собираем самые смешные приколы (комиксы и картинки) по теме DragonBone (+1 картинка, рейтинг 9.9 - DragonBone)