Урок по анимации в Spriter Pro. Экспорт в Construct 2.

другие уроки, мануалы, советы по Construct 2

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 25 апр 2017, 19:55

Урок по анимации в Spriter Pro.


Изображение

Spriter pro – программа для создания костной анимации с возможностью экспорта сделанной анимации в Construct2.
Возможности:
Создание программной анимации и экспорт ее в Construct2
Костная прямая и обратная кинематика
Плавный переход одной анимации в другую
Настройка скорости движения с помощью кривых
Обычная анимация
Character map (кастомизация персонажей, можно менять шкурки - управляя внешним видом персонажа в Construct 2)
Skins mode (можно гнуть и деформировать спрайты)
Звуковые эффекты (использование триггеров в Construct 2 для воспроизведения звукового эффекта - тонкая синхронизация звука и анимации)
Onion Skin (Луковая шелуха) позволяет калькировать кейфреймы, отображаются в виде полупрозрачного шлейфа (чем далее кадр от ключевого кадра, тем прозрачнее шлейф)
Есть обычный экспорт в виде секвенции кадров, качественный экспорт в .gif, может создавать спрайтшиты.
Создание в спрайтере маски коллизии и точки действия, с которыми в дальнейшем можно взаимодействовать в Construct2

В результате урока у вас должна получится вот такая перодевалка персонажа
Исходник спрайтера + части тела
anim_gadget.rar
(327.42 КБ) Скачиваний: 245



Официальный сайт
Спрайтер в Стиме

Плагин спрайтера для C2 можно скачать здесь

 Интерфейс программы, общие сведения, алгоритм работы с костной анимацией, горячие клавиши
Рассмотрим создание анимации, экспорт в C2, функцию Character map. Создание переодевалки персонажа. Управление анимацией в C2.

Spriter pro – программа для создания костной анимации, представляет особенный интерес для девелопера работающего в C2, так как позволяет использовать программную анимацию в своих проектах. Аналог: Spine 2d, Dragon Bones, Synfig Studio.
По сути вы используете только один раз загруженные руки, ноги, головы - различные части вашего персонажа, а сама анимация описана в xml/json. Это позволяет создавать качественные, разнообразные анимации, использовать большое количество различных курток, броников, оружия и прочего барахла которое вы можете менять программно в Constract 2 (та самая функция character map).
Например в результате пары событий можно сделать вот такую переодевалку персонажа.

Если бы я отрисовывал все эти анимации вручную, (то есть на каждую новую одежку новая анимация)
Изображение
и загружал в виде секвенции png кадров, мой бы проект весил бы достаточно много. А используя спрайтер я сильно облегчаю свое приложение (я тестировал только в вебе, как он ведет себя с мобилками я пока не экспериментировал).

В этом уроке мы разберем основные моменты работы в этой программе.

Интерфейс программы:

