непризнанный школой владыка демонов +18

Анимация в 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 при некорректном сгибе спрайта. Когда все кости привязаны, и отрегулированы, можно приступать непосредственно к анимированию объекта. Для этого я записал небольшое видео.

Урок первый. Основы перспективы.

С началом Inktobera в Школу Арт-клуба за получением фидбэка полилось много работ. Я старался дать фидбэк, но это очень сложно сделать по причине того что практически у каждого отсутствует основная база - перспектива, геометрические фигуры и их построение. При этом каждый из участников пытается рисовать сложные фигуры, например, человека. В общем этот пост будет для тех кто желает именно учиться рисовать, остальные же могут смело плюнуть и вернуться к анимешным гайдам "Как рисовать голову" и "Рисуем динамическую фигуру без навыков"
Я прекрасно осознаю что рисовать кубики это скучно и куда как менее интересно, нежели сразу учиться рисовать сиськи (благо гайдов миллионы), но без кубиков не получиться ничего хорошего и рано или поздно придется к ним вернуться.

Давайте начинать с основ, а именно с перспективы, затем перейдем к геометрическим формам, после которых будет домашнее задание)

__________________________________________________________________________________________


Линейная перспектива - точная наука, которая учит нас изображать на плоскости предметы видимого мира в соответствии с кажущимся изменением их величины, очертаний и четкости, обусловленных степенью отдаленности от точки наблюдения. 

    "Перспектива" (от латинского "perspicere") в переводе означает "смотреть сквозь, правильно видеть". Чтобы понять значение этого термина, попробуем рассмотреть с определенной точки зрения закономерности перспективного изменения формы одного или группы предметов, видимых через прозрачное стекло, поставленное на некотором расстоянии. Здесь линии очертаний видимых объектов точно проецируются на плоскость стекла. Для наглядности проекцию их очертаний можно обвести жировым карандашом, тушью или другими изобразительными средствами, которые дадут правильное перспективное изображение на плоскости стекла. Подобным методом довольно часто пользовались художники и архитекторы Ренессанса. Такой опыт можно проделать через оконное стекло, для чего предварительно выбрать какой-либо объект. 

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

 
Рис. 5

    Архитектор Филиппа Брунеллески первым нашел способ оптико-геометрических построений, производя сечение зрительной пирамиды Евклида картинной плоскостью и получая тем самым перспективное изображение предметов. Огромный вклад в область перспективы внесли художники эпохи Возрождения. Так, например, Альбрехт Дюрер применил геометрию объемных тел и теорию линейной перспективы для построения фигуры человека в пространстве с учетом сложных ракурсов и движений. Леонардо да Винчи был блестящим теоретиком в области перспективы и участвовал в разработке учения о пропорциях и перспективного пространства. Великий педагог, воспитатель и учитель академического рисунка П.Чистяков писал, что умение рисовать и писать, тонко знать перспективу необходимо при любом таланте: "Все существующее в природе и имеющее какую-либо форму подлежит законам перспективы. Умея применять законы перспективы, вы можете нарисовать все неподвижное в натуре верно". Серьезное внимание уделял целенаправленным поискам в области закономерностей видения натуры на основе перспективы А.Г.Венецианов и многие другие русские художники, архитекторы и искусствоведы. 

    Открытие точных законов перспективы позволило художникам и архитекторам более правдиво изображать на плоскости формы видимого мира. Студентам очень важно знать эти законы, хотя теоретическое знание еще не означает умения рисовать с натуры, так же как и знание анатомии не научит рисовать фигуру человека. Не исключено, что студент, который обладает хорошим глазомером, но не знает законов перспективы и анатомии, справится с натурой лучше, чем тот, кто обладает этими знаниями, но не имеет хорошего глазомера. Разумеется, лучше, если студент будет обладать и хорошим глазомером, и знаниями. Здесь уместны слова П.Чистякова: "Сила художника в знании. Творчество без знания - тля." 

 
