Создаем игру. Часть 8. Уроки магии

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

Общий вид на сцену.

Бонусы

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

Бутылочки с магическим зельем.

Всего на сцене присутствует три типа бонусов: лечение, магический щит и хождение-по-лаве. На примере одного из них разберем их структуру.

Демонстрация многослойности геометрии одного из бонусов.

Каждый из бонусов состоит из следующих компонентов (в порядке, показанном на анимированной картинке):

• прямоугольник снизу - магический знак
• большая сфера - легкое свечение
• что-то среднее между формой бутылки и сферы - плотное свечение
• геометрия бутылочки - стекло
• геометрия пробки и жидкости - основной цвет бонуса

Теперь подробней пройдемся по каждому элементу.

Магический знак бонуса

Знак под каждым бонусом индивидуальный и имеет достаточно сложный материал.

RGBA слои текстуры с магическими знаками в них.

В основе материала лежит текстура (1) с тремя символами (для каждого бонуса свой) и маской свечения (размещены по каналам RGBA). При помощи вертексной маски эти символы оказываются (4) каждый под своим бонусом.

Материал магического знака под каждым бонусом.

Чтобы создать эффект вращающегося свечения, из текстуры выведен альфа-канал с расходящимися из центра лучами (2) и при помощи ноды Time и специально созданной для этого группы UV_ROTATION происходит их вращение навстречу друг другу (3).

Так же для эффекта "магического мерцания" в материале присутствует группа (5), которая создает непрерывную цепочку расходящихся из центра процедурных колец. Все эти блоки позже объединяются в общую маску (6) и подаются в альфа-канал ноды Output. А текстуры раскрашиваются "на лету" по маскам в цвета, которые соответствуют каждый своему бонусу, и подаются в сокет Color ноды Output.

Пример отличия материалов для высокой и низкой настроек графики.

Также важно обратить внимание на небольшую оптимизацию при помощи ноды Level Of Quality (7). Для высоких настроек графики материал визуализируется в таком виде, как он описан выше, но для низких настроек все динамические преобразования отключены и пользователь увидит только символ бонуса, никак не изменяемый во времени.

Магический ореол

Для эффекта магического ореола используется две геометрии: одна геометрия сферы, другая почти повторяет форму бутылочки бонуса, но слегка раздутая. Материал же для них используется один и тот же.

Материал магического ореола вокруг бутылочек с зельем.

Весь материал строится на имитации эффекта Френеля (1), который при помощи ноды Time постоянно сужается или расширяется в определенном диапазоне чисел (2). Сделав его еще более прозрачным (3), отправляем полученную маску в альфа-канал. Цвет для материала берем из вертексного цвета (4), содержащегося на геометрии сфер.

Бутылочное стекло

Материал бутылочного стекла.

Эффект бутылочного стекла получается в результате комбинирования специально созданной текстуры типа matcap (1) и эффекта Френеля (2). На основе их комбинаций создается специальная маска и подается в альфа-канал ноды Output. Вокруг постоянно пышет огонь, поэтому логично, что на стекле будет очень много огненных рефлексов, созданных (3) на основе той же текстуры типа matcap.

Пример работы ложного спекуляра в виде маски.

Для придания большей "магичности" бутылочкам был добавлен эффект ложного спекуляра (4), который пробегает по стеклу с определенной периодичностью и создает эффект магического блеска.

Но этот эффект не сильно виден на небольших устройствах и излишне нагружает ресурсы, поэтому при помощи специальной ноды Level Of Quality для низких настроек графики он был убран.

Магическое зелье

Материал магического зелья и пробки один и тот же, и он достаточно прост.

Материал самого зелья.

В основе материала используется такая же текстура типа matcap (1), как и в материале бутылочного стекла. Цвет для него берется из вертексного цвета геометрии и смешивается с текстурой (2). Так как это магическое зелье, для того, чтобы акцентировать на этом внимание, зелье иногда вспыхивает магическим светом (3), который сделан с использованием специальной ноды Time. Но для оптимизация под низкое качество этот эффект убран при помощи специальной ноды Level Of Quality.