Откройте Spriter pro
File -----> New project
Появится окно в котором вам предложат выбрать папку вашего проекта.
В этой папке должны находится спрайты. Спрайты могут лежать в отдельных папках (например, в отдельной папке лежат все туловища, в другой головы итд), главное чтобы все они лежали в главной папке вашего проекта.
Для того чтобы начать делать анимацию нам надо знать:
Изображение
Сохранение проекта:
- Сохранить
- Сохранить как (понадобится в дальнейшем при экспорте в C2)
- Сохранить новую версию (очень удобно, сохраняет ваш проект в виде nameproject_000.scml nameproject_001.scml nameproject_002.scml итд
Очень удобно так как позволяет не пересохранять каждый раз ваш проект под новым именем. Например, вы не уверены в последствии ваших дальнейших действий для анимации, вы сохраняете новую версию и экспериментируете. Если что то пошло не так вы сможете вернуться к прошлой версии.
Проект сохраняется в формате .scml
Настройка рабочего поля – позволяет вам изменить цвет рабочего поля (необходимо в том случае если ваш персонаж сливается с рабочим полем)
Слева, две вкладки:
Z- order – расположение спрайтов по глубине. Как бы слои.
Иерархия – в этой вкладке настраиваются кости, привязываются к ним спрайты, определяются дочерние и родительские кости. Все делается перетаскивание одних элементов на другие, но лучше использовать горячие клавиши.
Справа, вы видите окошко с вашими объектами – спрайтами.
Ниже список с вашими персонажами (entity) и их анимации. Давайте нормальные названия вашим анимациям, например: run, walk, idle итд. Это необходимо, так как вы будете обращаться в С2 к этим анимациям по этим именам.
Таймлайн – в данном случае не по кадрам как во флеше, а по времени в миллисекундах. В принципе обычный таймлайн. Так же ставятся ключевые кадры, кейфреймы.
Изображение
Все окошки можно перетаскивать, настраивая удобное вам расположение.

Теперь рассмотрим основные горячие клавиши, которые сильно облегчат вам жизнь:

клавиша 1 – перескакиваете на предыдущий кейфрейм
2 – перескакиваете на следующий кейфрейм
3 – перескакиваете на первый кейфрейм
(вручную очень неудобно двигать красную микроскопическую линию на таймлайне чтобы попасть в нужный кейфрейм, а делать это приходится постоянно)
4 – воспроизведение / остановка анимации

ALT + левая кнопка мыши – сделать кость
Зажать B и нажать один раз на спрайт – привязать кость к спрайту.
Ctrl + shift + alt + пробел – возврат увеличенного/ уменьшенного рабочего поля к его исходному состоянию.
Ctrl + стрелки вверх/вниз – перемещение спрайта по оси Z (то есть выше ниже относительно других объектов, как бы перемещая по слоям)
Колесо мыши - зум

С зажатым пробелом можем двигать рабочее поле

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

Теперь рассмотрим алгоритм создания анимации.
Будем считать что вы уже отрисовали либо скачали уже подготовленного к анимации персонажа. Если у вас нет необходимых спрайтов вы можете скачать с официального сайта спрайтера пак с тестовым персом (вкладка help - download example character)

1) Перетащите ваши спрайты на рабочее поле
2) Расположите их как надо относительно друг друга и по оси Z
3) Зажав ALT создайте кости.
Логика такая: вы создаете вначале родительскую кость (она родительская так как она сможет влиять на дочерние, а
дочерние на родительские нет. То есть родительская может вращать дочернюю, а дочерняя родительскую уже нет.)
Чтобы сделать дочернюю кость щелкните на будущую родительскую кость – она выделится, теперь зажимайте ALT и
создавайте дочернюю кость.
Изображение
4) Структура скелета вашего персонажа зависит от сложности вашего персонажа
5) Посмотрите на скриншот кости предплечья являются дочерними по отношению к кости позвоночника.
6) Структуру костей можно посмотреть на вкладке Иерархия, там же можно внести изменения.
7) Вы создали скелет вашего персонажа, теперь склонируйте эту анимацию на всякий случай.
Изображение
8) Теперь сделаем саму анимацию:
Установим длительность анимации (напримерб 600 ms)
Расставим кейфреймы.
Кейфреймы это ключевые кадры, на которых происходит какое - то изменение в анимации. Обычно это либо крайние положения объекта или какое - то ключевое изменение, которое надо как бы акцентировать в анимации.
В зацикленной анимации (например, ходьба) первый и последний кадр должен совпадать.
Вращая кости вы ставите ваши спрайты в нужное вам положение.
При необходимости кости можно скрыть:
Изображение
Анимация готова)
Прикладываю файл спрайтера со своей анимашкой (см. шапку урока)

При просмотре скорость поставьте в 50 %

В следующей части урока разберем экспорт полученной анимации в С2.
И функцию Character map. Управление анимацией в C2.
В результате следующего урока вы сможете сделать переодевалку вашего персонажа

 Создание анимации ходьбы. Наследование (inherit) Немного об прямой и обратной кинематики. Экспорт анимации в Construct 2
Продолжаем знакомство со Spriter Pro и его возможностями.

Вначале рассмотрим некоторые моменты, которые я забыл написать в прошлой части урока:

Guide images

В спрайтере можно использовать картинку в качестве подложки – например в качестве схемы итд. Может быть у вас сложный персонаж состоящий из сотни частей и чтобы ничего не перепутать вы размещаете на фоне картинку guide images

Чтобы это сделать для начала включите эту опцию:
Изображение
Затем, в папке вашего проекта создайте папку с именем _guideImages
Затем сделайте как на скриншоте:
Изображение
Каждой анимации можно загрузить свое фоновое изображение.

Ось вращения спрайта

Спрайтер позволяет анимировать нам не используя кости. Для этого нам нужно выставить точки вращения спрайтов (По умолчанию точка вращения всегда находится по 0 в системе координат - в левом верхнем углу). Кликните дважды на спрайт в списке (там, где отображаются все спрайты)
Изображение


В прошлой части урока я написал алгоритм создания анимации, но не привел пример.

