Создаем игру. Часть 7. Детализация игрового мира

Открываем очередную серию статей о приключениях Пятигора! В них вас ждёт описание того, как насытить и разнообразить окружающий персонажа мир, как создать и добавить интерактивные элементы и, наконец, как заставить этот мир издавать звуки!

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

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

Спецэффекты окружения

Запустив демосцену или посмотрев на скриншот выше, можно увидеть новые элементы на сцене. Разберем их поочередно:

• оптическое искажение вследствие разницы температур в воздухе,
• задымление по периметру локации,
• всполохи лавы,
• мелкие камни, дрейфующие в лаве,
• задымление на небе.

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

Геометрия для будущих эффектов.

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

Для материала, имитирующего задымление, также была создана геометрия (2) вокруг островов, но уже более разряженная.

Геометрия всполохов лавы (3) расположена локально в местах соприкосновения лавы с другими предметами, находящимися в ней.

Эффект температурного искажения

Рассмотрим внимательнее материал.

Материал для имитации эффекта температурного искажения.

В основе материала лежит карта нормалей (1), которая используется дважды с разным масштабом. При помощи специальной ноды Time, которая добавляется в один из каналов UV-развертки (2), текстура двигается по материалу, создавая ощущение поднимающегося раскаленного воздуха.

Карта нормалей подается в специальную ноду Refraction (3). Также для этой специальной ноды генерируется маска (4), которая указывает ноде Refraction, где производить искажения, а где нет.

Нода Levels Of Quality, которая подаётся в альфа-канал материала, делает его невидимым на низких настройках.

Пример работы специальной ноды Refraction.

Выше видно, как это работает. Слева красный шарик не подвергается никаким изменениям (clean), далее видно используемую маску (mask), а правее карту нормалей (normal), которая двигается по uv-развертке. И в результате (refraction) видно искажение шарика, когда мы смотрим на него через материал.

Материал задымления

Материал эффекта задымления сделан по такому же принципу, что и материал температурного искажения.

Материал, имитирующий эффект задымления.

В основе лежит тайловая текстура, напоминающая дым (1), которая подаётся в альфа-канал материала. Она смещается по uv-развертке при помощи ноды Time (2) и с разным масштабом объединяется с вертексным цветом (3 и 4), который затемняет её по краям.

Демонстрация маски прозрачности материала задымления.

Выше на небольшом участке сцены можно видеть, как это работает. Черный цвет используется как 100% прозрачный.

Всполохи огня

Всполохи лавы.

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

Материал эффекта всполохов лавы.

В материале используется всё тот же принцип движения текстуры по uv-развертке. В основе лежит та же самая тайловая текстура дыма (1). При помощи ноды Time смещаем её по uv-развертке в трех разных направлениях (2). Результат этого смещения объединяется с вертексным цветом и из этого генерируется маска (3) для альфа-канала. Кроме того эта текстура, смешанная немного в других пропорциях, раскрашивается (4) в "огненные" цвета и подаётся в диффузный цвет материала.

Дрейфующие камни

Для детализации сцены на неё были также добавлены дрейфующие в лаве камни.

Модельный ряд групп дрейфующих камней.

В самом .blend файле находятся всего 5 разных камней, но добавляя или исключая разные камни из групп, удалось получить 7 разных вариантов. Для экономии на них используется материал островов.

Эффект легкого покачивания создан с помощью вертексной анимации процедурного типа, которая называется Wind Bending. Анимация включается и настраивается на уровне объекта в специальной вкладке настроек движка Blend4Web.

Пример настройки эффекта Wind Bending.

В данном случае в настройках можно обойтись только двумя параметрами: Angle - угол, на который будет отклоняться объект, и Frequency - частота, с которой он будет это делать.

Задымление на небе

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

Если приглядеться к небу, то можно заметить, что оно стало немного сложнее - на нём добавлено задымление. Сделано это также при помощи динамически изменяемого материала.

Материал неба.

Воспользуемся опять всё той же текстурой дыма (1) и при помощи ноды Time придадим ей динамику (2). Важное отличие от предыдущих материалов - текстура будет двигаться не по uv-развертке, а по глобальным координатам. Осталось только раскрасить текстуру в нужные цвета (3). Также важно отметить присутствие ноды Levels Of Quality, которая будет визуализировать для режима низкого качества графики простую растяжку двух цветов.

Изображение из игрового процесса с новыми спецэффектами.

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

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

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

Обсудить статью, задать вопросы и просто оставить своё мнение можно здесь на форуме.

Изменения

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