Spine — программа для создания скелетной 2D анимации

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

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

Из недостатков можно отметить следующие:

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

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

Собираем персонажа в Spine

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

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

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

Чтобы привязать конкретное изображение к кости, нужно в древовидной структуре выбрать изображение и выделить соответствующую кость нажав Set Parent. Также, изображение к кости можно привязать перетащив его к определенной кости в древовидной структуре. После привязки появится всплывающее окно, информирующее о привязки изображения к одноименному слоту.

Дело в том, что изображения не привязываются к кости напрямую. Вместо этого, они привязываются к слоту, который в свою очередь привязан к кости. Это позволяет привязывать к кости несколько изображений. Но только одно из них может отображаться в анимации. Расположить изображения в соответствии с шаблоном помогут инструменты Translate (V) и Rotate ©. Все операции трансформации лучше совершать движением мыши в свободной рабочей области, чтобы случайно не выбрать соседние элементы.

Установить порядок отображения изображений по оси Z можно в ветке Draw Order. Там же можно отключить видимость шаблонного изображения.

Чтобы отрегулировать положение костей, не затрагивая изображение или дочерние кости, нужно воспользоваться переключателями Image и Bone на панели Compensation.

Анимируем персонажа в Spine

Пришло время оживить наш персонаж, поэтому мы перейдем в режим Animate и добавим новую анимацию.

Чтобы анимировать персонажа, необходимо установить скелет в определенную позу и создать её ключевой кадр. Между ключевыми кадрами кости выставляются автоматически.

Чтобы создать ключевой кадр, нужно выделить все кости (кроме опорной) и нажать на иконку ключа рядом с инструментами трансформации. В этом случае, будут созданы ключевые кадры для всех костей, даже если они не меняли их расположение, масштаб или поворот. Цвет иконки с ключом может сигнализировать о следующих вещах:

  • зеленый — значения не были изменены, нет необходимости в создании ключевого кадра
  • желтый — значения были изменены, но ключевой кадр не установлен
  • красный — ключевой кадр установлен

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

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

Во вкладке Graph можно отредактировать кривую интерполяции между выделенным и следующем ключевым кадром. Нелинейная интерполяция, создаваемая с помощью кривой Безье, является ключевой моментом в создании реалистичной анимации.

P.S. Персонаж из примера создан по туториалу Криса Хильденбранда Character Animation with Inkscape.

P.P.S. Чтобы лучше понять, как построить скелет персонажа советую детально изучить стандартные примеры (Spine > Examples).