Рассмотрим создание анимации, экспорт в 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.
В результате следующего урока вы сможете сделать
переодевалку вашего персонажа
anim_gadget.rar
Интерфейс программы, общие сведения, алгоритм работы с костной анимацией, горячие клавиши
pereodevalka.capx
) Прошу пардон, если вопрос не по теме
