Первая страница

Spriter

анимирование персонажа
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О программе

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

Spriter

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

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

Теперь можно открывать 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, на английском.

📺 Введение в Spriter на русском.
📺 Как работать в Spriter на русском.
📺 Серия роликов по работе в Spriter на русском.
📺 Как добавить проект Spriter в Construct 2 инструкция на русском.


Ещё конструкторы игр, викторин и приложений вообще для веба:
ActivePresenter – для интерактивных анимационных презентаций, тестов и скринкастов
Articulate Storyline – конструирование онлайновых презентаций, викторин и обучающих курсов
Clickteam Fusion – конструктор 2D-игр под различные платформы
Construct 2 – игровой движок для создания 2D-игр и публикации их в HTML5
GDevelop – игровой движок c редактором в вебе, на мобильных и ПК платформах
Google Web Designer – конструктор HTML5 баннеров и приложений
Hippani Animator – удобная анимационная студия с экспортом в HTML, video, анимированный gif
Saola Animate – программа для быстрого и удобного создания анимации в HTML5
Scratch – визуальный язык программирования и редактор кода
Stencyl – игровой движок для создания 2D-игр и публикации их в веб
TurboWarp – продвинутый форк Scratch для создания HTML5 игр и приложений
WYSIWYG Web Builder – мощный визуальный конструктор сайтов
Большой список игровых движков – с информацией об используемых языках программирования и возможностях экспорта
Новости
От рекламы не скрыться
Нейросеть в помощь
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь
Поделки - видеоуроки от специалистов