Цикл ходьбы – состоит из нескольких основных фаз. Эти фазы и будут вашими кейфреймами на таймлайне. Простейшая ходьба состоит из 8 кадров. Ее фазы:
1) Контакт
2) Отрыв
3) Прохождение
4) Высшая точка
Затем то же самое повторяется для другой ноги. Обратите внимание что руки движутся в обратную сторону, как бы противовес.

Изображение

Первый и последний кадр цикла совпадают.
Так как мы ориентируемся не просто по кадрам, а по времени длительности анимации (пусть будет длительность для примера 800 мс) , то поза персонажа с начала таймлайна должна совпадать с позой в конце таймлайна. Для этого поставьте вашего персонажа в позу как в первой фазе контакт. Выделите кейфрейм нажав на него на таймлайне затем скопируйте его
Edit – copy (или ctrl+c)
Перейдите в конец таймлайна и вставьте его туда.
Теперь сделайте кейфрейм на 400 мс и сделайте ту же фазу контакт, только для другой ноги.
Проиграйте анимацию, воу это уже похоже на ходьбу =)
Теперь осталось поставить кейфреймы Отрыв, Проход и Высшую точку, не забывайте про руки, они двигаются обратно ногам)

Если вы наведете мышку на какой нибудь спрайт на рабочем поле и зажмете правую кнопку мыши то появится горизонтальная прокрутка со всеми спрайтами вашего проекта – выберете нужный и щелкните по нему, он заменит текущий спрайт на таймлайне, но только в этот промежуток времени. Например вы хотите чтобы ваш персонаж во время подъёма руки сжимал кулак, для этого вы в том кейфрейме где он должен сжать кулак поменяете спрайт руки на спрайт сжатого кулака. Где то так кстати анимируется WAKFU – меняются части тела когда нужно поменять ракурс (только Wakfu это все таки Flash).

Тогда же, когда вы нажимаете правую кнопку мыши на спрайте, появляется небольшая менюшка inherit (наследование)

Я не смог снять скриншоты этой менюшки, только фото)
Изображение

Там две кнопки, каждая включает и отключает свой режим. Включение отключение осуществляется не нажимом на кнопку, а наведением/ отведением курсора мыши. Если кнопка обведена значит включена.

Пиктограмма круговой стрелки

Если включена значит спрайт вращается вместе с костью в точке вращения кости!.

Если отключена то спрайт будет вращаться в собственной точке вращения
Изображение
Изображение

Пиктограмма с 4 стрелками расположенная рядом с круговой стрелкой
Если включена то растягивая кость спрайт увеличивается во всех направлениях
Изображение
Если выключена то растягивая спрайт вы растягиваете его только в продольном направлении.
Изображение

Инверсная кинематика в спрайтере.
До этого, создавая кости и настраивая скелет мы создавали прямую кинематику (Forward Kinematics - FK) , когда создавали дочерние кости которые никак не влияли на родительские и на остальной скелет.
Сейчас мы разберем обратную (инверсную - IK) кинематику.
Если вы наведете курсор мыши на кость и зажмете правую кнопку мыши вы увидите меню
Там, кроме двух рассмотренных выше кнопок есть еще одна – якорь.
Изображение
При включенном состоянии блокирует кость.
Выберете в моем файле спрайтера анимацию Inverse Kinematics. Поставьте якоря на кости голени и стопы - появятся красные точки означающие что кость зафиксирована. Потяните за кость позвоночника – весь скелет изменяет свое положение кроме зафиксированных костей.



Экспорт в Construct 2

Вначале настроим экспорт в спрайтере. Откройте File - Other File actions - Custom Save Options
Поставьте галки как на скриншоте
Изображение

Теперь сохраните ваш файл, два раза, с одинаковым именем, но один файл будет с расширением .scml, второй .scon
Изображение

У вас уже должен быть установлен плагин для C2.
Скачать его можно здесь.

Откройте Construct 2 и перетащите в него прямо на сцену ваш файл .scml. Появится окошко с выбором эвентшита:
Изображение
Я создаю для спрайтера всегда отдельный эвентшит
Произойдет загрузка ваших спрайтов в C2.
Изображение

Как только доделаю оформление, выложу про функцию Character map и заодно разберем управление анимацией спрайтера в C2 и блэнд анимаций (плавный переход одной анимации в другую средствами Construct 2)


 Construct 2, простейшее управление анимацией, блэнд анимаций, переодевалка
