Анимация в DragonBone для художников часть 1

Автор статьи: Виктория Ершова
Оригинал статьи: https://vk.com/@art_aures-animaciya-v-dragonbone-dlya-hudozh...


Когда-то меня очень вдохновили работы, которые можно создать в этой программе и возможность импорта в игры была для меня интересной перспективой развития. Всегда ведь хорошо иметь «запасной аэродром» и дополнительный пункт в портфолио на случай если основная работа по какой-то причине накроется медным тазом :D


Прежде чем вы продолжите читать, я уточню — у художников для анимации есть множество других замечательных программ (Adobe Flash/Animate, Anime Studio Pro 11 и другие), но я использовала именно DragonBone только ради саморазвития. И я хочу рассказать именно о своём методе создания анимации без профессиональных терминов. Он очень упрощён в сравнении с более стандартным использованием программы — созданием 2D анимации к играм.


Принцип создания скелетной анимации в любой программе примерно одинаков — есть слои с текстурами, полигональные сетки, вес, кости и автоматический расчёт искажения при движении из точки А в точку Б. Умея анимировать 2D в любой программе, вы быстро освоитесь в других. Даже изучить 3D анимацию будет в разы легче. Так что эти навыки и знания никогда не будут лишними!

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

ОБЗОР ПРОГРАММ

Для создания 2D анимации с импортом в игры профессионалы используют в основном Spine. Она профессиональная, к ней постоянно выходят обновления, есть огромное количество возможностей и многие процессы автоматизированы. Но есть один маааленький минус — цена. И я её даже вслух произносить боюсь.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

На нынешний курс июня 2019 года это почти 20 000 рублей. Замечательно, правда? :3

Если думаете, что её можно спиратить — спешу вас огорчить. PRO версии (а смысл имеет только она) в свободном доступе сейчас НЕТ СОВСЕМ. Есть только взломанные стандартные версии, но в них отсутствует поддержка меша. А без меша смысла в программе — 0.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

Прозорливые китайцы создали почти аналогичную, но бесплатную, версию Spine — DragonBone . Да, она довольно топорная, менее оптимизированная, требует больше ручного труда, но что вы хотели от бесплатной программы?) Зато в ней есть эта самая заветная возможность создавать псевдо-3D и у неё в названии есть слово дракон зная как работать в этой программе, вы без проблем сориентируетесь в Spine. Ведь у них скоммунизжен даже интерфейс.


Для дальнейшей работы и обучения нам понадобятся две программы — Adobe Photoshop СС 2017 года и DragonBone (на данный момент у меня версия 5.6.2). Для самого рисования я дополнительно использую SAI, но пользоваться им или нет это уже ваше личное дело.


ВОЗМОЖНОСТИ СКЕЛЕТНОЙ АНИМАЦИИ С МЕШЕМ

В отличии от покадровой анимации, в скелетной не требуется отрисовывать каждый отдельный кадр — компьютер сам производит расчёты.


Обычно при упоминании скелетной анимации на ум приходят не самые красивые и довольно «деревянные» примеры, но давайте я просто покажу вам пару видео и думаю вы измените своё мнение ;)

Абсолютно всё что вы видите это именно 2D, а не 3D. Мой уровень пока что действительно дилетантский в сравнении с примерами, но всё ещё впереди и я не стою на месте — к чему призываю и вас! ^^

Уточню на всякий случай — это примеры работы в Spine, а не DragonBone. Но рассматриваемая нами программа имеет аналогичный потенциал и возможности. Просто сделать анимацию такого уровня будет сложнее и займёт это больше времени.


КАК ПРАВИЛЬНО ПОДГОТОВИТЬ РИСУНОК

Как я видела из процессов других скелетных аниматоров — они зачастую вырезают и дорисовывают уже из готовых рисунков нужные элементы, но мне удобнее изначально сделать все слои по отдельности.


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

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

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

Если вы забыли прорисовать какой-то фрагмент персонажа и заметили это только на финальных этапах анимации— не расстраивайтесь. В месте, где сохранён файл анимации, есть папка «library». Вы можете спокойно взять оттуда .png файл и изменить его в любом графическом редакторе. Программу для анимации даже закрывать не обязательно — как только вы сохраните файл, он мгновенно изменится в DragonBone. Главное не меняйте название и размер.


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


ИМПОРТ РИСУНКА В DragonBone

