Скелетная анимация спрайтов с использованием Spine

Author: Mark Alexander
Перевод: Dmi7ry
Оригинал здесь

Version: GameMaker: Studio 1.3+

Создание натуралистичных спрайтов с помощью скелетной анимации — очень мощный инструмент. Идея заключается в том, что вы создаёте базовый «скелет», а затем двигаете «кости», чтобы создавать позы. Затем эти позы могут быть превращены в ключевые кадры анимации, где позиции костей интерполируется между каждым кадром анимации, что создаёт гладкую и очень естественно выглядящую анимацию. На эту анимацию можно натянуть любую «шкурку» (то есть текстуру) и отображать на экране, как любой спрайт.

GameMaker: Studio теперь поддерживает этот тип анимации спрайтов — можно импортировать файлы, созданные с помощью программы Spine, которая является фантастическим инструментом для создания скелетной анимации (вы можете узнать больше о Spine здесь ). Обратите внимание, что Spine — это очень мощная программа с огромными возможностями и для того, чтобы объяснить, как это всё работает, одной короткой статьи совершенно не достаточно! Однако, мы дадим краткий обзор некоторых ключевых моментов, которые связаны с реализацией скелетной анимации в Gamemaker: Studio.

ПРИМЕЧАНИЕ: Spine имеет trial-версию, которая доступна для скачивания здесь: http://esotericsoftware.com/spine-download 

Обзор Spine

Spine позволяет создать «скелет», а затем менять его позу для создания анимации. Скелет состоит из «костей», которые могут быть соединены и перемещены относительно друг друга в установленный период времени, а на окончательную анимацию может быть натянута «шкурка» (то есть текстура) для финальной анимации. Для добавления в ваш проект GameMaker: Studio, эта анимация может быть экспортирована или в виде стрипа растрового спрайта, или в виде Spine JSON файла.

Spine_MainScreen

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

Например, вы можете иметь один спрайт и создать несколько анимаций для него (например, набор анимаций из ходьбы, бега и прыжков). Можно создать несколько скинов для вашей анимации, так что один скелет может быть использован для разных персонажей (с теми же движениями, конечно), и вы также можете присоединять к своим спрайтам «вложения», чтобы в дальнейшем менять их внешний вид. Также все эти вещи доступны для использования в GameMaker: Studio при импорте JSON спрайтов.

ПРИМЕЧАНИЕ: вы можете найти дополнительную документацию о том, как использовать Spine, здесь: http://esotericsoftware.com/spine-documentation/

Основы

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

Также вам нужно обратить внимание на то, где находится центр вашей анимации (то есть её основа, корень, root). Центр анимации — это точка, относительно которой Spine анимация будет закреплена в мировом пространстве. При импорте вашего спрайта в GameMaker: Studio, она будет переведена как координаты центра спрайта (orign), которые нельзя редактировать в этом типе спрайта. Большинство ваших расчетов для движущихся частей скелета также будут зависеть от этой точки.

 Spine_Root

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

Также к вашим Spine спрайтам можно прикрепить «слоты» — это точки, где вы можете отображать отдельное изображение, который не имеет костей. Оно будет перемещаться вместе с родительской костью, что позволит вам добавить вашим анимациям несколько под-изображений, для крепления в пределах одного спрайта. Эти прикрепляемые слоты также должны быть названы в соответствии с изображениями, которые они содержат, так как эти имена будут использоваться в GameMaker: Studio для изменения изображения слота во время игры.

Импорт спрайта Spine

При экспорте спрайта со скелетной анимацией из Spine как JSON, вы на самом деле создадите три отдельных файла. Основной JSON, который содержит все данные костей и анимации, файл атласа, который содержит данные о том, как упакованы текстуры и файл PNG, который содержит непосредственно текстурный атлас. GameMaker: Studio требуются все три файла для создания вашего Spine спрайта, поэтому при импорте они все должны быть в той же папке.

Spine_Import

Добавление таких спрайтов в GameMaker: Studio практически идентично добавлению обычных растровых изображений: нужно создать новый спрайт, и вызвать обычный диалог загрузки спрайта. Перед тем, как выбрать место, в которое вы сохранили ваши spine-спрайты, нужно убедиться, что тип файла в нижней части выбран *.json и далее просто выбрать спрайт, который вы хотите импортировать.

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

ПРИМЕЧАНИЕ: В связи со сложностью скелетных анимаций, полученное изображение, показанное в редакторе спрайта, не предназначено для точного представления анимации, а всего лишь даёт вам простой образ, представляющий анимацию, для визуализации в редакторе комнаты.

