Программа spine что это

Содержание

Spine

Spine Essential — 69 долл. Spine Essential включает в себя все базовые возможности.
Spine Professional — 299 долл. Позволяет создавать более сложные анимации.
Spine Enterprise $2200 базовая цена +$269 на пользователя. Эта лицензия разрешает использование продукта Spine Professional определенным числом пользователей в течение одного года.
Сравнение версий

Последняяя версия — Spine v 3.8.99 (2020 г).

Назначение Spine — создание двухмерной анимации для игр.

Основной метод создания анимации — создание скелетной 2D анимации

Программа позволяет создавать анимации с использованием редактора, а также использовать эти анимации в играх с использованием Spine Runtime.

Программа идет с набором проектов. Также можно создать проект «с нуля».

Spine имеет два основных режима работы — режим настройки (Setup) и режим создания анимации (Animate).
Переключение между режимами — при щелчке по значку в левом верхнем углу окна программы.

Почему Spine так хорош?

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

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

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

Изображения могут быть окрашены путем установки цвета в свойствах вложения. Этот цвет нельзя изменить в анимации.
Настройка изображения или цвета слота также позволяет установить альфа (прозрачность). Установка альфа в 0 позволяет скрыть изображение.

Первым шагом в настройке скелета является введение каждого изображения в качестве «области прикрепления»
Прикрепление изображений к костям производится, используя Узлы изображений.
Также изображения могут быть перетащены непосредственно в кость или слот.
После создания всех вложений региона можно использовать инструменты «Масштаб», «Поворот» и «Перевести», чтобы собрать их в «позу настройки», которая представляет собой позу неанимированного скелета. Затем инструмент «Создать» можно использовать для создания костей и перемещения вложений в кости.

Режим анимации используется для разработки анимации.
Основной способ создания анимации в Spine — использование так называемых костей. Кости служат фрагментами анимируемого объекта. Путем перемещения костей, их вращения (поворота) создается «оживление» всего объекта.
.
Анимация в Spine осуществляется путем прикрепления изображений к костям, а затем анимации костей. Это называется скелетной анимацией и имеет множество преимуществ по сравнению с традиционной покадровой анимацией, а именно — анимация имеет меньший размер (сохраняются только данные о костях), требуется меньше художественных ресурсов, возможность создания плавной анимации, анимации можно воспроизводить в замедленном режиме без потери качества.

Spine за 10 минут

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

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

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

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

Применяемые инструменты
Инструменты выбора (использование интеллектуальной системы выбора). Очистка выбора. Выбор группы.
Инструменты преобразования — Rotate, Translate, Scale и Shear
Оси Local, Parent и World определяют числовые значения для поворота и перемещения. Копирование преобразований костей.
Инструмент поворота — используется для вращения между 0 и 360 градусами. Можно ограничить поворот на 15 градусов.
Определите пути, используя составные сплайны Безье.
Контуры облегчают сложные перемещения и обеспечивают расширенную оснастку за счет интуитивного управления большим количеством костей.

Использование деформации сетки.

Использование Шкалы времени и ключевых кадров.
Шкала времени позволяет выполнить точную настройку времени всей анимации и отдельных ее частей.
Анимация в Spine выполняется с помощью «ключевых кадров», которые определяют начальные и конечные значения перехода. Ключевые кадры создаются для поворота, перемещения или масштабирования.

Скины (Skins) позволяют повторно использовать все кости и анимации для скелета с другим набором вложений.

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

Интерфейс Spine может видоизменяться путем выбора различных видов — вид «Анимация», Аудио просмотр, график, контур, воспроизведение, дерево, предварительный просмотр и др.

Импорт.
Spine может импортировать данные из других проектов Spine, позволяя объединять проекты. Spine также может импортировать данные (скелет или анимацию) из других программ (в форматах, которые поддерживаются Spine).
Spine может импортировать данные в формате JSON (формат Spine) или двоичных форматах, которые он экспортирует. Это обеспечивает путь для переноса данных из других программ в Spine, например из Photoshop или After Effects .

