Я не стою на месте 🙂 Решила помимо игрового арта, параллельно изучать еще и 2d-анимацию, чтобы стать более ценным художником. Сейчас покажу, как я сделала анимацию милой свинки, которую я нарисовала не так давно. Персонаж моргает, машет рукой и немного качает головой:
Получилось не идеально, но я думаю если немного шлифануть некторые моменты, то такого персонажа можно поставить на заставку детского приложения или игры. Милая свинка приветствует игроков! Ура!
Ну да ладно, отвлечемся от моих радужных фантазий и я-таки расскажу как сделать простую 2d-анимацию:
Нарезка спрайтов
После того, как персонаж уже был нарисован, я нарезала его на составные части. Голова, руки, ноги, уши, глаза, нос — в общем все стоит разделить на отельные слои. У меня вот что вышло:
Ключевые кадры
Дальше я села и подумала, какие же движения свинки можно показать. Набросала вот такой набросок. По-моему, выглядит как черновой аниматик для мультика 🙂
Но делать такое количество кадров я не планировала. Это будет небольшая анимация, как для игры. Я решила оставить только моргание, и незначительные движения руками-головой, что-то вроде приветствия. Думаю этот шаг можно пропустить (если у вас четкая картинка в голове)
Рисую дополнительные спрайты
Для анимации глаз мне понадобились еще пара отрисованных заготовок, я нарисовала закрытые и полуоткрытые глаза:
Их тоже сохраняю на прозрачном фоне и загружаю в библиотеку dragon bons.
Загрузка спрайтов в dragon bons
Дальше я перекинула все спрайты в программу dragon bons. Их можно закинуть как в png формате, так и прямо в psd, что я и сделала. Главное чтобы все было на отдельных слоях и они назывались на английском а не на русском. Иначе программа не сохранит названий и будет трудно ориентироваться в таком количестве слоев.
Сборка персонажа
Далее собрала персонажа из кусочков в единое целое. И добавила кости. Они нужны чтобы перемещать и поворачивать отдельные части тела в процессе анимации.
Как это сделать я посмотрела в видео как собрать персонажа
Как создать сетку
Кроме того, для более продвинутой анимации, где нужно деформировать отдельные части, например вытягивание чего-нибудь или сплющивание при столкновении с другим объектом, нужно спрайты преобразовать в специальные «меши», которые выглядят как сетка из точек. Я это тоже сделала:
видео как сделать сетку mesh
Если будете пользоваться такими сетками, будьте внимательны — они растровые, а не векторные как в иллюстраторе. Построить их очень легко, не так как векторные, но при излишней деформации предмета контуры рисунка могут становиться нечеткими и размазанными. Так что выходит, анимация в dragon bons не всегда может быть сделана исключительно методом перекладки. Мне например, как вы уже знаете, понадобились дополнительные кадры с закрытыми глазами как при покадровой анимации.
Как заменить один спрайт на другой
Нужный кадр с глазом нужно из библиотеки (вкладка library) перетащить прямо на кость глаза во вкладке «scene». Если все сделать правильно, появляется маркированный список, каждый пункт которого соответствует разным состояниям глаза. Вот так:
Когда я делала анимацию моргания я просто включала нужный кадр с открытым/закрытым глазом на вкладке «animation» в тех кадрах, когда глаз открывался или закрывался. Если ничего непонятно, посмотрите видео как сделать переключатель Переход между ключевыми кадрами программа делает сама. Красота!
Когда я сделала все кости, я конечно поигралась с разными положениями поросенка 🙂
Защищайтесь, сэр!
И конечно сделала саму анимацию. Вот как это выглядит, когда работаешь в программе:
Ключевые кадры в этой программе выглядят как ромбики на вкладке «timeline» внизу страницы. Как видите, их не так много.
Сколько времени уходит на одну простую анимацию?
Эта анимация длится всего 2 с небольшим секунды. Но и на эти две секунды у меня ушла куча времени! Далеко не час и не два. Это конечно из-за того, что пришлось перелопатить кучу видео-уроков и статей по анимации в dragon bons и «потыкать» саму программу. На это ушел день или полтора. Это время конечно подготовительное, его не стоит включать.
Но и на саму анимацию ушло полтора дня! Это много, но на первых порах так. На нарезку спрайтов уходит пара часов, хотя на первый взгляд кажется что это дело 20 минут. На то чтобы продумать само движение, нарисовать аниматик еще пара часов. Собрать персонажа и настроить кадры, когда толком не знаешь интерфейса еще полдня!
Думаю в будущем это время значительно сократится, но все равно одна совсем простая анимация будет занимать несколько часов, я думаю. За минуты все делается только в представлениях новичка)
Как сохранять анимацию в dragon bons
Чтобы сохранить анимацию в первый раз нужно со всем как следует разобраться. Чтобы показать анимацию на сайте или в портфолио нужно ее сохранить как gif или в видео формате. Gif из dragon bons сохраняется в отвратительном качестве! Такое нельзя показывать. Насчет видео все еще печальней — это невозможно сделать из этой программы. Остается только сохранить как кучу png кадров и соединить кадры в другой программе. Я пыталась в Photoshop — через 20 минут поняла, что это очень долго и нужно другую программу использовать. Я использовала бесплатый видеоредактор «киностудия», он не идеален, но дело пошло быстрее. Еще знаю, что можно конвертировать кадры в видео в Adobe Animate, ну или любом другом видеоредакторе или программе для анимации
Стоит ли изучать dragon bons?
Думаю, для начала это отличный софт. В инди студиях часто его используют, так как он поддерживает меши, костную анимацию, в целом очень просто его изучить. Ну и конечно — он бесплатен!
Это хорошо, когда у тебя есть деньги — тогда конечно по многим причинам будет удобнее купить spine. Ну а если денег нет — тогда можно начать с dragon bons. Тем более «переобуться» из одной программы в другую достаточно просто. Я так и планирую сделать, если анимация будет одним из моих источников дохода. А пока я очень рада что есть такой бесплатный аналог.
И вам спасибо, что дочитали мою статью. Это не полноценный урок по анимации конечно, но я надеюсь эта информация вам как-то пригодится, если вы только начали изучать анимацию.
Успехов вам! А я пойду рисовать новогоднюю иллюстрацию с быком. Скоро новый год, а мне еще 8 иллюстраций надо успеть на эту тему 😉