Рис. 6

    Теоретические знания о перспективе необходимы как художникам, так и архитекторам при работе непосредственно с натурой для ясного представления изображаемых ими предметов на плоскости, чтобы предметы воспринимались глазами зрителя правдиво и убедительно (рис. 5-8). Очень важно, чтобы студенты осваивали не только теорию перспективы, но и приемы построения, а также ясно представляли себе положение предметов в пространстве и их проекцию на плоскости (картинная плоскость). 

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

 
Рис. 7

    Незнание законов перспективы в работе над рисунком с натуры и без нее, как правило, приводит к явным и порой невероятно нелогичным нарушениям в рисунке. На рис.9, слева, геометрические тела изображены неправильно, в так называемой обратной перспективе, а также в чрезмерном перспективном искажении. Чтобы избежать подобных нарушений, попробуем разобраться, как мы воспринимаем предметы в пространстве. Речь пойдет о элементах наблюдательной перспективы. Рассмотрим основные правила этого зрительного явления. 

    Все наблюдаемые предметы и явления мира в силу особенности восприятия человеческого глаза предстают перед нами в измененном виде. 

 
Рис. 8

    Проиллюстрируем сказанное примером. Держа книгу в вытянутой руке в фронтальном положении, заметим, что размер книги не меняется. Однако стоит ее наклонить в горизонтальном направлении, как мы отмечаем разницу в видимых размерах: дальняя часть книги по отношению к ближней кажется меньше. Если книгу положить на стол и наблюдать ее с различной высоты, мы заметим разницу в ее кажущихся очертаниях: прямые углы книги будут казаться искаженными, т.е. два угла - тупыми и два - острыми. По мере увеличения высоты наблюдения видимая площадь книги будет как бы больше. Если приблизить точку зрения к плоскости стола, книга покажется более длинной, а ее толщина приблизится к истинной величине (т.е. видимой остается только толщина предмета). 

    Любые предметы, независимо от формы, при подобном рассмотрении будут казаться измененными. Наиболее наглядно это можно наблюдать на примере железной дороги со столбами, стоящими вдоль нее (рис.10). 

Рис. 9	Рис. 10

Железная дорога, по мере ее удаления, воспринимается нами в сокращенном виде, на линии горизонта сходится в точку или совсем исчезает. Так же и столбы, удаляясь, выглядят все меньше и меньше, постепенно исчезая из поля зрения. При этом мы знаем, что в действительности перед нами параллельные линии, которые никогда не сходятся. Аналогичному кажущемуся сокращению и изменению подлежит все, что мы видим в окружающем нас мире: предметы, вещи и явления. Если рассмотреть длинную доску, то по всей ее длине мы обнаружим кажущееся сокращение, причем сокращение формы доски видится по всему размеру сечения. Обратите внимание на столы, мебель, стулья. Все они подчинены одному закону, который называется перспективным сокращением форм в пространстве. 

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

 
Рис. 11

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

    Рассматривая теорию линейной перспективы, мы ознакомимся с такими понятиями и терминами, как линия горизонта, линия схода, точка схода, картинная плоскость. На рис 11 наглядно показаны приемы и правила изображения простых геометрических форм на плоскости в линейной перспективе. 

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

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

    Необходимо отметить одно важное правило: горизонтальные параллельные линии на картинной плоскости имеют одну точку схода на линии горизонта. При наблюдении вид предмета в значительной степени зависит от выбора точки зрения (слева, справа, сверху, снизу). Следовательно, значительную роль при наблюдении играет высота точки зрения - горизонт. Представим такую картину: море или степь, где горизонты четко разграничиваются, хотя это кажущаяся разграничительная линия моря и неба, земли и неба. 

 
Рис. 12

    Горизонт легко определить при помощи воды, налитой в любой прозрачный сосуд. Здесь горизонтальная поверхность воды находится на уровне глаза и указывает высоту горизонта относительно окружающих предметов и явлений. Или, не менее удивительно и то, что линия горизонта все время находится на уровне глаза, в каком бы положении мы не оказались. Стоит нам сесть, встать, лечь, подняться на вершину, спуститься вниз и т.д. - всюду мы видим горизонт. Это значит, что горизонт меняет свое положение в зависимости от положения смотрящего. Словом, где глаза, там и горизонт. 

    Перспективный горизонт - это воображаемая горизонтальная линия, которую принято называть линией горизонта. Она играет основную роль в перспективном построении изображения. Чтобы получить правильное перспективное изображение формы предмета, рисовальщик должен установить линию горизонта и на ней определить точки схода. 

 
