спайн анимация что это

Анимация в Spine, советы и рекомендации, псевдо 3D эффект

Хочу поделиться своим опытом работы со Spine — программой для создания скелетной анимации, специально заточенной под игры.

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

UPD: После недавнего релиза Spine версии 3.6 фишки с Json описанные в конце статьи актуальны разве что для общего развития, т.к. разработчики добавили данный функционал «из коробки».

UPD2:
Layers to PNG теперь называется Photoshop to Spine, сохраняет картинки сразу в нормальном размере, а так же после появления в версии 3.8 функции trace для автоматической генерации меша по контуру текстуры и встроенной полигональной паковки атласов так заморачиваться с подготовкой картинок теперь не обязательно.

Теперь в Spine уже встроен предпросмотр готовой анимации, делается это в окне preview, там можно посмотреть как отрабатывают бленды и как одна анимация накладывается на другую. Отдельно Skeleton viewer теперь искать не обязательно. Проблем со смешиванием чаще всего удается избежать просто внимательно следя за тем какие ключи и где вы ставите.

Сразу оговорюсь, для создания программной анимации в играх есть и другие решения, Dragon Bones, Spriter, Creature, Marionette studio, плагин Puppet 2D и наверняка найдутся другие, просто я как аниматор работаю в Spine.

Схема работы

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

Общая схема работы такова:

Первым делом необходимо подготовить рабочий материал из графических редакторов. Затем ассеты (assets, текстуры) импортируются в Spine и анимируются. На выходе мы получаем Json — файл в котором записаны все ключевые кадры трансформации костей, слотов и проч. Данный файл импортируется в движок, создается специальная skeleton data, которая добавляется на сцене в Spine game object, где наша анимация визуализируется по средствам mesh renderer, запуском можно управлять с помощью кода или же стандартным unity animator.

Непосредственно рабочий процесс в спайне выглядит следующим образом:

Импорт текстур

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

А также недостаточное число проекций если персонаж меняет ракурс.

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

В данном случае нам будет достаточно одной проекции, и ассеты художник отрисовал хорошо. Можно приступать к импорту в спайн.

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

Однако у такого способа есть ряд недостатков — скрипт сохраняет изображения без сжатия, что непрактично. Просто пересохранив слои через file-generate-image assets мы уменьшим вес изображения приблизительно в 10 раз.

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

Если для проекта необходима покадровая анимация (напр. огонь, спецэффекты, и проч.) — материалы необходимо отрисовать заранее. Далее с помощью adobe after effects и скрипта ae_to_spine мы можем в пару кликов перенести последовательность кадров в Spine.

Рекомендую заранее продумать концепцию наименования, материалы часто приходят в формате «слой 1 (копия) 5», это не слишком практично, для каждой текстуры в проекте необходимо сделать уникальное название, что бы не вызвать проблемы при запаковке атласов. Вполне пригоден вариант формата CharacterVyasya_Skin_a_Hand_R_1.

Тут во многом нам может помочь инструмент find and replace который позволяет быстро переименовывать, указывать путь для большого количества объектов.

Риггинг

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

Тут может помочь введение дополнительных костей-контролов для разбиения движения по осям X и Y (т.к. в спайне остутствует функция separate dimentions).

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

Тут же маленький типс, если вдруг чувствуется нагромождение из за излишнего количества костей — попробуйте покрутить настройку bone scale:

Смотрите примеры готовых ригов из образцов поставляемых вместе со спайном, или в сети.

Так же полезные материалы можно искать на behanсe, форуме, соответствующих сообществах в социальных сетях.

Скиннинг

Меш — Один из ключевых инструментов в спайне, накладывая на его текстуру мы получаем возможность ее деформировать, искажать, создавать иллюзию 3D.

При создании меша помните: чем меньше вертексов — тем проще контролировать анимацию.

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

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

Производительность

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

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

И так, когда наш персонаж настроен можно переходить к анимации:

Анимация

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

3D-эффект

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

Для себя я отметил несколько способов создания псевдо 3Д:

Проставляются кости в ключевых точках меша:

Анимируя кости создаем трехмерный эффект:

Можно сделать анимацией вертексов в меше, но как мы видим по сравнению с кубом точек значительно больше:

