{"id":3842,"url":"\/distributions\/3842\/click?bit=1&hash=4c67e91a2a588f03561899c61c4eabfeb37008500c6498f3b9533b2e8845d454","title":"\u041e\u0431\u043e\u0436\u0430\u0435\u0442\u0435 \u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445? ","buttonText":"\u0412\u0430\u043c \u0441\u044e\u0434\u0430","imageUuid":"11cfcef6-3125-52d0-8ef8-49fb205d3efe","isPaidAndBannersEnabled":false}
Gamedev
Smirnov School

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

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

Автор Tien Can

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

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

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

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

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

Слева — цельный рисунок, справа — вырезанный из рисунка кинжал. Материал из видео

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
53 комментария
Написать комментарий...
Shamisen

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

Ответить
Развернуть ветку
Классический супер_стар

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

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

Ответить
Развернуть ветку
4 комментария
Антонов

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

Ответить
Развернуть ветку
z0nics

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

Ответить
Развернуть ветку
Благородный теркин30см

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

Ответить
Развернуть ветку
1 комментарий
AngerMob

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

Ответить
Развернуть ветку
Антонов

Увы, ДБ так и не стал Блендером в 2д анимации. Практически никто, в геймдеве, не юзает ДБ. Но возможно где-то в Азии он и котируется.

Ответить
Развернуть ветку
Volter Patrick

Аниматоры, моделеры, Левел дизайнеры, ГД, концепт артисты много не зарабатывают.
Сейчас просто перелив рынка желающих моделить или анимировать потоу это не удивительно.

Вообще миф о обольших зп в 3Д-хе вкидывают курсы, которые хотят вам впарить курсы, откройте просто вакансии и смотрите реальность

Ответить
Развернуть ветку
ulys13

Из статьи выходит, что аниматорам spine платят очень мало

Ответить
Развернуть ветку
bezymnbl

Ну не так уж и мало, если подумать. Всё-таки 20к для стажёра, это не плохо, особенное если учесть, что можно работать удаленно и совмещать с учебой, например.

Ответить
Развернуть ветку
17 комментариев
Motion Hokage

Да нет, на самом деле платят хорошо, особенно в фрилансе.

Ответить
Развернуть ветку
Shamisen

Без опыта и на обычных комишенах зарабатываю 1к$+ в месяц. С отличным портфолио можно устроится и в нормальную компанию по удалёнке. Помню один азаит на ютубчике выкладывал пару анимаций персонажей, через какое-то время он писал что работает в Rovio. На англоязычном ютубе вообще огромная база для обучения в Spine. Однако нужно уметь рисовать (дорисовать). Обычно это вообще не сложно, т.к. требуется самый дешевый планшет для рисования и немного усидчивости и практики, чтобы дорисовать нужное. Годик-второй практики и можно уже искать нормальные вакансии в игровых компаниях

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
StanEKB

Сильно этот способ отличаются от анимации в affter effect с плагином DUIK? У кого возможностей больше? У кого легче процесс работы?

Ответить
Развернуть ветку
Антонов

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

Касаемо прода. Тут зависит от контекста. В спайне нельзя рисовать, или добавить нормально камеру (можно через костыли с констрейнами, но мы же про нормальный пайплайн говорим да?). Нет шейпов, эффектов, плагинов. Нельзя сделать прекомп и прокси. Хотя прокси и не нужен, Спайн работает там, где Ае даже не запустится.

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

Ответить
Развернуть ветку
2 комментария
1deru

Отличная и интересная статья, спасибо.

Ответить
Развернуть ветку
kanye east

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

Ответить
Развернуть ветку
Жареный бекон

Уж что-что, а Photoshop у Adobe очень даже неплох в сравнении с каким-нибудь Lightroom, вот с ним реально тяжко

Ответить
Развернуть ветку
2 комментария
foki

фотошоп (спайн)

Ответить
Развернуть ветку
Мама я играю как Даун

Продолжай держать нас в курсе.

Ответить
Развернуть ветку
maxbuntiliamba

Мне adobe flash professional cc хватает

Ответить
Развернуть ветку
Alexey Testov

Спайн заточен под персонажку и чертовски хорош в ней. Флеш так не может. Хотя, конечно, может многое чего не может спайн. В общем это инструменты для разных задач

Ответить
Развернуть ветку
Южный фонарь

Интересно сравнение с AE + Duik Bassel

Ответить
Развернуть ветку
Роман Андреевич

Дюик тормозной, да и 2 миллиона слоёв. По работе использую, но все чаще смотрю в сторону спайн.

Ответить
Развернуть ветку
Антонов

ответил ниже на комент @StanEKB

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Антонов

Катаны. Кто начнёт учить Спайн и появятся вопросы. Залетайте в телегу. Тут сообщество Спайн-аниматоров:
https://t.me/spine_animators

Ответить
Развернуть ветку
Серёга Богачёв

спасибо

Ответить
Развернуть ветку
Smirnov School
Автор

И Вам спасибо, что читаете нас!

Ответить
Развернуть ветку
Читать все 53 комментария
null