Создаем игру. Часть 6: Анимация и спецэффекты
2014-07-18
На этот раз мы расскажем об основных этапах моделирования и анимации персонажа, а также создадим эффект смертоносных падающих глыб.
Персонаж - модель и текстуры
Относящиеся к персонажу данные были размещены в двух файлах. В файле character_model.blend находится геометрия, материал и скелет, а в файле character_animation.blend - анимация для этого персонажа.
![](/media/img_article/51/gm06_img01.jpg?v=)
Сетка модели персонажа низкополигональная:
![](/media/img_article/51/gm06_img02.jpg?v=)
Так же как и у других моделей, карта нормалей отсутствует. Цветовая текстура была полностью отрисована по модели в среде Blender в режиме Texture Painting:
![](/media/img_article/51/gm06_img03.jpg?v=)
Текстура была затем дополнена (4) запеченой картой взаимного затенения (ambient occlusion) (2). Цвет (1) изначально был сделан значительно более бледным, чем необходимо, и усилен (3) нодой Multiply в материале. Это позволило контролировать насыщенность итоговой текстуры.
![](/media/img_article/51/gm06_img04.jpg?v=)
После запекания получилась диффузная текстура, из которой была создана карта бликов. Карта бликов была высветлена в местах клинка, металлических элементов одежды, глаз и волос. Как обычно, в целях оптимизации видео-памяти эта текстура упаковывается в альфа-канал диффузной текстуры.
![](/media/img_article/51/gm06_img05.jpg?v=)
Материал для персонажа
В материал персонажа добавим ноды для создания эффекта подсвечивания персонажа при контакте с лавой.
![](/media/img_article/51/gm06_img06.jpg?v=)
Чтобы реализовать этот эффект, нам понадобятся две процедурные маски по высоте (2 и 3). Одна из них (2) будет окрашивать ступни в месте их касания с лавой, в желтый цвет, а другая (3) - ноги персонажа чуть выше колен, в оранжевый цвет. Значение блика материала выведено (4) из альфа-канала диффузной текстуры (1).
![](/media/img_article/51/gm06_img07.jpg?v=)
Анимация персонажа
Поскольку персонаж виден преимущественно издалека и сзади, для него был создан упрощенный скелет, с небольшим количеством управляющих костей инверсной кинематики.
![](/media/img_article/51/gm06_img08.jpg?v=)
В файл character_animation.blend была добавлена по ссылке группа объектов, состоящая из персонажа и его скелета. После этого для скелета был создан объект-заменитель (Object > Make Proxy...), чтобы получить возможность его анимирования.
На данном этапе разработки игры понадобилось всего три вида анимации: циклическая анимация бега, анимация стояния на месте и анимация гибели.
![](/media/img_article/51/gm06_img09.jpg?v=)
При помощи специально разработанного инструмента Blend4Web Anim Baker все три анимационные последовательности были запечены и добавлены по ссылке в главный файл сцены game_example.blend. После экспорта этой сцены анимация становится доступной для программной части игры.
![](/media/img_article/51/gm06_img10.jpg?v=)
Спецэффекты
Во время игры на игрока постоянно будут падать раскаленные глыбы. Для визуализации каждой из них были созданы пять элементов:
- геометрия и материал самой глыбы,
- ореол вокруг глыбы,
- система частиц взрыва,
- система частиц дымящегося шлейфа от падающей глыбы,
- индикатор места падения.
Все перечисленные элементы находятся в файле lava_rock.blend и подключаются по ссылке в файл game_example.blend. Каждый элемент из комплекта глыбы имеет оригинальное имя для удобства использования в программной части.
Раскаленные глыбы
Для разнообразия были созданы три разновидности геометрии глыб:
![](/media/img_article/51/gm06_img12.jpg?v=)
Текстура была создана вручную при помощи текстурного рисования в режиме Texture Painting:
![](/media/img_article/51/gm06_img13.jpg?v=)
Материал обыкновенный, без использования нод, с включенным параметром Shadeless:
![](/media/img_article/51/gm06_img14.jpg?v=)
Для создания эффекта свечения раскаленной глыбы был создан объект яйцевидной формы, ориентированный узкой частью вниз для имитации стремительного движения.
![](/media/img_article/51/gm06_img15.jpg?v=)
Материал ореола полностью процедурный, без текстур. Вначале выполним скалярное произведение (Dot Product) нормалей геометрии и вектора (0, 0, -1) с целью получения градиента, зависящего от направления взгляда (нечто похожее на эффект Френеля). Затем сжимаем и смещаем градиент двумя разными способами и получаем две маски (2 и 3). Одну из них (более широкую) раскрашиваем в цветовой градиент (5), а вторую вычтем из первой (4) и используем получившееся кольцо как карту прозрачности.
![](/media/img_article/51/gm06_img16.jpg?v=)
Пустая нодовая группа с названием NORMAL_VIEW используется для совместимости: в ноде Geometry нормали находятся в пространстве камеры, в Blend4Web - в мировом пространстве.
Эффект взрыва
При столкновении с твердой поверхностью раскаленные глыбы будут взрываться.
![](/media/img_article/51/gm06_img17.jpg?v=)
Для создания эффекта взрыва используем систему частиц с эмиттером в форме пирамиды. Для системы частиц создадим текстуру с альфа-каналом, имитирующую клубы огня и дыма:
![](/media/img_article/51/gm06_img18.jpg?v=)
Создадим простой материал и подключим к нему эту текстуру:
![](/media/img_article/51/gm06_img19.jpg?v=)
Настроим систему частиц, использующую созданный материал:
![](/media/img_article/51/gm06_img20.jpg?v=)
Активируем плавное исчезновение частиц, используя дополнительные настройки Blend4Web:
![](/media/img_article/51/gm06_img21.jpg?v=)
Для увеличения размера частиц в течение времени их существования, создадим текстуру-градиент для системы частиц:
![](/media/img_article/51/gm06_img22.jpg?v=)
Подготовка эффекта взрыва на этом закончена.
![](/media/img_article/51/gm06_img23.jpg?v=)
Шлейф дыма
При падении глыбы за ней будет следовать дымовой шлейф:
![](/media/img_article/51/gm06_img11.jpg?v=)
Чтобы создать этот эффект, поступим следующим образом. Для начала создадим материал дыма с использованием той же текстуры, которую мы использовали ранее для эффекта взрыва. В отличие от предыдущего материала, в этом используется процедурная текстура-градиент для окрашивания частиц в течение времени их жизни - вначале в красный цвет, потом в серый - для имитации интенсивного горения:
![](/media/img_article/51/gm06_img24.jpg?v=)
Теперь настроим систему частиц. В качестве эмиттера будет служить простой прямоугольник, нормаль которого направлена вверх. На этот раз эмиссия частиц циклическая и более растянутая во времени:
![](/media/img_article/51/gm06_img25.jpg?v=)
Кроме того, у системы частиц также имеется текстура-градиент для постепенного уменьшения размера частиц с течением времени:
![](/media/img_article/51/gm06_img26.jpg?v=)
Индикатор места падения
Осталось добавить небольшую деталь - индикатор места падения раскаленной глыбы, облегчающий жизнь игроку. Нам понадобится простой прямоугольный объект с разверткой. Материал полностью процедурный, без использования текстур.
![](/media/img_article/51/gm06_img27.jpg?v=)
Применим ноду Average к данным развертки и получим радиальный градиент (1) с центром в середине прямоугольника. Дальнейшие операции нам уже знакомы. После двух различных трансформаций получим две маски (2 и 3) разного размера. Вычтем одну из другой, чтобы получить кольцо (4). Далее отрегулируем маску для прозрачности (6) и выведем её в альфа-канал материала. Другую маску получим, сузив немного кольцо (5). Раскрасим ее в два цвета (7) и выведем в сокет Color.
![](/media/img_article/51/gm06_img28.jpg?v=)
Заключение
На этом подготовка контента для геймплея завершена. После объединения его с программной частью, которая описана в предыдущей статье цикла, получаем насыщенный, полный приключений мир!
Ссылка на приложение в отдельном окне
Исходные файлы моделей находятся в составе бесплатного дистрибутива Blend4Web SDK.
Изменения
[2014-07-18] Изначальная публикация.
[2014-07-22] Изменен путь к приложению.