Экспорт. Экспорт возможен для создания селетной анимации и для создания спрайтовой аниамции. Анимация спрайта не такая гладкая, как анимация с использованием скелета.
Spine может экспортировать числовые данные для скелетной анимации в ваших играх. Он также может экспортировать последовательности видео и изображений для традиционной спрайтовой анимации.
В дополнение к данным скелета, экспортированным из Spine, среде выполнения также требуется атлас текстур (также известный как лист спрайтов), который содержит области текстуры для рисования.

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

Spine Runtimes официально поддерживает 19 игровых инструментов и 7 языков программирования. Кроме того, доступно более 40 сторонних сред.
Среды выполнения Spine представляют собой библиотеки, позволяющие загружать набор инструментов и визуализировать анимацию в ваших играх.
Официальные среды выполнения доступны на GitHub.
Пробная версия Spine включает много примеров проектов, позволяющих экспортировать данные. Это позволяет оценить работу сред выполнения до приобретения лицензии Spine.
Подробнее о средах

Похожие программы: DragonBones
Последнее обновление: май 2019 г.

Источник: htmleditors.ru

Как начать анимировать в 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 — программа для создания двухмерной скелетной анимации которая поддерживает 7 языков программирования, интегрируется в 19 игровых движков, отлично подходит для портретной анимации и анимации гибких текстур (флагов, тканей, волос, шлангов и т.д.) а также для рескиннинга.
Инструменты Spine позволяют аниматору свободно манипулировать формами персонажа, за счет изгибов и деформации изображений при помощи сеток, весов, а также прикреплять к анимации визуальные эффекты.

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

Программа активно набирает популярность, становится частью пайплайна многих игровых студий, таких как: Playrix, Magic Design Studios, Red Hook Studios, Daedalic Entertainment Их работы можно посмотреть на сайте Spine.

Для тех, кто знаком с 3Д риггингом освоение программы не составит труда — принцип работы с двухмерным скелетом в Spine во многом похож на работу с трехмерным скелетом: внутри персонажа строится иерархия костей, к которым впоследствии (через распределение весов по точкам) крепятся меши.

Статья «Полезные фишки для работы в Spine» будет интересна как новым пользователям программы, так и продвинутым — мы расскажем от А до Я про пайплайн работы и поделимся полезными инструментами.

Импорт из фотошопа в spine (если на руках есть готовый исходник).

Чтобы экспортировать заготовки из Photoshop в Spine нужно использовать скрипт «Photoshop to Spine», который находится в установочной папке Spine (папка Scripts → папка Photoshop). Данный скрипт позволяет экспортировать слои в png формате и автоматически собирает все слои в единый файл.

Чтобы подгрузить скрипт в фотошопе: File → Scripts → Browse → выберите «Photoshop to Spine» → нажмите OK для экспорта.

По итогу вы получаете папку с картинками и файл с информацией.

Для импорта в Spine: Import Data → выбираем нужный файл JSON → выбираем «создать новый скелет» → Import. После чего ваш персонаж готов к работе!

Таймкод: 34:00 — 36:11

Разбор двухмерного рига: кости, сетка и весы.

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

Таймкод: 36:15 — 37:35

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

Разбор двухмерного рига: констрейны.

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

IK констрейн позволяет автоматически подгибать/растягивать ноги в коленях, при перемещении контрола таза и ступни.

IK констрейн можно отключать передвигая ползунок Mix

Таймкод: 1:25:00 — 1:25:37

Switch FK/IK можно сделать также через анимацию этого ползунка.

Таймкод: 1:33:00 — 1:34:00

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

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

Таймкод: 37:35 — 39:00

Для анимации взаимодействия персонажа с предметом (берет, передвигает, кидает, кладет и т.д.) можно использовать transfer констрейн.

Таймкод: 1:34:00 — 1:35:50

Разбор двухмерного рига: глаза и ноги.

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

По такому же принципу можно менять положение ног: при изменении ракурса следует активировать дополнительную текстуру.

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

Относительно недавно на кикстартере завершился сбор денег на новый инструмент для игроделов, но на Хабре это не было освещено. 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). Запускать лучше из командной строки, играть стрелками.

Spine
анимация
2d игры
инди всех стран соединяйтесь

Источник: habr.com

Как начать анимировать в Spine и зарабатывать на этом: рекомендации и примеры для новичков

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