Разберем функцию спрайтера Character map и сделаем на основе нее в Construct 2 простейшую переодевалку.
Откройте ваш проект спрайтера, нажмите на Char maps:
Изображение
В появившемся окошке нажмите на Create New Character Map
Дайте имя новому скину - в дальнейшем, в Construct 2 мы будем обращаться к этому имени при смене одежды у персонажа.
Изображение
В этом окошке вы видите две колонки. Это все ваши спрайты в проекте. Но в левой колонке представлен текущий скин а в правой то на что его можно поменять.
Нажмите в левой колонке правой кнопкой мыши на спрайт который надо будет поменять и так же влевой колонке сделайте со спрайтом на который надо будет поменять.
Например одну куртку на другую, одну прическу на другую итд.
Сверху этого окошка есть две кнопки:
Set hidden - скрыть уже существующий элемент. Например вы хотите чтобы у нового облика персонажа отсутствовал галстук - вы нажимаете на эту кнопку и он становится скрытым.

Set ignored - игнорирование - то есть это спрайт больше не задействован в Character Map

В анимашке которую я выложил в прошлой части урока я уже сделал несколько шкурок персонажу.
Сохранитесь и экспортируйте проект в Construct 2.


В первую очередь давайте настроим размер нашего персонажа и скорость анимации:
Изображение

Теперь научимся управлять анимациями и делать плавный переход одной анимации в другую (в нашем случае анимация бега в айдловую анимацию и обратно)
Создайте две кнопки, с помощью них мы будем переключать анимации Run и idle:
Изображение

Там же, куда вы вписывали название анимации,
Изображение
поставьте blend at current time ratio и время 100 ms

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

Теперь реализуем собственно переодевание персонажа:
Я сделал пять одежек персонажу - сделайте пять кнопок, на каждый костюм.
в событиях пишем для первого костюма купальника
Изображение
При нажатии на эту кнопку персонаж вернется к первоначальному облику, тому что мы анимировали в спрайтере
Теперь для другой кнопки сделаем смену костюма на комбинезон:
Изображение
Обратите внимание что вначале мы отменили предыдущую шкурку и только потом переключились на новую
Сделайте так для каждого костюма.
Прикрепляю файл констракта:
pereodevalka.capx
(283.31 КБ) Скачиваний: 92


Обновлено:
закидывание scml файла спрайтера в проект C2 это старый способ и работает он очень непроизводительно, отсюда и проблемы со сглаживанием.
Используйте функцию в С2 drow self. То есть вначале просто создаете пустой объект scml на сцене, устанавливаете ему значение в свойствах drow self , потом просто загружаете в него спрайтшит сделанный в спрайтере. В Files проекта C2 добавляете только scon файл. В свойствах scml объекта, где scml file пишете имя вашего scon файла вместе с его расширением (имя_файла.scon). Не забудте включить режим drow self .
Используя этот способ у вас не будет проблем с производительностью и качеством анимации. Так же будут работать все крутые возможности спрайтера, такие как character map, sound triggers, хитбоксы, точки действий итд.

Когда будете в спрайтере делать спрайтшит установите padding на 2 px, чтобы спрайты не налезали друг на друга. Установите галочку save spritesheeted project, save as scon и embed spritesheet info in project file
Последний раз редактировалось Microtoon 27 мар 2018, 03:49, всего редактировалось 13 раз(а).
Изображение
Аватара пользователя

Участник
Сообщений: 1328
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 167 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 25 апр 2017, 21:57

Спасибо за урок!
Нормально ли в констракте работает плавный блэнд двух анимаций из спрайтера? (Когда я пробовал это делать, стык все равно был виден :sad: ) Прошу пардон, если вопрос не по теме
Последний раз редактировалось Vyntershtoff 25 апр 2017, 22:34, всего редактировалось 1 раз.
Аватара пользователя

Игродел
Сообщений: 1239
Я тут с 10 фев 2013
Откуда: Челябинск / Екатеринбург
Двиг: C2.r241
Лицензия: Personal
VK: vyntershtoff
Репутация 252 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 25 апр 2017, 22:20

Microtoon, Спасибо очень не хватало такого урока.
++++++++
Аватара пользователя

Участник
Сообщений: 592
Я тут с 04 фев 2014
Репутация 129 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 26 апр 2017, 01:51

Developed писал(а):Microtoon, Спасибо очень не хватало такого урока.

Спасибо! Я постараюсь написать наиболее полный гайд по спрайтеру.
Vyntershtoff писал(а):Спасибо за урок!
Нормально ли в констракте работает плавный блэнд двух анимаций из спрайтера? (Когда я пробовал это делать, стык все равно был виден :sad: ) Прошу пардон, если вопрос не по теме