Установка программы для анимации по идее не должна доставлять трудностей, особенно учитывая, что там есть какой-никакой, но русификатор. Единственное, что очень важно — вам нужно сразу зарегистрироваться в системе и создать аккаунт. Без этого вам не будет доступно сохранение работы

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео
Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео
Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео
Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

При создании нового «проекта» программа предложит вам «создать анимацию» или «создать анимированный комикс». Выбираем первый вариант. Вторым пунктом я практически никогда не пользовалась и рассказать про него не могу, подробнее о нём тут.


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


Для дальнейшей лёгкой работы к программе нужно установить маленький плагин. Его можно скачать прямо из самой программы. Называется это «Установка плагина экспорта PSD». Нажмите и просто следуйте инструкциям. По идее с этим не должно возникнуть проблем.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

После того, как вы закончили установку программы и рисовать все детали, важно правильно подготовить слои. Не должно быть никаких слоёв со свойствами, пустых слоёв, а лайн должен быть соединён с основным цветом. Учитывайте, что программа может начать подтормаживать, если слоёв больше 20 и они в высоком разрешении (>1500х1500px).


Программа понимает полупрозрачность. Так что смело экспериментируйте.


После того как вы сделали всё, можно сохранить файл в формат .psd и перетащить в рабочее поле DragonBone. У вас появится вот такое окно импорта PSD. Потом можете поэкспериментировать с галочками, а пока делаем как на картинке ;)

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

После нажатия на «Import» программа некоторое время подумает и самостоятельно нарежет всё по слоям. Иногда программу глючит и она равномерно раскидывает все слои по холсту. Но в итоге это должно выглядеть как-то так:

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

СОЗДАНИЕ МЕША

Меш (Mesh) — это полигональная сетка, благодаря которой текстуру можно искажать, использовать кости и получать всякие крутые эффекты псевдо-3D. Пока что немного непонятно, правда? Покажу как это выглядит в работе:

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

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

1) Выделить любой из фрагментов

2) В меню слева поставить галочку «Mesh» и нажать «Редактировать» ниже.

3) Появится режим редактирования меша.

4) Выбираем инструмент внизу «нарисовать новую границу сетки», ставим галочку «не показывать больше» и рисуем как на гифке ниже границу. После границы нажимает на «создать точку» и ставим точки в центре.

5) Делаем так со всеми фрагментами.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

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


Если вы не планируете создавать сложную анимацию, можете не использовать меш и оставить все изображения как есть, но только анимация будет «деревянной».


В программе есть автоматическое создание меша, но работает оно так себе. Лучше вручную или редактировать созданное автоматически.


СОХРАНЕНИЕ

Любой художник знает как важно часто сохранятся. Так вот предупрежу — эта программа любит периодически крашнуться прямо в середине работы :3 Так что не забываем про волшебное сочетание ctrl+S.


Чтобы иметь возможность сохраняться, нужно создать аккаунт прямо в программе. Иногда сервера программы не работают и придётся подождать. Временным решением проблемы может послужить отключение интернета и перезагрузка программы.


КОСТИ

Кости — это скелет вашей анимации, а Вы — это мышцы, которые этот скелет двигают. Кости созданы для того, чтобы вы вручную не двигали каждую точку мэша.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

Что нужно знать о костях:

1) Чтобы создать кость нужно нажать вот на этот инструмент справа вверху. При создании костей они сначала прикрепляются к кости Root, а потом к каждой последующей. Для прерывания цепочки, нужно нажать Esc.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

2) У костей есть иерархия. Самая «главная» кость это Root. Это основа, к которой крепится все картинки, меши и кости. От расположения костей в меню справа зависит то, как они влияют друг на друга. Располагающаяся выше (ближе к Root) кость влияет на те, что ниже. Если навестись на любую кость, появятся стрелочки, показывающие её связь с другими костями.

Иерархию можно изменить просто перетащив кость из меню иерархии (справа) к любой другой кости или к Root (если вы хотите чтобы она стала сильной и независимой). Редактирование доступно только в режиме «скелет». В режиме «анимация» перемещать кости нельзя.

Анимация в DragonBone для художников часть 1 Анимация, Статья, Туториал, Обучение, Самообразование, Длиннопост, Гифка, Видео

Т.к. в пикабу ограничение на размер, продолжение тут: https://vk.com/@art_aures-animaciya-v-dragonbone-dlya-hudozh...