Найти тему
Slavania

Как создавался визуал уровней в Slavania.

Создание уровня - многоступенчатый процесс, доведённый до четкого пайплайна (этап разработки). Но на это потребовалось время и многочисленные эксперименты.

Начало

Изначально уровень выглядит так.

Общий контур уровня
Общий контур уровня

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

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

Предварительный эскиз внешнего вида локации
Предварительный эскиз внешнего вида локации

Получив концепт, болванку с платформами и готовые пропсы художник начинает собирать уровень на сцене в Unity.

Рабочее окно со сборкой уровня
Рабочее окно со сборкой уровня

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

Пробы сборки уровня
Пробы сборки уровня

Первая автоматизация.

Первым инструментом для автоматизации процесса стал supertilemap.

Этот инструмент позволяет программировать кисти с конкретными условиями. Например, если платформа из 8-ми клеток, то кисть поставит левое и правое окончание, а середину наполнит в произвольном порядке.

Так дело пошло гораздо быстрее.

Первый набор кисточек
Первый набор кисточек

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

Отрисованная платформа
Отрисованная платформа

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

Для маскировки излишне ровной земли у нас появились специальные кисточки с холмами, сталактитами и новый инструмент для них - ntool.

Кисти для пропсов

На самом деле ntool это инструмент для 3D, но мы его адаптировали для 2D. Это тоже кисточка, но в качестве "краски" в неё можно положить любой префаб. От картинки до спецэффекта. Так же можно настроить различные параметры типа колебание величин или частота отрисовки.

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

Набор кистей с партиклями
Набор кистей с партиклями

Параллакс.

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

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

Кусок сцены с различными слоями параллакса
Кусок сцены с различными слоями параллакса

Просмотр параллакса в режиме сборки.

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

Схема того, как меняется внешний вид объектов после запуска игры.
Схема того, как меняется внешний вид объектов после запуска игры.

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

Экран сборки без окна просмотра параллакса и с включенным окном
Экран сборки без окна просмотра параллакса и с включенным окном

Постпроцессинг.

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

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

Сцена без включенного постпроцессинга
Сцена без включенного постпроцессинга
Размытые дальние фоны
Размытые дальние фоны
Тёмно-синяя гамма в мире мёртвых
Тёмно-синяя гамма в мире мёртвых
Красные края при маленьком количестве жизней
Красные края при маленьком количестве жизней