Разработка анимации в Dragon Bones. Методические указания

1.

РАЗРАБОТКА АНИМАЦИИ В DRAGON BONES

2.

Dragon Bones – является бесплатным аналогом Spine,
унаследовавшая частично интерфейс и главную функцию
Spine возможность создавать псевдо-3D, редактировать меши
АНИМАЦИЯ
Бесплатное и простое решения для
разработки дизайна анимации
АНИМИРОВАННЫЕ
ИЛЛЮСТРАЦИИ
Оригинальный интерактивный
динамический режим редактора
комиксов. Легко достичь богатых
спецэффектов с нулевой базой знаний
анимации.
МУЛЬТИПЛАТФОРМА
Поддержка вывода нескольких
форматов, таких как видео, вебстраница, анимация. Поддержка
игровых движков и языков
программирования. Предоставление
различных библиотек для работы с
другими платформами

3.

ВОЗМОЖНОСТИ СКЕЛЕТНОЙ АНИМАЦИИ С МЕШЕМ
В отличии от покадровой анимации, в скелетной не требуется отрисовывать
каждый отдельный кадр — компьютер сам производит расчёты.

4.

КАК ПРАВИЛЬНО ПОДГОТОВИТЬ РИСУНОК
Зачастую вырезают и дорисовывают уже из готовых рисунков нужные элементы,
но удобнее изначально сделать все слои по отдельности и отредактировать или
нарисовать иллюстрацию с нуля. Если кратко, то вы должны нарисовать как
можно больше элементов по отдельности друг от друга. То есть на разных слоях.

5.

КАК ПРАВИЛЬНО ПОДГОТОВИТЬ РИСУНОК
Если вы забыли прорисовать какой-то фрагмент персонажа и заметили это
только на финальных этапах анимации— то в этом нет проблем. В месте, где
сохранён файл анимации, есть папка «library». Вы можете спокойно взять оттуда
.png файл и изменить его в любом графическом редакторе.
СОВЕТ
Абсолютно все названия слоёв, деталей, костей и прочего лучше делать только на
английском языке, иначе возможны ошибки и непонимания со стороны других
программ.

6.

ИМПОРТ РИСУНКА В Dragon Bones
Установка и настройка программы не должна доставлять трудностей, учитывая,
что там есть русификатор. Единственное, что очень важно — вам нужно сразу
зарегистрироваться в системе и создать аккаунт. Без этого вам не будет
доступно сохранение работы

7.

ИМПОРТ РИСУНКА В Dragon Bones
Также на встречающей вас странице программы уже есть встроенные модели.
Вы можете покрутить их и изучить интересные особенности и функции.
Подробнее о них рассказано на офф. сайте программы.

8.

ИМПОРТ РИСУНКА В Dragon Bones
Установка программы для анимации по идее не должна доставлять трудностей,
учитывая, что там есть русификатор. Единственное, что очень важно — вам
нужно сразу зарегистрироваться в системе и создать аккаунт. Без этого вам не
будет доступно сохранение работы
При создании нового «проекта» программа предложит вам «создать анимацию»
или «создать анимированный комикс». Выбираем первый вариант. (Подробнее
про создание комикса можно узнать в официальном источнике
http://dragonbones.com/en/comic.html)

9.

ИМПОРТ РИСУНКА В Dragon Bones
Отмечаем необходимые нам параметры проекта

10.

ИМПОРТ РИСУНКА В Dragon Bones
ПЕРЕДВЕЖЕНИЕ ПО ХОЛСТУ
СКРОЛЛ – ЗУМ
ПКМ – ПЕРЕДВИЖЕНИЕ ПО ХОЛСТУ ПО ОСЯМ

11.

ИМПОРТ РИСУНКА В Dragon Bones
Для дальнейшей лёгкой работы к программе нужно установить маленький плагин.
Его можно скачать прямо из самой программы. Называется это «Установка
плагина экспорта PSD» для экспорта сходного файла фотошопа. Нажмите и
просто следуйте инструкциям.

12.

ИМПОРТ РИСУНКА В Dragon Bones
После того, как вы закончили установку программы и рисовать все детали, важно
правильно подготовить слои. Не должно быть никаких слоёв со свойствами,
пустых слоёв, а лайн должен быть соединён с основным цветом. Учитывайте, что
программа может начать подтормаживать, если слоёв больше 20 и они в высоком
разрешении (>1500х1500px).
ПРИМЕЧАНИЕ
Программа понимает полупрозрачность.

13.

ИМПОРТ РИСУНКА В Dragon Bones
После того как вы сделали всё, можно сохранить файл в формат .psd и
перетащить в рабочее поле Dragon Bones. У вас появится вот такое окно импорта
PSD. Отметьте нужные вам настройки и нажмите импорт.

14.

ИМПОРТ РИСУНКА В Dragon Bones
После нажатия на «Import» программе потребуется время на обработку, она
самостоятельно нарежет всё по слоям. В процессе она равномерно раскидывает
все слои по холсту. Но в итоге это должно выглядеть так, как вы сделали
иллюстрацию в фотошопе:

15.

СОЗДАНИЕ МЕША
Меш (Mesh) — это полигональная сетка, благодаря которой текстуру можно
искажать, использовать кости и получать всякие эффекты псевдо-3D.

16.

СОЗДАНИЕ МЕША МЕША – порядок действий
1) Выделить любой из фрагментов
2) В меню слева поставить галочку «Mesh» и нажать «Редактировать» ниже.
3) Появится режим редактирования меша.
4) Выбираем инструмент внизу «нарисовать новую границу сетки», ставим галочку
«не показывать больше» и рисуем как на гифке ниже границу. После границы
нажимаем на «создать точку» и ставим точки в центре.
5) Делаем так со всеми фрагментами.