Использование спрайтов Spine в GameMaker

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

Spine_GMSprites

И всё же основной смысл в использовании Spine — это создание спрайта со скелетной анимацией с несколькими позами и скинами, что достаточно сильно отличается от обычного растрового спрайта. Для этого GameMaker: Studio имеет множество новых функций skeleton_*, а также новое событие «Animation Update» (обновление анимации) событие для поддержки такого типа спрайтов. Далее в этой статье будут рассмотрены эти функции и описано, что они делают, но вы можете найти более полное объяснение каждой из них в документации.

Анимации

skeleton_animation_get()

skeleton_animation_set(name)

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

skeleton_animation_get_ext(track)

skeleton_animation_set_ext(name, track)

Это похоже на предыдущие функции, но немного сложнее. Spine позволяет вам задать костную анимацию для части скелета, а затем создать отдельные наборы анимации для этих частей и проигрывать их вместе. Каждая анимация присвоена треку, и при этом track0 всегда является основой, анимацией по умолчанию. Таким образом, вы можете иметь, например, фигуру с присвоенной ей анимацией «ходьба» и эта анимация влияет только на ноги. Далее вы можете иметь различные другие анимации (где перемещаются, например, только руки, или голова, или верхняя часть туловища и т.д.) и назначить одну из них на трек 1, используя эти функции. И GameMaker: Studio будет играть обе эти анимации вместе.

skeleton_animation_mix

Эта маленькая функция, возможно, одна из наиболее важных, когда дело касается окончательного внешнего вида вашего импортированного спрайта. Вы можете изменить анимацию в любое время с помощью упомянутой выше функции skeleton_animation_set(), но при этом image_index будет сброшен в 0, что может сделать «скачок» при переходе, так как одна поза меняется на другую. Для растровых спрайтов это вполне ожидаемо и может быть даже желательным, но со скелетной анимацией спрайтов это выглядит странно и багнуто. Однако это можно исправить это с помощью функции skeleton_animation_mix(), которая будет интерполировать данные наборов анимаций, чтобы они плавно перетекали друг в друга естественным образом.Например, вы можете установить смешивание вашей анимации «бег» в анимацию «прыжок», затем установить следующее смешивание — теперь анимацию «прыжок» в анимацию «бег» — и теперь ваш спрайт будет плавно анимироваться между двумя этими наборами естественным образом.

Скины

skeleton_skin_get()

skeleton_skin_set(skinname)

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

Spine_TexturePacker

Прикрепления

skeleton_attachment_get()

skeleton_attachment_set(slotname, imagename)

skeleton_attachment_create(imagename, sprite, ind, xo, yo, xs, ys, rot);

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

Отображение

skeleton_collision_draw_set(flag)

draw_skeleton_collision(sprite, animname, image_index, x, y, xscale, yscale, rot, colour)

draw_skeleton(sprite, animname, skinname, image_index, x, y, xscale, yscale, rot, colour, alpha)

Обычно для рисования спрайта со скелетной анимацией используется функция draw_sprite, но бывают случаи, когда вы можете захотеть рисовать какие-то дополнительные вещи, либо только один кадр анимации (например, для экрана паузы, специального эффекта и т.д). Почему были добавлены эти функции. Первая из них просто задаёт, нужно ли отображать данные столкновения или нет. Если флаг установлен в true, то вы увидите ограничивающий прямоугольник и точную маску, нарисованную на спрайт, на экране (эти данные задаются при создании спрайта в Spine). Вторая функция при этом позволяет вам рисовать данные столкновения для отдельного кадра любой анимации.

Spine_Masks

Заключение

Исходя из написанного выше, вы можете понять, что скелетная анимация — это невероятно мощный инструмент. Это позволяет получить естественные анимации с минимальными усилиями, и (спасибо функции смешивания) эти анимации плавно перетекают друг в друга, чтобы пользователи получали только положительный опыт в ваших играх. Функции скинов и фиксации, доступные в GameMaker: Studio также означают, что вы можете упростить создание нескольких спрайтов из одного источника, и также позволяют игроку настроить их прямо во время выполнения игры. Очевидно, что это система не применима ко всем играм, но если вы проверите веб-сайт Spine и демо, вы увидите, что это на удивление универсально и определённо стоит времени и усилий, необходимые на создание спрайта и его импорта в GameMaker: Studio.