Демонстрации Spine

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

Все демоверсии ниже — интерактивные и используют нашу среду выполнения spine-ts для WebGL. Узнайте, как мы используем среды выполнения Spine, рассмотрев исходный код каждой демонстрации.

Сравнение Spine и листов Sprite

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger!

Обычная анимация Sprite предполагает отдельное изображение для каждого кадра анимации, из-за чего возникают огромные листы Sprite. Каждая дополнительная анимация значительно увеличивает дисковое пространство, занимаемое игрой, и повышает требования к памяти, особенно при частоте кадров, необходимой для плавного воспроизведения. Из-за этого у дизайнеров быстро возникает огромный объем работы. Также страдает качество конечного продукта, поскольку приходится сокращать объем анимаций, чтобы соблюсти ограничения размера.

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

Сравните требования к памяти и дисковому пространству Spine и листа Sprite.

Скорость
 

Spine с покадровой анимацией

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

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

Переходы и наслоение

Smooth
Abrupt

В 2D-играх часто ощущается недостаток плавных переходов между кадрами изображений. В 3D-играх эти переходы вычисляются по ходу выполнения. Анимацию можно даже смешивать, например, ходьбу и бег. Если не использовать Spine, в двухмерной анимации смешение невозможно, а переходы, как правило, получаются «дерганные». Дизайнер может вручную создать кадры для всех возможных переходов, но даже это не помогает, если анимация прерывается во время воспроизведения.

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

Скорость
 

Деформация сетки

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

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

Удивительная графика для этой демонстрации любезно предоставлена Хвадоком (Hwadock, другой псевдоним — dugy). Читайте его на Twitter и страницах его блога.

Отображать кости
Отображать треугольники

Оболочки

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

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

Графику из данной демонстрации можно найти в пакете персонажей Персонажи 2D анимации для Unity.

Случайный порядок оболочек

Инверсная кинематика

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

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

Попробуйте сами! Потяните красные точки, чтобы придать мальчишке желаемую динамическую позу. Кнопки «Стрелять» и «Подпрыгуть», а также прицел накладываются поверх неподвижного изображения.

Прицеливание
Отображать кости

Ограничители траектории

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

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

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

Отображать кости и траектории

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

Передвигайте красные контрольные точки так, чтобы человечек затанцевал!

Отображать кости и траектории

Отсечение

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

Отображать треугольники

Ограничители трансформы

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

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

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

Отображать кости и траектории

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

Сдвиг вращения
 
Смешение преобразования