http://habrahabr.ru/company/learzing/blog/236791/
![](//habrastorage.org/files/7c1/5ba/b74/7c15bab74deb4f10ac5e50f9b7a50d4e.jpg)
Мы продолжаем рассказывать о разработке первой игры для нашей образовательной платформы
Learzing — это будет квест, помогающий в изучении английских идиом.
Сегодня мы поработаем в редакторе скелетной анимации
Spriter. На готовом примере рассмотрим достоинства этого вида анимации, отличия от классической спрайтовой и расскажем про перспективы ее использования в HTML5-играх.
В качестве примера мы возьмем готового персонажа по имени Foxy, это будет главный герой нашей игры. Для создания проекта в редакторе Spriter необходимо поделить образ персонажа на элементы и сохранить их в отдельные директории. Элементы — это части тела Foxy, которые мы будем прикреплять к «скелету».
![](//habrastorage.org/files/ff3/ac7/777/ff3ac7777e8645d0b4e6a0ad9908eedc.jpg)
Открываем Spriter, создаем новый проект и выбираем корневую директорию со спрайтами. В панели Palette мы видим наши директории, перетаскиваем в рабочую область и восстанавливаем образ Foxy из отдельных элементов. В панели Z-order выстраиваем нужное положение спрайтов по z-координате.
![](//habrastorage.org/files/047/642/835/047642835280442c9155d3d84a19afeb.jpg)
Теперь, если мы выделим спрайт правой кнопкой мыши, редактор нам покажет какие ещё спрайты находятся в директории, таким образом можно быстро менять спрайты во время работы с анимацией. Теперь построим «скелет» нашему персонажу.
В панели Palette выбираем Create bone, с нажатой кнопкой Alt отмечаем кости — выстраиваем скелет. Пара правил по его построению. Если кость создается при выделенной кости, выделенная кость становится родителем созданной. Если на рабочем поле нет выделенных костей, и вы создали кость, в данном случае она будет независимой от скелета. Иерархию скелета можно смотреть в панели Hierarchy.
![](//habrastorage.org/files/0a8/3da/c2e/0a83dac2ec544b44a0ab2a3afe3b3eb5.jpg)
В панели Hierarchy, вместо сгенерированных названий костей bone_xxx, желательно переименовать их и выбрать более понятные имена — например, head-bone или leg-left-bone. Это поможет легко найти интересующий элемент в коде сгенерированных исходников XML/JSON.
![](//habrastorage.org/files/7a8/578/05a/7a857805ab3640d9a981fed4605e0d18.jpg)
После того, как был сформирован скелет по форме персонажа, необходимо связать каждую кость с лежащим под ней спрайтом. Для этого выделяем кость, нажимаем и удерживаем «B» + клик по спрайту. У нас получился вот такой скелет, в панеле иерархии наглядно демонстрируется последовательность прикрепленных спрайтов.
Мы подошли к анимации. Тем, кто делал анимацию в Adobe Flash, будет знаком привычный Timeline. А для тех, кто в первый раз видит редактор по анимации, не пугайтесь, это стандартный инструмент и работа в нём проста. Переносите бегунок по таймлайну и изменяйте позиции костей. Spriter сохраняет позиции персонажа на ключевых кадрах и просчитывает движение между ними.
На этом этапе виден очевидный плюс — процесс создания анимации занимает в разы меньше времени, чем покадровая отрисовка. В панели Animations создаем дополнительные анимации для нашей игры. Второй плюс скелетной анимации — при увеличении количества анимации увеличивается только количество строк в XML/JSON, а не количество кадров в спрайтовой анимации.
![](//habrastorage.org/files/d17/704/442/d177044427c04707889fc0987df32ea9.jpg)
В Spriter есть еще одна очень полезная для игроделов опция — Character Maps. Эта опция позволяет создавать образы на основе готового скелета и набора анимации. В рамках формы и размера вашего персонажа вы можете нарисовать многочисленное количество аксессуаров и новой одежды, или полностью заменить персонажа с идентичным скелетом. И все это в рамках одного проекта!
![](//habrastorage.org/files/2dd/3ee/7d1/2dd3ee7d13e24c028c5e00e9944e1604.jpg)
Пришло время проверить в бою наши наработки. Подготовим наш проект для экспорта в
Construct 2 (об этом иструменте для создания HTML5-игр мы писали в предыдущих статьях). Для этого изменим параметры сохранения проекта. Включим в него все подпункты Additional Data for Authoring Tools. У нас есть два файла scml и scon, они абсолютно аналогичны синтаксису XML и JSON.
![](//habrastorage.org/files/cfa/1f6/d16/cfa1f6d168794726aad07b349c746532.jpg)
Следующий шаг — установка плагина на Construct 2 для поддержки скелетной анимации. На форуме Сonstruct 2 можно всегда
скачать последнюю версию.
Распакованный плагин представляет из себя набор из трех js-сценариев, перемещаем их в установочную директорию
...\Construct 2\exporters\html5\plugins Теперь Construct 2 готов обрабатывать файлы Spriter.
Перетаскиваем файлы scml на рабочее поле в Construct 2 и прописываем события в Event Sheet. Читайте об особенностях написания логики и событий в Construct 2 в наших предыдущих статьях.
Предлагаем посмотреть
демонстрационный проект от разработчиков Spriter. Также рекомендуем к просмотру
YouTube-канал, где вы найдете много интересного и обучающего материала по Spriter’у.
![](//habrastorage.org/files/32a/05c/aa7/32a05caa7ef34823a8b841d5eb17d431.jpg)
Для сравнения мы подготовили
демонстрационную сцену с двумя типами анимации.
![](//habrastorage.org/files/2f5/16e/07b/2f516e07bfcc4b84b0816cf76b9ebc7b.jpg)
Опрос
Традиционно в конце статьи приглашаем всех хабражителей помочь нам в создании игры для изучения английских идиом — потратить несколько минут и заполнить небольшой
опрос, который повлияет на нашу разработку.
Мы бы хотели прежде всего отталкиваться от пожеланий и потребностей пользователей (то есть вас), а уже потом от собственных идей. Все заполнившие опрос получат ранний доступ к нашему квесту.
Все статьи серии
- Стартап шаг за шагом: будущее онлайн-образования
- Стартап шаг за шагом: команда и менторы
- Стартап шаг за шагом: первая бизнес-модель
- Как мы делали образовательную платформу: первый дизайн, landing page и логотип
- Как мы делали образовательную платформу: первое приложение
- Делаем HTML5-квест: применяем паттерн MVC в Construct 2
- Делаем HTML5-квест: создаём персонажа и базовую анимацию