На этом описание создания бонусов закончено. Но осталась не менее важная часть магического действа - это влияние магического зелья на персонажа!

Персонаж под воздействием магии

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

Вот так примерно будет выглядеть персонаж, когда он будет подбирать тот или иной бонус. Посмотрим более внимательно на те изменения, которые претерпел материал, чтобы такая магия стала возможной!

Материал персонажа

Доработанный материал персонажа.

Кроме дополнительных двух текстур, которые уже используются в материале бонусов, были добавлены три больших блока (2, 3 и 5), которые отвечают за включение и выключение магических влияний.

Блок нод, помеченный голубым цветом (2), отвечает за появление магического щита. Нода Value умножается на выведенную из текстуры маску, и при значении 1 нода включает её, а при значении 0 выключает её влияние на материал.

Блок красного цвета (3) - это на самом деле уже используемый ранее эффект поджаривания ног персонажа в момент соприкосновения с лавой. Более подробное описание этого блока смотрите в более ранней статье цикла.

Одна из RGBA текстур, использованная в материалах бонусов и персонажа, показанная по слоям.

Блок нод, помеченный оранжевым (4), отвечает за магию, защищающую персонажа от наносимых лавой повреждений. Чтобы получить этот эффект, на геометрию персонажа также был добавлен вертексный цвет в виде черно-белой растяжки во весь рост от головы до ног. При помощи этого вертексного цвета и зацикленной текстуры магических знаков, ноги персонажа подсвечиваются магическим эффектом при изменении значения ноды Value.

Демонстрация вертексной маски на геометрии персонажа.

Блок нод, выделенных зеленым цветом (5), отвечает за магический эффект исцеления. Он также использует повторяющуюся текстуру с магическими символами и вертексную маску для визуализации повторяющейся текстуры в нужной области, добавляя магический эффект на персонажа при изменении ноды Value.

Позже все блоки магических эффектов объединяются (6) с главной текстурой персонажа (1). Маска (7) для сокета Emit материала создана для самосвечения в нужных местах, ведь магия должна светиться!

Дополнительная геометрия для создания ореола вокруг щита.

Для создания магического свечения вокруг щита, в дополнение к персонажу была создана специальная сферическая геометрия. В настройках объекта в разделе Relations в качестве Parent объекта была выбрана одна из костей левой руки скелета персонажа. Таким образом, сфера всегда будет вокруг щита на руке персонажа.

Настройка зависимостей геометрии ореола от костей персонажа.

Структура материала в общем напоминает материал свечения бонусов, и текстура в материале используется та же (1).

Материал ореола щита персонажа.

При помощи ноды UV_ROTATION две текстуры вращаются навстречу друг другу (2) и добавляются в маску на основе эффекта Френеля (5). В блоке, объединяющем текстуры и маску по Френелю, также находится нода Value, которая отвечает за включение и отключение видимости материала, а также специальная нода Level Of Quality, которая отключает все текстуры для низкого качества настроек графики. В верхнем блоке генерируется цветовая информация для сокета Color ноды Output.

Заключение

Персонаж в игре под воздействием бонусов "хождение по лаве" и "магический щит".

Игра наполнилась примитивной, но всё же магией! Теперь не так-то легко сломить главного персонажа, он стал более способным к нападению и обороне. В следующем уроке будет рассказано о том, как наполнить мир врагами и, наконец, смыслом! То есть рассказ пойдет о создании игровых элементов мира - не пропустите!

Ссылка на приложение в отдельном окне

Вы можете обсудить этот урок в соответствующей теме на форуме.

Исходные файлы моделей находятся в составе бесплатного дистрибутива Blend4Web SDK.

Изменения

[2015-02-18] Изначальная публикация.