Как мы выбирали визуальный стиль⁠⁠

Мы стремились создать мир русской сказки, который был бы понятен с первого взгляда и мог быть воплощен небольшой командой. Для этого мы провели серию экспериментов: использовали разные камеры, форматы 3D/2D и гибридные подходы к визуалу.

Сначала — камера и сцена

Что пробовали

• Top-down (вид сверху) идеален с точки зрения геймплея, но сцена теряет объем: силуэты сплющиваются, а эмоции, которые мы хотели вызвать картинкой, становятся менее выразительными

• Перспектива с плавающей камерой смотрится динамично, но в ней много технических проблем: перекрытия выглядят нечетко, а производство сложнее

• Изометрия под углом 45° (ортографический вид) обеспечивает отличную читаемость. На расстоянии легко различимы дистанции, направления и силуэты

Почему выбрали изометрию 45°

Мы применяем 2D-спрайты в трёхмерном пространстве с ортографической изометрической камерой. Сцены создаём на основе Unity Terrain, добавляя рельефные скульптуры и покраску. Сверху накладываем спрайтовые слои с эффектами движения, реализованными через шейдеры.

3D, 2D или гибрид?

Чистый 3D

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

Чистый 2D

Есть возможность делать всё быстрее и предсказуемее, чем с 3D, но приходится имитировать глубину окружения.

Гибрид

Варианты «2D-персы на 3D-сцене» и «3D-объекты среди 2D». Можно добавить объема, сортировку, перекрытия, швы, но это опять же усложнение пайплайна ради сомнительной выгоды.

Решение

Мы экспериментировали с чистым 3D, чистым 2D и их сочетаниями. В итоге выбрали гибридный, 2D-арт в 3D-сцене.

• База сцены: Unity Terrain — это инструмент, который позволяет быстро создавать рельеф, береговые линии и высотные «ступени». Он делает карту более читаемой и направляет взгляд игрока в изометрической проекции

• 2D-спрайты — персонажи, растительность, архитектура, декор — выполнены в едином стиле

• Динамичность сцены: шейдеры для ветра, травы и воды

• Контроль кадра: ортографическая изометрия. Камера минимизирует неожиданные ракурсы, создавая четкую и понятную сцену

Рисовка

Пробовали

• Прокраска с мягкими градиентами — красиво, но теряется читаемость

• Скетчовая подача с большим количеством линий — выразительно, но грязнит кадр

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

Окружение

Мы экспериментировали с гифками, видео и скелетной анимацией. В итоге решили использовать спрайтшиты. Они ускоряют разработку и позволяют быстро реагировать на изменения. А для расстановки объектов мы пробовали следующие подходы:

• Ручная расстановка. Максимум контроля, но слишком медленно

• Стандартные инструменты Terrain. Хороши, но при нашей изометрии и использовании спрайтов сложно и неудобно управлять уровнями перекрытия

• Ассеты, мы перебрали много разных, но в итоге выбрали один и немного доработали его под нас:

  • Добавили возможность выбирать слои для «посева»: верх (деревья), средний (кусты), низ (трава/камни)

  • Прикрутили учитывание тэгов и слоёв, чтобы не сажать объекты на дороги, скалы и так далее

  • Подключили обход триггеров, коллайдеров и мешей, так как этого в коробочной версии не было

Как итог: террейном задаем форму, направления, общие границы биомов, а ассет добавляет деталей.

Дороги, берега и реки

Основу русла рисуем через Unity Terrain, а далее используем Dreamteck, так как он даёт очень гибкую настройку геометрии, например:

• Дороги - это сплайны с текстурой поверх Terrain

• Берега делаем похожим образом, но там есть нюансы с правильным наложением, так как сверху будет еще и вода

• Вода, создаем кастомную плоскость воды и дальше всё дело за нашим шейдером, который её оживляет

Итог

• Камера в изометрии (под углом в 45°)

• Основание сцены: Unity Terrain

• Контент: 2D-спрайты в 3D-пространстве

• Дороги, берега: сплайны Dreamteck + спрайтовые переходы поверх Terrain

• Растительность: 1 спрайт + шейдер ветра; расстановка через доработанный ассет

• Вода: плоскость через Dreamteck, и всё остальное через шейдер

Следите за разработкой:
🔗 VK
🔗 Telegram
🔗 skazgame.ru
🔗 RuTube