Аналогично кубу, кости в ключевых точках меша. По затраченному времени этот способ не лучше предыдущего:

Было бы гораздо более гибко свести риг под один глобальный контрол с помощью констрейнов, двигая одним управлять всеми костями:

То же самое, можно сделать без лишней массы костей,

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

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

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

И так, мы просидели несколько часов над ключевыми кадрами, мешами, и сделали анимацию персонажа:

Тестирование

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

Если ваш аниматор не дружит с движком, можно использовать Skeleton Viewer

Какие проблемы возникают наиболее часто:

Некорректное отображение текстур

Чаще всего такое происходит из за неправильной композиции текстуры — меш должен четко соответствовать размеру спрайта.

После отработки анимация выглядит не так как раньше

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

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

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

Красным выделена иконка фильтра объектов по костям и кнопка для быстрого разворачивания иерархии:

Горячие клавиши по умолчанию:

Key Active: L
Key Selected: ctrl + L
Key Dopesheet: ctrl + shift + L
Key Translation, Key Rotation, Key Scale, Key Shear, Key Color — нужно настраивать самому

2) Использовать скрипт setToSetupPose, который как бы и заставляет проигрываться анимацию из дефолтного состояния. Но такой метод имеет существенный недостаток — Setup Pose выставляется мгновенно, а рендер меняет картинку на соответствующую только со следующего кадра. Таким образом мы имеем проскакивание лишнего кадра между анимациями, выглядит это неприятно. Соответствующее issue уже стоит на доске у разработчиков.

Мы можем экспортировать из спайна Json, провести с ним какие-либо манипуляции, и импортировать обратно, получив определенный результат. Это очень мощный инструмент т.к. мы получаем доступ ко всем компонентам проекта, в свою очередь нам это может очень помочь в определенных ситуациях:

Мержинг проектов

Часто возникает необходимость держать анимации в одной сцене, например как тут:

Сам жук в игре появляется в множестве других сцен и был скопирован из одной из них. Однако теперь в проекте два скелета, и соответственно на выходе будет 2 json и 2 объекта на сцене, что добавит необходимость делать определенную логику синхронного запуска этих анимаций для их совмещения во времени, а так же нужно будет точно совместить объекты по положению в локации. Можно упростить себе жизнь отдав материал в одной сцене. Для этого два json нужно смержить.

Для этого есть как минимум два способа: руками и скриптом.

Руками

Копируем куски кода из одного json в другой, в соответствующие категории: слоты к слотам, кости к костям, анимации к анимациям, и т.д. Что бы не возникло конфликтов, важно соблюсти корректность наименования объектов, что бы названия из одного json не совпадали с названиями из другого. Проще всего этого добиться заранее в спайне присвоив всем объектам в именах свой уникальный индекс типа _skel1_ и _skel2_. Этот способ слегка затратный по времени, но меня еще не подводил.

Предельно простой пример для демонстрации принципа, два скелета с костями в одном проекте:

В результате имеем все в одном проекте:

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

Более сложный пример с лягушкой:
(Осторожно, длинные файлы)

Skeleton Merger Tool

Дублирование объектов вместе с анимацией

В спайне отсутствует вложенность композиций (аналог прекомпоз в After Effects или символ во Flash), однако, как показывалось выше, есть возможность продублировать объекты, с сохранением всех зависимостей, но ключи анимации в таком случае не копируются. Не сложно догадаться что, для того что бы не делать анимацию заново, можно переназначить ее на дубликат костей, для этого надо всего лишь перебить в Json имена. Опять же, это проще сделать если у каждой кости будет свой уникальный индекс.

Есть муравей с анимацией. Задача сделать в спайне целую цепочку бегающих друг за другом муравьев. При дублировании муравья анимация не копируется. Обратите внимание, у первого муравья в названии стоит индекс _skel_1_, у второго _skel_2_.

Экспортируем Json и открываем его текстовым редактором. Код анимации walk_1 копируем, находим там все участки _skel_1_:

заменяем их на _skel_2_

Вставляем обратно. Таким образом мы переназначили анимацию на другие кости. Сохраняем json, и импортируем его в спайн путем file — import data. Теперь у нас два бегающих муравья.

Откатиться до старой версии

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

Руками перебить версию в json

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