17.

СОЗДАНИЕ МЕША
Не увлекайтесь количеством точек. Вы потом устанете их всех двигать. Да и
компьютер может не справиться, обрабатывая такое количество полигонов.

18.

СОЗДАНИЕ МЕША
Если вы не планируете создавать сложную анимацию, можете не использовать
меш и оставить все изображения как есть, но только анимация будет
«деревянной».
В программе есть автоматическое создание меша, но работает оно так себе.
Лучше вручную или редактировать созданное автоматически.

19.

СОХРАНЕНИЕ
Любой кто регулярно работает за компьютером знает как важно часто
сохранятся. Так вот — эта программа любит периодически крашнуться прямо в
середине работы. Так что не забываем периодически сохранятся раз в 10 минут
работы ctrl+S.
Чтобы иметь возможность сохраняться, нужно создать аккаунт прямо в
программе. Иногда сервера программы не работают и придётся подождать.
Временным решением проблемы может послужить отключение интернета и
перезагрузка программы.

20.

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

21.

ЧТО НУЖНО ЗНАТЬ О КОСТЯХ:
1) Чтобы создать кость нужно нажать вот на этот инструмент справа вверху. При
создании костей они сначала прикрепляются к кости Root, а потом к каждой
последующей. Для прерывания цепочки, нужно нажать Esc.

22.

ЧТО НУЖНО ЗНАТЬ О КОСТЯХ:
2) У костей есть иерархия. Самая «главная» кость это Root.
Это основа, к которой крепится все картинки, меши и
кости. От расположения костей в меню справа зависит то,
как они влияют друг на друга. Располагающаяся выше
(ближе к Root) кость влияет на те, что ниже. Если навестись
на любую кость, появятся стрелочки, показывающие её
связь с другими костями.
Иерархию можно изменить просто перетащив кость из
меню иерархии (справа) к любой другой кости или к Root
(если вы хотите чтобы она стала сильной и независимой).
Редактирование доступно только в режиме «скелет». В
режиме «анимация» перемещать кости нельзя.

23.

РАБОТА С БИБЛЕОТЕКАМИ АНИМАЦИЙ И ВРЕМЕННОЙ ШКАЛОЙ

24.

ЭКСПОРТ АНИМАЦИИ
В окне экспорт (через файл>экспорт)
Расположенные настройки экспорта
Выберите необходимый вам формат

25.

ГДЕ МОЖНО ИСПОЛЬЗОВАТЬ СОЗДАННУЮ АНИМАЦИЮ?
СОЗДАННУЮ АНИМАЦИЮ ВОЗМОЖНО:
ПРИМЕНИТЬ В ИГРЕ, В ЧАСТНОСТИ UNITY ПОДДЕРЖИВАЕТ ЭКСПОРТ .JSON МОДЕЛЕЙ ПРИ ПОМОЩИ СПЕЦИАЛЬНОГО
ПЛАГИНА, ТОГДА КАК UNREAL4 ПОЗВОЛЯЕТ ЭКСПОРТИРОВАТЬ ТАКОГО РОДА АНИМАЦИЮ ТОЛЬКО ИЗ SPINE
МОЖНО СОХРАНИТЬ В WEB ФОРМАТАХ, НАПРИМЕР .SWF, GIF И ЗАГРУЗИТЬ НА САЙТ
ЗАГРУЗИТЬ КАК РЕКЛАМНЫЙ БАНЕР
ДОБАВИТЬ АНИМИРОВАННЫЕ ЭЛЕМЕНТЫ ИНТЕРФЕЙСА САЙТА
ВОЗМОЖНО ЗАРЕНДЕРИТЬ АНИМАЦИЮ КАК ПРОСТОЕ ВИДЕО, ИСПОЛЬЗУЯ ПОЛУЧЕННЫЕ ОТРЫВКИ МОЖНО
СМОНТИРОВАТЬ ВИДЕОРОЛИК