Создаем игру. Часть 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-развертке, создавая эффект движения потоков лавы.

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

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

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

Заключение

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

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

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

Изменения

[2014-06-17] Изначальная публикация.