Рис. 13

    Перед нами изображаемый предмет - куб. Там, где намечена линия горизонта, определена точка схода. Осталось только направить к ней все линии сторон куба (см.рис.11). 

    Наблюдая за кубом, стоящим ребром к зрителю, отмечаем, что все его стороны находятся в перспективном сокращении по отношению к рисующему. Заметим, что на линии горизонта лежат две точки схода. Одни стороны сходятся к правой точке схода, другие - к левой. Как видим, второе перспективное изображение, в отличие от первого, имеет две точки схода. Перспективные изменения сторон и местоположение точек схода в рисунке определяется на глаз. Точность определения зависит от степени развития глазомера рисующего. 

 
Рис. 14

    Успех в работе над рисунком во многом зависит от знания правил перспективы и умения применять их на практике. Это позволит студентам в дальнейшем изображать любой предмет с натуры убедительно и верно. 

    На рис.12 изображен в перспективе обычный одноэтажный, видимый с угла, дом на уровне человеческого роста. При этом линия горизонта пересекает стены дома на уровне глаза рисующего, так что горизонтальные линии одной стены уходят к одной точке схода, а линии другой стены ~ к другой. Чтобы найти перспективную середину стены, нам необходимо пересечь ее плоскость диагоналями. Получим точку пересечения, через нее проведем вертикальную линию - ось стены, которая делит стену пополам. Обратим внимание (рис.13) на дом, который стоит на небольшом возвышении (т.е. когда рисующий смотрит на дом снизу). Следующий дом (рис.14) просматривается рисующим с возвышения, возможно, с высоты многоэтажного дома, горы и тому подобное. 

На рис.15 изображен интерьер в перспективе. Сидя прямо, несколько сместившись от середины помещения, смотря на одну из его стен, мы видим, что все уходящие от нас параллельные линии стен, потолка, пола, сходятся в одной точке схода на горизонте. 

 
Рис. 15

    На другом рисунке интерьера (рис.16) видны только две стены, у которых свои точки схода на горизонте. Это бывает в том случае, когда рисующий смотрит, сидя лицом к углу помещения. 

 
Рис. 16

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

    Возможности человеческого глаза ясно видеть предметы ограничены в пределах угла 30°-35°. Сложность рисования интерьеров заключается в необходимости вводить коррективы в перспективное построение в соответствии со зрительным восприятием изображаемого помещения. Иногда при изображении интерьера или экстерьера можно применять два горизонта, следовательно, несколько точек схода. Это целесообразно в том случае, когда при обычном горизонте фронтальная стена кажется недостаточно масштабной, а необходимо показать ее более значимой. Если изображается экстерьер с широким охватом пространства архитектурного ансамбля, то и в этом случае возможно применение нескольких точек схода. Это связано с в необходимостью избежать стремительного перспективного сокращения изображаемых объектов при одной точке схода. Линия горизонта при изображении интерьера в перспективе для большей естественности рисунка должна быть: для низких помещений на уровне глаз сидящего рисовальщика, для высоких - на уровне глаз стоящего человека. 

 
Рис. 17

    На рис.17 показан карандаш в перспективном изображении с точками схода. Намечены две линии горизонта. По существу, линия горизонта одна. Карандаш находится в вертикальном и наклонном положениях. Когда смотрим на карандаш с верхней линии горизонта, параллельные линии, исходящие от основания и от кончика графитного стержня, идут к одной точке схода. Так же независимо от уровня линии горизонта и положения карандаша в пространстве мы видим, что все параллельные линии сходятся к одной точке схода. 

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

Рис.18. Перспективное построение группы предметов. Каждый предмет имеет свою точку схода на линии горизонта

    Горизонтальные ребра предмета мы будем воспринимать идущими сверху вниз или снизу вверх, в зависимости от их ракурса к линии горизонта. В этом случае пользуются давно распространенным механическим приемом определения углов наклона предмета. Необходимо, держа карандаш в вытянутой руке строго в горизонтальном положении и перпендикулярно к лучу зрения, подвести его к нижней точке угла предмета. При этом мы увидим углы наклона горизонтальных ребер предмета. Их степень наклона легко определяется на глаз посредством описанного приема (рис.18). В соответствии со степенью наклона горизонтальных ребер следует построить эти углы на рисунке, проведя на месте карандаша горизонтальные прямые.

Рис.19. Упражнение по развитию объемно-пространственных представлений и навыков перспективного изображения предметов на плоскости