Spriter

О программе

Spriter — это программа, в которой удобно и быстро создавать анимации объектов для дальнейшего использования в игровых движках. Особенно удобно создавать костные (скелетные) анимации. Есть таймлайн с ключевыми кадрами и предпросмотром. Есть иерархическое дерево объектов. При желании можно экспортировать проект в анимированный GIF или в набор PNG изображений.

Общий процесс создания анимаций

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

Теперь можно открывать Spriter и создавать новый проект, выбрав при этом папку с картинками. Изображения появятся на панели Files в верней правой области интерфейса программы. Оттуда перетаскивайте картинки на холст, компануя из них цельный образ. Распределить части друг относительно друга можно с помощью панели Z-order, расположенной в верхней левой области интерфейса программы.

Уже можно приступать к формированию скелета из костей. На холсте наметьтесь мышкой в какую-то нижнюю точку туловища (родительской части всего персонажа) и при зажатой клавише ALT нажав ЛКП потяните мышь вдоль туловища. Отпустите. Кость создана. Широкий ее конец является точкой, вокруг которой возможен поворот, а за тонкий ее конец можно вращать кость. Теперь выделите эту кость и от его тонкого конца протяните вторую кость для головы. Потом снова выделите родительскую кость туловища и протяните первую кость для руки от плеча до локтя... А вот для создания следующей кости от локтя до кисти надо сначала выделить плечевую кость, которая станет родительской для локтевой.

Кости есть, а привязки их к частям персонажа нет. Привязка осуществляется на панели Hierarchy в верхней левой области интерфейса программы. Эта панель делит одно и то же место в закладкой Z-order. Тут вы должны перетаскивать узел картинки на узел нужной кости, вследствии чего кость становится родительским узлом для картинки.

Наконец, можно преступить к анимации. Таймлайн внизу размечен миллисекундами (1/1000 долями секунды). Ниже этой разметки список картинок и костей (и картинки, и кости можно анимировать по отдельности). Если этот список не виден, то ухватитесь за черную полоску под главным холстом и потяните вверх.
В Spriter в одном проекте можно иметь несколько разных именованных анимаций (чтобы потом по имени вызывать ту или иную анимацию уже в игровом движке). Панель с анимациями находится внизу справа над таймлайном. По умолчанию есть анимация NewAnimation. Можно оставить ее как есть, это будет анимация неподвижного объекта. На этой панели можно создать еще одну анимацию и выделить ее. Теперь переместите ползунок времени в нужное место, например на 500 на таймлайне, и на холсте подвигайте кости/картинки, как вам нужно. Запустите проигрывание по кнопке слева. Вы увидите, что анимация доходит до 500 и потом до 1000 проигрывается в обратном порядке. Это удобно, не надо ставить ключевые кадры на отметке 1000. По умолчанию анимация длится 1 секунду, но ее продолжительность можно изменить в поле над таймлайном – 1000 исправить на другое значение.

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

Кроме костной анимации в редакторе присутствует, так называемая, сетка. Еще для этого есть термин Mesh Deforming. Что за зверь? Вы можете разметить изображение на ячейки с помощью сетки и потянув за узел сетки будете деформировать само изображение, cоответственно – анимировать. Как реализовать: перед тем, как перетягивать картинку на холст, внизу панели Files в выпадающем списке Drag new imes as выберите skins (experimental). Потом создайте создайте первую кость и привяжите ее к изображению. Теперь совершите двойной клик на изображении. Появятся стрелочки по бокам – кликая на эти стрелочки создайте сетку. За появившиеся синие и белые узлы сетки можно тянуть и деформировать изображение.

Импорт в Construct 2

Чем подход Spriter + Construct 2 лучше того подхода к анимации, которая практикуется в этом конструкторе по умолчанию. Тем, что, благодаря плагину вы не будете создавать множество фреймов для анимации спрайта. Значит, в экспорте не будет великого множества файлов изображений, каждый из которых представляет отдельный фрейм. Вместо этого анимацией будет руководить Javascript. Анимация будет максимально плавная.

Для того, чтобы в Construct 2 получить анимации, созданные в Spriter, надо сначала установить плагин в Construct 2 и правильно экспортировать проект из Spriter:

Установка плагина в Consruct 2:

• Скачать плагин со СТРАНИЦЫ
• Изменить расширение скачанного файла с c2addon на zip
• Распаковать архив
• Скопировать папку scml с тремя js-скриптами в папку Construct 2\exporters\html5\plugins\

Экспорт проекта из Spriter:

• Создайте анимации в Spriter
• Меню: File > Other File Actions > Custom Save Options > отметьте крестиками следующие позиции:
  • Prettify XML
  • Prettify Json
  • Save sprite object/frame data in obj_info tags
  • Save initial animation position as absolute values
  • Make object names in obj_info tags unique to the entire file
• Не забудьте нажать кнопку [Apply]
• Сохраните проект в формате SCML
• Сохраните проект в JSON с тем же именем в той же папке

Экспорт произведен. Теперь откройте Layout в Construct 2. Просто перетащите мышкой файл с расширением scml на сцену. Выберите Event sheet для реализации логики нового объекта. Автоматически на панели Projects будет образована папка со спрайтами картинок, участвующих в анимациях. Эти картинки будут помещены в контейнер объекта типа Scml. Автоматически в Event sheet будет произведена инициализация объекта. С этого момента в Событиях можно назначать Действие, связанное с объектом типа Scml, например, назначать ему проигрывание той или иной анимации.

Кстати, сами спрайты с картинками можно перетащить за пределы сцены. А вот объект типа Scml надо на сцене оставить – именно в этом месте будет появляться персонаж вне зависимости от того, где находятся его составляющие.

Скачать, почитать, посмотреть

📥 Портабельная сборка Spriter (пароль для разархивирования newart.ru). Рядом с папкой программы есть плагин для Construct 2 и инструкция по улучшению работы программы.
📥 Инсталляционные Spriter с сайта производителя. Для Windows и Ubuntu.

📗 Руководство пользователя Spriter online, на английском.