Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

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

Автор Tien Can

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

За помощь в подготовке статьи огромное спасибо аниматору Dezy.

Что такое Spine и где его используют

В Spine создают двухмерную скелетную анимацию. Для этого рисунок в Фотошопе разделяют на слои с отдельными частями персонажа или предмета и сохраняют в формате PSD на компьютер. Арт с компьютера импортируют в Spine. На изображении создают кости и привязывают их к фрагментам персонажа — спрайтам. Если подвигать костью на руке, то вместе с ней будет двигаться спрайт с картинкой руки.

Например, нужно анимировать кота для игры. Тогда сначала разделим арт на слои с отдельными частями тела в Фотошопе и сохраним в PSD-формате.

Слева — цельный рисунок, справа — вырезанный из рисунка кинжал. Материал из <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9v0ELhCbi_c&postId=1206693" rel="nofollow noreferrer noopener" target="_blank">видео</a>
Слева — цельный рисунок, справа — вырезанный из рисунка кинжал. Материал из видео

С помощью специального скрипта арт импортируется в Spine — нужно настроить его расположение на поле и создать кости для каждой части тела. Кости нужно привязать к каждому спрайту с картинкой через Веса и Сетку.

Материал из <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9v0ELhCbi_c&postId=1206693" rel="nofollow noreferrer noopener" target="_blank">видео</a>
Материал из видео

После настройки можно перейти в режим анимации и заставить кота двигать лапкой. Поставили ключ на начальное действие, сдвинули лапку, снова поставили ключ — кот дернул лапой.

Материалы из видео

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

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

Вот персонаж в состоянии покоя рядом с панелью управления
Вот персонаж в состоянии покоя рядом с панелью управления

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

Например, Три богатыря, Potata, Rocket Punch, Funday Factory — анимацию в этих играх сделали с помощью Spine.

Материалы взяты из видео Soulgame

Главные инструменты Spine и их функции

В программе есть два режима — Настроить и Анимировать. В первом случае происходит настройка анимации — сначала нужно загрузить PSD-файл, где расположены фрагменты персонажа. Арт устанавливают на поле относительно главной кости root — она расположена в центре поля по умолчанию. Затем начинают создавать Кости, Сетки и настраивать Веса.

Кости. Когда начинается проектирование скелета персонажа, сначала нужно создать основную кость, которая будет идти за root в иерархии на панели управления. Для этого нажимают на инструмент Создать и создают первую кость в центре туловища, например. Затем от этой кости создаются дочерние — плечевые. От плечевых уже устанавливаются кости рук, кистей и пальцев. В иерархии они будут идти строго друг за другом.

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

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

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

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

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

Например, вот как выглядит Сетка на лице Никиты — она полностью повторяет форму его головы
Например, вот как выглядит Сетка на лице Никиты — она полностью повторяет форму его головы

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

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

После переключения на режим Анимировать появляется панель внизу экрана — таймлайн. На таймлайне фиксируются действия и проставляются ключи. Анимацию делать проще — нужно подвигать персонажа в нужном направлении и установить ключ на одно действие.

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

Одна секунда анимации включает тридцать кадров или фреймов (значение можно подстроить под себя). Никите нужно пойти — значит, ключ ставится в таймлайне на его начальное положение. Затем нужно перейти на третий кадр, изменить положение ноги и снова поставить ключ. Если провести курсором по панели от первого до третьего кадра, то Никита будет передвигать ногой.

Готовую анимацию экспортируют через панель инструментов вверху слева

Какие навыки нужны, чтобы работать аниматором в Spine?

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

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

Чтобы найти работу уровня Junior

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

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

Со стороны практических навыков важно уметь работать со всеми инструментами программы. Кроме того, нужен базовый опыт в создании простой анимации — idle, run, walk, jump. Важно знать, как экспортировать готовую работу и в каком формате передавать ее заказчику. Об инструментарии и простой анимации можно узнать в коротком видеообзоре.

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

Что по зарплате: новички могут стать стажерами и рассчитывать на зарплату от 20 тысяч рублей — с ростом навыков она будет расти.

Чтобы найти работу уровня Middle или Senior

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

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

Кроме того, нужен опыт и знания в работе с Adobe Photoshop и Adobe After Effects — в них можно создать эффекты и спрайты.

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

Что по зарплате: со средним опытом можно рассчитывать на зарплату от 50 тысяч рублей. Опытным аниматорам могут предлагать от 80 тысяч рублей.

Нужно ли уметь рисовать, чтобы анимировать профессионально?

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

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

Первые шаги в анимации: простой пайплайн главных этапов для новичков от Dezy

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

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

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

После нарезки нужно создать json с помощью скрипта и импортировать файл через него в программу. Там придется расположить персонажей на поле координат и сделать их скелет. Здесь арт располагается над костью root.

Для расстановки костей используется инструмент root и bone, где root — главная кость, которую нужно оставить неподвижной, а bone — кость, которая двигает часть тела.

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

Когда вы сделаете скелет, нужно его привязать к спрайтам — для этого настраиваются Сетка и Веса.

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

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

Как стать аниматором в геймдеве: инструкции для тех, кто хочет анимировать в Spine

Результат — вот такая милая простая анимация.

Рекомендации по обучению анимации в Spine

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

Кроме того, есть YouTube — там выкладывают инструкции по анимации персонажей для игр, визуальных новелл или интерактивных мультиков. Например, ролики на канале Kimuri team, видео Алексея Чернова или наш стрим с Анной Лепешкиной и Алексеем Завриным, менторами Smirnov School и разработчиками игр Potata и Almost My Floor.

Чтобы набраться опыта и стать профессиональным 2D-аниматором, нужно анализировать чужие анимации. Например, можно их искать на Artstation и изучать, чтобы понять их плюсы и недочеты. Нужна практика — для этого делайте собственные анимации или участвуйте в геймджемах.

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

Текст написала Анастасия Терентьева, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

240240
55 комментариев

Занимаюсь анимациями в Spine на начальном уровне. Я вам так скажу, большинство времени уходит непосредственно на подготовку файла - нарезку, дорисовывание. А потом уже только работа в спайне - мэш, кости и веса. И только после этого начинается анимация. На данный момент работаю над ведьмой я лягушонком, который не очень ответственно относится к зельеварению.

33
Ответить

Тема сисек не раскрыта...

Друг просил раскрыть.

3
Ответить

Это вы ещё не работали со сложными сценами, когда нарезка-риг это только начало работы : )

2
Ответить

А иллюстрация тоже твоя?

Ответить

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

6
Ответить

Лол, при всей бесплатности DB он ни в какое сравнение не идет со спайном, неповортливый, мало чего умеет (он уже научился в движение объектов по путям?))) и тормознутость запредельная. Тот, кто работал в обоих инструментах никогда не выберет драгонбонс, если у него есть деньга на спайн, имхо)

9
Ответить

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

4
Ответить