JsonRollback tool

Ознакомиться с принципом работы и скачать можно по ссылке.

Резюме

Источник

Spine, Adobe Animate, Moho — в чем разница?

Предлагаем рассмотреть три совершенно разных софта для 2D-анимации, чтобы понять их различия.

Делать анимацию и рисовать мультики не обязательно в дорогих и сложных программах. My little pony тому доказательство — сериал полностью сделан в Adobe Animate.

Запрос «лучшие программы для 2d анимации» выдает десятки наименований. Любому новичку трудно сориентироваться в таком количестве информации. Форумы и обзоры пестрят противоречащими рекомендациями, плюсами и минусами каждого софта. Глаза разбегаются, пульс учащается… растерянность, тоска, уныние.

Мы решили объективно разобрать несколько программ, чтобы новичку было легко понять, в чем же между ними разница и какой лучше выбрать. В одной из наших предыдущий статей мы сравнивали Toon Boom Harmony и TVPaint, сегодня — очередь за Adobe Animate, Moho и Spine. Предлагаем ответить на следующие вопросы:

У каждого инструмента свое применение

Начнем с главного: для каких областей больше подходит Adobe Animate, Moho или Spine. Что-то удобнее при работе с коммерческими роликами, что-то для полнометражных мультиков, а что-то для видеоигр. Именно на вопрос, с чем вы хотите работать, и стоит опираться при выборе программы для анимации.

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

Adobe Animate активно используют в анимации игр и векторных мультиков. Например, в Adobe Animate анимировали сериал My Little Pony, часть проектов студии Playrix, а также игры Wakfu и Don’t Starve.

Don’t Starve — инди-игра, анимация для которой полностью сделанная в Adobe Animate.

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

Мультфильм «Песнь моря» был номинирован на множество престижных премий, в том числе Оскар и Сезар.

«Тайна Келлс» восторженно приняли критики и зрители всего мира.

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

Особенности Spine

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

«Система костей (скелет) в комбинации с сетками позволяют сделать персонажа очень подвижным, избегая мелкой нарезки. Этого невозможно добиться в других редакторах, в том же Adobe Animate, например. Еще один его плюс в том, что после подготовки рига, сложные положения и ракурсы будут доступны аниматору. А при вставке в игру спайновые анимации легко интегрируются и обновляются в билды, что тоже экономит разработчикам много сил и времени», — Софья Фирсова, преподаватель курса по анимации в Spine, Animation Director в Playrix.

В программу все-таки заложен функционал под покадровую анимацию, но инструментов там немного и работать с фреймами в целом не очень удобно. Так что, если ваша цель — научиться делать покадровую анимацию, Spine точно не подойдет. Также в программе нет функций под 3D-пространство и изометрию, хотя добиться объемности движений персонажа легко, создавая 2,5D-эффект.

Из минусов стоит еще отметить, что непосредственно в Spine нет возможности дорисовать заплатку/редактировать текстуру. При этом каждая дополнительная заплатка утяжеляет риг.

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

Наша школа предоставляет всем студентам индивидуальную лицензию Spine Education. Пользователям этой версии доступен весь функционал программы с ограничениями на коммерческое использование.

Особенности Adobe Animate

Adobe Animate — один из лучших софтов для перекладной анимации. Функционал программы позволяет работать с мультсериалами, играми и даже создавать анимации для веб, используя HTML5.

Компания Playrix стала всемирно известной, благодаря своим казуальным играм. Анимация для многих из них создана в Adobe Animate.

Интерфейс программы простой и понятный на интуитивном уровне. ПО обладает функционалом для перекладной и покадровой анимации с наглядной опцией наложения слоев.

Adobe Animate позволяет создать библиотеку фреймов и использовать их повторно, без необходимости анимировать сцены заново. Кроме того, функционал АА позволяет рисовать непосредственно в программе. Это избавляет аниматора от необходимости пользоваться другим софтом и импортировать дополнительные материалы в файл. Анимации, сделанные в АА, удобно переносить в игры в формате атласа с частями персонажа и файлом, описывающим движения каждого символа с этими текстурами. Это сильно экономит ресурсы по сравнению со спрайт-листами.