Прекрасно работает! На сегодняшний день в спрайтере пофиксили большинство ошибок, теперь можно даже делать что то вроде анимации меша, хотя это до сих пор экспериментальная функция (раньше спрайтер крашился при использовании этого режима).
Я сегодня перезалью пример переодевашки с блэндом анимаций и допишу новую часть урока, там же покажу как настраивать плавный переход одной анимации в другую в Construct 2.
Изображение
Аватара пользователя

Участник
Сообщений: 1328
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 167 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 26 апр 2017, 16:35

У меня Спрайтер больше года, а его открывал раза три.... Может теперь решусь освоить... Респект тебе Microtoon... Не забрасывай, выкладывай еще :good:
Изображение Изображение Изображение
Аватара пользователя

Игродел
Сообщений: 1251
Я тут с 25 ноя 2014
Откуда: TLV
Двиг: Construct 2
Лицензия: Personal
Репутация 149 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 26 апр 2017, 16:46

Урок раскрытый, с картинками, с обозначениями. Выставил бы счёт для благодарностей. Работа то проделана немаленькая. Тем более если будут продолжения.
Аватара пользователя

Модератор
Сообщений: 2552
Я тут с 18 сен 2015
Откуда: Екатеринбург
Двиг: Construct 2
Лицензия: Personal
VK: id21590703
Репутация 369 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 26 апр 2017, 17:00

Прикольно. Аналогично, больше года назад купил программу, толком и не разбирался с ней.
Очень интересует работа с обратной кинематикой (IK), буду рад если затронешь этот нюанс.
Изображение
Аватара пользователя

Игродел
Сообщений: 1062
Я тут с 14 сен 2012
Откуда: Красноярск
Репутация 129 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 27 апр 2017, 00:06

Новые части урока по спрайтеру будут публиковаться в шапке темы под спойлерами. Буду рад вопросам и предложениям)
Zaksoid писал(а):Прикольно. Аналогично, больше года назад купил программу, толком и не разбирался с ней.
Очень интересует работа с обратной кинематикой (IK), буду рад если затронешь этот нюанс.

Проблема обратной кинематики в том что она есть....и ее как бы нет.
Обратная кинематика есть в спрайтере и мы можем анимировать с ее помощью, но полноценно контролировать кости в Construct 2 мы не можем, как например мы могли бы это сделать в Unity, так как когда мы экспортируем в Unity, анимация спрайтера переводится в скелет Unity. А в Construct 2 нет своей системы костей.
Так же, Construct 2 не понимает анимацию сделанную с помощью Skins mode. Если вы хотите загрузить нечто подобное в Construct 2, вам придется экспортировать в виде секвенции кадров или gif
Изображение
Последний раз редактировалось Microtoon 27 апр 2017, 07:34, всего редактировалось 3 раз(а).
Изображение
Аватара пользователя

Участник
Сообщений: 1328
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 167 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 27 апр 2017, 06:31

Microtoon, (как предложение) Редактируй первый пост, чтобы в сообщениях уроки не искать. А чтобы не запутаться, сортируй в "spoiler=".
Код: Выделить всё
[spoiler=Урок по тому-то]Урок по тому-то
[img]http://c2community.ru/imagehosting/images/2017/Apr/25/spriterpro.jpg[/img][/spoiler]
[spoiler=Урок по сему-то]Урок по сему-то
[url=http://c2community.ru/imagehosting/images/2017/Apr/27/2017042413.png][img]http://c2community.ru/imagehosting/thumbs/2017/Apr/27/2017042413.png[/img][/url][/spoiler]

 Урок по тому-то
Урок по тому-то
Изображение

 Урок по сему-то
Урок по сему-то
Изображение
Аватара пользователя

Модератор
Сообщений: 2552
Я тут с 18 сен 2015
Откуда: Екатеринбург
Двиг: Construct 2
Лицензия: Personal
VK: id21590703
Репутация 369 [ ? ]

Сообщение Урок по анимации в Spriter Pro. Экспорт в Construct 2.
» 27 апр 2017, 10:16

Microtoon писал(а):Так же, Construct 2 не понимает анимацию сделанную с помощью Skins mode. Если вы хотите загрузить нечто подобное в Construct 2, вам придется экспортировать в виде секвенции кадров или gif

Выходит ты волосы в переодевалке по частям анимировал? Круто получилось)
Изображение
Аватара пользователя

Игродел
Сообщений: 1062
Я тут с 14 сен 2012
Откуда: Красноярск
Репутация 129 [ ? ]



Вернуться в Другие уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

cron
Наверх