Spine — первые шаги

  • Tutorial


Привет Хабр!

Относительно недавно на кикстартере завершился сбор денег на новый инструмент для игроделов, но на Хабре это не было освещено. Spine —программа для создания скелетной 2d анимации. Этот инструмент будет интересен не только инди-разработчикам и начинающим гейм дизайнерам, но также опытным игрокам рынка. Простота в использовании и притягательный дизайн создают впечатление творящегося на экране волшебства.

Всех заинтересовавшихся прошу под кат (много картинок).

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

1. Подготовка к работе

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



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



Таким образом у нас есть папка где лежат рисунки частей тела — плоть нашего чудовища, а также исходное изображение. А вот теперь начинается самое интересное.

2. Готовим сборочный стол

Запускаем Spine. В главном меню выполняем команду New project.
В окне иерархии выбираем пункт Images и с помощью кнопки Browse выбираем нашу папку с картинками.



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



4. Собираем скелет

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


а затем инструмент Create new bones

Старшей костью после root выберем кость таза (pelvis), и создаем ее простым нажатием на нужное место изображения. Вокруг этой кости будут вращаться все остальные. Другие кости создаем путем протягивания курсора (Drag-and-drop) от конца старшей кости до необходимого размера. Желательно, но не критично, чтобы кость соответствовала по длине размеру части тела.
Иерархия костей получаеться следующая.



5. Пришиваем мясо к костям —монстр уже почти готов

Теперь каждой кости нужно поставить в соответствие изображение части тела. Выбираем файл изображения и нажимаем на кнопку Set Parent.



Курсор приобретает новое очертание и мы можем кликнуть на ту кость к которой будет приложено данное изображение. Мы можем поворачивать (Rotate), перемещать (Translate) и масштабировать (Scale) наши изображения и кости, добиваясь правильного расположения согласно шаблону.



А выглядеть все должно в конечном итоге примерно так:



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

6. Оживление —IT'S ALIVE

Нажимаем на переключатель и переходим в режим анимации .
Каждый уважающий себя Франкенштейн должен уметь ходить. Выбираем в окне иерархии строку Animations, нажимаем на кнопку New Animation и создаем анимацию с именем walk.



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



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



Выделив весь первый кадр, скопируем его и переместим указатель на новое место временной шкалы (8 к примеру), куда и вставим этот кадр. Теперь у нас два одинаковых кадра на нулевом и на восьмом делении. Теперь нужно изменить кадр на восьмом делении так, будто тело пошевелилось и зафиксировать изменения.



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



Нажимаем на кнопку play (дергаем рубильник) и вот наш монстр оживает. Это еще не Disney но к уровню Машиных сказок мы уже приближаемся. В свойствах воспроизведения можно установить скорость и способ воспроизведения.



Теперь анимация готова, осталось только экспортировать ее в нужный нам формат.
Есть три типа экспорта: данные, изображения и видео. Первый тип включает в себя json и bin. В таком виде наша анимация передается в игровой проект с использованием Spine runtime — специального API для работы с анимацией Spine.
Для любителей хардкорной покадровой или gif анимации можно экспортировать проект, как последовательность кадров (jpeg, png) или записать все в формате gif. Также есть возможность представить анимацию, как видеозапись avi или QuickTime. Но все эти функции увы, только в полной платной версии (60$).

6. Управляем нашим монстром

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

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

