Войти
Blend4WebСтатьи

Создаем игру. Часть 3: Дизайн сцены

Автор:

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


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

Изображение

Сборка игровой сцены

Визуальный контент сцены соберем в файле main_scene.blend. В него мы добавим подготовленные ранее элементы окружения из файла env_stuff.blend.

Через меню File -> Link открываем файл env_stuff.blend, переходим в раздел групп (Group), добавляем все группы с геометрией центральных островов (1) и фоновых гор (2) и расставляем их на сцене.

Изображение

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

Создадим копию этой геометрии и назначим ей материал для определения столкновений, как описано в предыдущей статье.

Изображение

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

Создадим для него простой нодовый материал. Из сокета Global получаем вертикальный градиент (1) на уровне предполагаемого горизонта. После небольшого сжатия и смещения его нодой Squeeze Value (2) добавим цвет (3). Результат выводим напрямую в Output без использования промежуточной ноды материала, чтобы этот объект не реагировал на освещение.

Изображение

Настройка окружения

Настроим туман во вкладке World. Fog density задает плотность тумана, Fog color - его цвет. Включим освещение от окружения (ambient), используя опцию Environment Lighting, настроим его интенсивность (Energy). Выберем модель двухцветного полусферического освещения Sky Color, назначим цвета зенита Zenith Color и горизонта Horizon Color.

Изображение

На сцене расположим два источника света. Первый типа Sun будет создавать основной свет сверху. На нём необходимо выставить Generate Shadows, чтобы движок отбрасывал тень именно от него. Второй источник света (тоже Sun) расположим внизу и направим вертикально вверх. Этот источник будет имитировать свет от лавы.

Изображение

Добавим камеру для осмотра экспортированной сцены. В настройках камеры на панели Blend4Web убедимся, что режим работы камеры (Move style) имеет значение Target, т.е. камера перемещается вокруг некоторой точки. Там же зададим координаты точки вращения - Target location.

Для удобства обзора сцены также настроим ограничения камеры по расстоянию и вертикальному углу в разделе Camera limits.

Изображение

Добавление сцены в просмотрщик сцен

На этом этапе можно сделать пробный экспорт сцены: File -> Export -> Blend4Web (.json). Экспортированную сцену добавим в список просмотрщика сцен external/deploy/assets/assets.json, используя любой текстовой редактор, например:

    {
        "name": "Tutorials",
        "items":[

            ...

            {
                "name": "Game Example",
                "load_file": "../tutorials/examples/example2/main_scene.json"
            },

            ...
        ]
   }

Откроем в браузере просмотрщик сцен apps_dev/viewer/viewer_dev.html, перейдем во вкладку Scenes и выберем сцену, добавленную в категорию Tutorials.

Изображение

Имеющиеся в просмотрщике сцен инструменты позволяют настраивать параметры сцены в реальном времени.

Создание материала лавы

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

Изображение

Материал состоит из нескольких блоков. В первом блоке (1) при помощи ноды TIME (2) происходит постоянное смещение черно-белой маски по UV-развертке, создавая эффект движения потоков лавы.

+ Показать

Справка

Нода TIME представляет собой нодовую группу с зарезервированным именем. Эта группа замещается алгоритмом генерирования времени в движке Blend4Web. Чтобы добавить эту ноду, достаточно создать нодовую группу с именем TIME и выходом типа Value. Внутри она может оставаться пустой или, например, иметь ноду Value для удобного тестирования её работы в среде Blender.

В других двух блоках (4 и 5) модифицированная маска растягивает и сжимает UV-развертку в некоторых местах для создания эффектов завихрений и перетекания лавы. Результаты смешиваются между собой  в блоке 6, имитируя текучую массу лавы.

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

Изображение

Для имитации свечения лавы в сокет Emit подаётся черно-белая маска (8), полученная на основе преобразованной текстуры лавы и специальной процедурной маски (9), которая снижает эффект свечения на удалении.

Заключение

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

Изображение

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

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

#Blend4Web, #game, #WebGL, #You Won't Fry Me

5 сентября 2014

Комментарии [7]