«В Adobe Animate есть хорошие инструменты для векторного рисования. Чаще всего персонажей и даже окружение создают в нем. Опция импорта из Adobe Illustrator тоже настроена удачно, так что рисовать можно и там. А вот с растровыми файлами работать в АА не очень удобно, поэтому для анимации растровых изображений лучше использовать другой софт», — Екатерина Максимова, преподаватель курса «2D-анимация на экспорт».

Adobe Animate предназначена только для создания 2D анимации. В программе есть камера, которая позволяет масштабировать сцены, а еще вращать их или делать панорамный вид в кадре. Но эта функция не является сильной стороной софта.

Примеры работ студентов курса «Техника перекладки в Adobe Animate. Курс анимации от Playrix»

Программа входит в пакет Adobe. У пользователей есть возможность купить по ежемесячной подписке весь пакет или отдельно Adobe Animate. В июне 2020 года в купе с другими продуктами стоит около 3500 рублей в месяц, отдельно программа стоит около 1300 рублей в месяц. При первой покупке вы получаете скидку 40%. Также есть пробный период: в течение недели можно попробовать программу бесплатно без ограничения функционала.

Особенности Moho

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

Спродюсированный Анджелиной Джоли мультфильм The Breadwinner создан в Moho.

Moho — программа, очень дружелюбная к пользователю. Она не настолько простая, как Adobe Animate, но освоиться в ней будет несложно. Главное преимущество здесь — риггинг персонажей. В отличие от перекладки АА, в Moho объекту задаются физика и вес, что делает движение более реалистичным и гармоничным.

На ютуб-канале Moho есть серия видео о риггинге.

Еще одно преимущество перед АА — более широкие возможности использования 3D-эффектов для пространства и окружения. Это делает сцены более глубокими и интересными.

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

«Moho это очень интересный софт для 2D анимации. В нем можно создать модель для всех случаев жизни. Достаточно один раз заложить в него нужный функционал: начиная от смены эмоций через экшены и заканчивая полным вращением персонажа. В эту программу заложены широкие возможности перекладки, которые можно оптимизировать до очень высокого уровня», — Евгений Борщъ, риггер в Moho.

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

Подведем итоги

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

Spine идеален для разработки игр. Это программа предназначена для скелетной анимации, которая использует систему костей и картинок с сетками. При этом он способен интегрироваться со многими движками и использует библиотеки среды выполнения.

Adobe Animate используется для создания перекладной анимации в играх и мультсериалах. Крупнейшие мировые компании, такие как Netflix и DreamWorks Animation Television используют этот софт для производства своих сериалов. Кроме того, программу используют для создания игровой анимации такие студии, как Playrix и Klei.

«В целом я бы рекомендовала использовать Spine в проекте, где для персонажа планируется много анимаций, так как деформацией одной текстуры добиться нужного результата проще, чем при его подробной нарезке для перекладки. Это не значит, что анимации, которые мы можем реализовать перекладкой в Adobe Animate, невозможно реализовать в спайне скелетной анимацией, и наоборот. Тут важно понимать какие задачи какой инструмент решает лучше или проще и использовать более оптимальный для конкретной задачи», — Софья Фирсова, преподаватель курса по анимации в Spine, Animation Director в Playrix.

Moho — другая крайность нашего списка. Этот софт уже не очень подходит для создания игр, но зато пользуется популярностью у мультипликаторов. Программа обладает продвинутым риггингом персонажей, который значительно ускоряет процесс анимации. Возможность внедрения в сцену 3D-объектов делает ролики Moho гораздо сбалансированнее, чем в Adobe Animate.

«Это программа с топовыми возможностями перекладки. Множество инструментов, экшены и гибко настраиваемая работа с моделями позволяют сделать работу аниматора проще и создать эффект классической анимации. В Moho можно делать анимацию для игр, благодаря той же гибкости настройки и таким инструментам, как 2D-mesh сетка. Но, к сожалению, на данный момент Moho не может конкурировать со Spine из-за невозможности интегрировать анимацию в игровые движки», — Евгений Борщъ, риггер в Moho.

Выражаем благодарность за помощь в написании статьи преподавателям AnimationSchool.ru: Софье Фирсовой, Екатерине Максимовой, Яну Богородецкому и Евгению Борщъ.

Обсудите статью в наших социальных сетях

Источник