Spine — это гораздо больше, чем обычная двухмерная анимация. Демонстрации ниже показывают, как дизайнеры, аниматоры и программисты могут использовать обширные возможности Spine для создания потрясающих игр.
Все демоверсии ниже — интерактивные и используют нашу среду выполнения spine-ts для WebGL. Узнайте, как мы используем среды выполнения Spine, рассмотрев исходный код каждой демонстрации.
Обычная анимация Sprite предполагает отдельное изображение для каждого кадра анимации, из-за чего возникают огромные листы Sprite. Каждая дополнительная анимация значительно увеличивает дисковое пространство, занимаемое игрой, и повышает требования к памяти, особенно при частоте кадров, необходимой для плавного воспроизведения. Из-за этого у дизайнеров быстро возникает огромный объем работы. Также страдает качество конечного продукта, поскольку приходится сокращать объем анимаций, чтобы соблюсти ограничения размера.
В Spine хранятся только данные костей, данные анимации и один набор повторно использующихся отдельных изображений. Это позволяет оживить игры, наполнив их множеством уникальных движущихся изображений. Кроме того, анимация Spine интерполируется, благодаря чему воспроизведение выглядит идеально гладко независимо от частоты кадров.
Сравните требования к памяти и дисковому пространству Spine и листа Sprite.
Хотя, по большому счету, Spine избавляет от необходимости в традиционной покадровой анимации, изображения все равно можно менять, если есть такая необходимость — например, изменять ракурс туловища или хлопающего крыла, мимику лица или блеск выстрела.
Ячейки, наращения и порядок рисования, предусмотренные в Spine, позволяют легко интегрировать покадровую анимацию в остальном полностью динамические изображения. Более того, Spine позволяет манипулировать покадровыми изображениями, как видно на этой демонстрации, где изменяется размер взрывающейся головы пришельца.
В 2D-играх часто ощущается недостаток плавных переходов между кадрами изображений. В 3D-играх эти переходы вычисляются по ходу выполнения. Анимацию можно даже смешивать, например, ходьбу и бег. Если не использовать Spine, в двухмерной анимации смешение невозможно, а переходы, как правило, получаются «дерганные». Дизайнер может вручную создать кадры для всех возможных переходов, но даже это не помогает, если анимация прерывается во время воспроизведения.
Spine привносит преимущества 3D в двухмерную анимацию. Изображения в среде выполнения Spine плавно и динамично переходят от одного кадра к другому, что придает персонажам вид естественного движения. Наложение позволяет одним изображениям отображаться сверху других, например, показывать выстрел, пока персонаж бежит, или заставлять персонаж все больше ковылять при ходьбе по мере нанесения ему ранений.
Персонаж, созданный в Spine из жестких двухмерных изображений, уже дает отличные результаты, как видно на примере мальчишки выше. Однако, чтобы придать вашим героям еще более естественный вид, Spine предлагает дополнительные возможности из мира 3D-анимации — сетки и веса. Благодаря сеткам, изображения приобретают гибкость и могут гнуться и деформироваться так, как вам нужно. Веса привязывают сетки к костям так, что, в зависимости от движения костей, автоматически деформируются и изображения.
Сетки также иногда увеличивают скорость работы игры, поскольку отпадает необходимость рисовать прозрачные части изображений, а значит, использовать заполнение. Это особенно важно для мобильных устройств.
Удивительная графика для этой демонстрации любезно предоставлена Хвадоком (Hwadock, другой псевдоним — dugy). Читайте его на Twitter и страницах его блога.
Функция оболочек Spine прекрасно подходит, чтобы изменять отдельные детали персонажей или разнообразить героев, сводя при этом к минимуму рабочую нагрузку. Благодаря оболочкам, анимацию нужно делать лишь один раз. После этого можно присваивать скелету разный внешний вид, повторно используя при этом уже готовую наработку. Программа Spine универсальна, так как среды выполнения позволяют сочетать части различных оболочек, охватывая тем самым все потребности индивидуальной настройки.
Оболочки позволяют игрокам привнести нечто свое в мир игры: они могут придать аватарам неповторимый вид, поменять их одежду, оружие и другие принадлежности. Оболочки также расширяют возможности использования анимации: можно смешивать и подбирать графику для злодеев, предметов и других объектов игры, без особых усилий увеличивая разнообразие.
Графику из данной демонстрации можно найти в пакете персонажей Персонажи 2D анимации для Unity.
Поскольку Spine поддерживает инверсную кинематику, движения выглядят реалистично и динамично. Кроме того, становится возможной продвинутая оснастка, когда сложные позы легко контролируются небольшим количеством костей.
Поскольку в Spine не используется запекание и плотинг, ИК проявляет свои преимущества со всей силой. При динамическом позиционировании костей в среде выполнения, ограничители ИК позволяют герою легко реагировать на окружающую среду, например, целиться во врагов, изменять положение ног при преодолении неровностей местности и делать многое другое. В этой демонстрации мальчишка балансирует на контролируемом пользователем ховерборде с одновременным воспроизведением анимации.
Попробуйте сами! Потяните красные точки, чтобы придать мальчишке желаемую динамическую позу. Кнопки «Стрелять» и «Подпрыгуть», а также прицел накладываются поверх неподвижного изображения.
When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.
The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.
Часто определенная часть персонажа двигается по замкнутой или незамкнутой траектории. Вместо того чтобы вручную вводить ключи для движения, можно использовать предусмотренные в Spine ограничители, чтобы кости автоматически двигались по нужной траектории. Составная траектория Безье включает ряд взаимосвязанных точек, которые позволяют изгибать траекторию и придавать ей необходимую форму. Траектория сама по себе может анимироваться и даже быть привязана весами к костям, чтобы она автоматически деформировалась по мере движения костей.
На этой демонстрации лозообразная сетка привязана к костям, которые ограничены траекторией. Чем больше вершин в сетке, тем плавнее она сгибается.
Ограничители траектории также можно очень эффектно использовать в среде выполнения. Потяните красные контрольные точки и вы увидите, как послушно будет расти лоза по новой динамически изменяемой траектории!
Ограничители траектории делают возможной мощную оснастку, что наглядно видно на примере человечка на этой демонстрации. Сетки рук и ног привязаны ко множеству мелких костей, которые ограничены так, что перемещаются по простым траекториям конечностей. Затем траектории весами привязываются к костям, которые можно передвигать для манипуляции конечностями. Так множество костей можно контролировать при помощи всего лишь нескольких. Это не только облегчает анимацию. В среде выполнения нужно откорректировать лишь несколько костей для придания динамической позы.
Передвигайте красные контрольные точки так, чтобы человечек затанцевал!
Иногда часть анимации нужно скрыть, как в этом примере, где мальчишка появляется из портала. Отсечение, достигаемое при помощи ограничения визуализации полигональной областью, очень удобно в подобных случаях. Отображаются только те части скелета, которые находятся в заранее заданной области анимации. Благодаря этому становятся возможны многие эффекты, такие как окна, освещение и многое другое. Кроме того, отсечение может применяться для скрытия только некоторых частей скелета. Примером такой анимации может служить кадр, когда герой проходит через рентген-машину.
Анимация сложных скелетов со множеством взаимозависимых деталей может быть утомительной задачей. Ограничители трансформы, предусмотренные в Spine, избавляют от таких затруднений, делая доступной более эффективную оснастку. Ограничивая трансформы одной кости трансформой другой, остается только анимировать одну кость, поскольку остальные скорректируются автоматически. Хотя на первый взгляд это кажется очень простым приемом, расширенная оснастка оказывается очень полезной для автоматизации поведения скелета при придании ему определенной позы.
Ограничители трансформы также отлично подходят для механического оборудования, такого как танк на этой демонстрации. Вместо того чтобы вводить ключи для каждого отдельного колеса, анимируются одно колесо, тогда как движение других ограничивается трансформой. Сдвиг и смешивание могут придать «индивидуальность» ограниченным частям.
Гусеницы танка двигаются по кругу с использованием ограничителя траектории. Гусеницы невозможно было бы анимировать без траекторий. Траектория привязана весами к двум колесам, чтобы она автоматически изгибалась по мере движения колес вверх-вниз.
На этой демонстрации вращение двух меньших колес ограничено вращением большого колеса. Кроме того, преобразование большого колеса ограничено, поэтому оно сохраняет свое положение между двумя меньшими колесами.