Чтобы не быть голословным представляю свою зверушку на суд людской: (.jar и .exe). Запускать лучше из командной строки, играть стрелками.

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 22

    +1
    Классно, делал что то подобное на Flash:

    Во флеше делал анимацию персонажа, потом при помощи скрипта JSFL выгружал покадрово положение каждого видимого movieclip в xml.
      0
      Рад буду прочитать продолжение.
      PS С наступающим!
        +5
        Раз пост обзорный было бы интересно сравнить с существующими аналогами. Например с Anime Studio.
          +7
          ну как бы это не прямой аналог, Spine — это редактор ориентированный на экспорт в игровые движки, соотвественно там спрайтово-скелетная анимация и куча готовых библиотек для интеграции с движками — а Anime Studio ориентированна на векторную анимацию которую в игровой движок по простому можно засунуть разве, что спомощью Autodesk Scaleform
          0
          Прикольно, но горилла выглядит неестественно.
          Я бы еще добавил сгиб туловища при ходьбе — тогда было бы круто!
            0
            Согласен, у горных горилл очень подвижная поясница.
            0
            Очень привлекательная система! Я бы на вашем месте еще и видео с сайта добавил, оно просто хардкорное.
            Как вижу с популярными игровыми движками можно работать, что не может не радовать.
            esotericsoftware.com/spine-runtimes
            В общем всех вам благ, удачи в развитии софта. Надо будет показать заказчику, — у них как раз 2D проекты.
              +1
              Spine очень крутой. Для Unity есть еще SmoothMoves.
                +1
                Вот сравнение со Spine от их разработчика.
                0
                Я умудрился выпрыгнуть гориллой из игровой зоны и теперь она у меня парит в мировом эфире :)
                А вообще было бы здоров почитать продолжение про использование анимированного в Spine персонажа в игровом движке типа Unity.
                  0
                  Используем его в своём проекте (проект ещё в разработке). Вещь, несомненно, нужная, но не без косяков. Нестабильный, особенно ранние версии (нынешняя более-менее). Автор пытается сделать runtime библиотеки для 18 движков, включая Юнити, но к сожалению Юнити не основной, поэтому часть функцианала там отсутствует, да и баги долго правит.

                  Так же очень бесит то, что автор коммитит постоянно, а не по версиям. Вот написал что-то и тут же закоммитил, даже не проверяя на баги. Иногда приходится откатываться на старые версии. Лучше бы, конечно, делал как автор скажем 2dToolkit — тот выпускает бету, потом публичный релиз. Если разрабатываешь — то можешь поставить бету, если проект уже на стадии выпуска — то остаешься на старой релизной версии, чтобы не получить баги. Тут же состояние вечной беты, хотя последнее время вроде получше стало.

                  В редакторе тоже постоянные проблемы, сдвиги ключей анимации не работали, эвенты не работали, ещё что-то.

                  В общем штука полезная, но далеко не идеальная. Имейте это в виду. Если есть аналоги, хотелось бы о них послушать и сравнить (про SmoothMoves знаю).
                    0
                    Если автор пишет этот проект в одиночку, то его можно понять.
                      0
                      Не, их там минимум 2 (Nate и Shiu на форуме), по моему даже больше.
                    0
                    Опыт использования Spine мягко говоря отрицательный. Использовал во flash-проекте с библиотекой www.sammyjoeosborne.com/SpriterMC/
                    Глюки самого Spine:
                    — непонятное поведение при добавлении нового элемента в таймлайн
                    — жутко неудобный интерфейс — прокрутки таймлайна нет, позиционироваться в нужный кадр очень сложно.
                    — исходя из пункта выше, возникают ситуации, когда «промахнулся мимо кейфрейма — получил еще один кейфрейм»
                    — иногда вылеты или нечитаемость проекта после каких-то глюков. Правил текстовым редактором несколько раз файлы.
                    Глюки библиотеки:
                    — анимация не всегда корректно отображается.
                    — нет анимации по альфе (не работала у меня)
                    Итого — плюнул, и перешел на DragonBones
                      0
                      Опыт использования положительный, купили платную версию для работы со скинами. Сейчас spine работает в связке с cocos-2dx, делаем экшн.
                        +1
                        Такое можно сделать в Blender-е. В уроке арматура не использовалась, но ничто не мешает её добавить.
                        0
                        В Cocostudio тоже есть редактор скелетной анимации, только эта студия очень глючная; но с горем пополам можно работать.
                        А огромным плюсом есть полная интеграция с Cocos2dx.
                          0
                          А все ли правильно со сгибом передних лап? У гориллы они как у человека имеют локти назад.
                            0
                            www.assetstore.unity3d.com/#/content/14024 — вот какой-то аналог спина, если кто-то покупал отпишитесь как вам?
                              0
                              http://creature.kestrelmoon.com — еще один аналог спина, прислали письмо предлагают перейти к ним. Работа с деформациями по сетке сделана вроде неплохо, плюс есть движение по траекториям ( в спине пока такого нет ).
                                0
                                Spriter. Судя по видео довольно неплохая альтернатива Spine.

                                Так же в ассет сторе появилось 2 плагина которые позволяют импортить анимации из After Effect ( https://www.assetstore.unity3d.com/en/#!/content/44618 и https://www.assetstore.unity3d.com/en/#!/content/11132 ).

                                Кто пробовал что-из вышеперечисленного — отписыватесь в комментариях об опыте, не стесняйтесь.

                                Only users with full accounts can post comments. Log in, please.