Дизайн карт реалистичной RTS: Чему мы научились, рисуя войну
От автора:
Привет, читатель!
Меня зовут Игорь Подмогильников, я арт-директор студии-разработчика мобильных игр Hypemasters. Здесь мы работаем над World War Commander, классической мобильной RTS на Unity. В статье расскажу как мы добивались эффекта реализма на картах в сеттинге WW2, может кому-то это поможет в работе над похожими проектами, да и просто будет интересно.
Это мой первый материал, поэтому немного про бэкграунд:
Начинал с рисования во флеше коротких мультиков для рекламы, с 2006 года я в геймдеве, работал с Vogster, ex-Mail.ru, Game Insight и другими, в 2020 присоединился к Hypemasters. Рисую сколько себя помню, занимаюсь лепкой-скульптурой. Вне работы тоже рисую много, от академического рисунка до sci-fi и fantasy, всегда ношу с собой планшет, в котором копятся персонажи несуществующих вселенных. Думаю, однажды мы с командой найдем им применение.
На первых порах мне очень помогал опыт тех, кто им делился, теперь моя очередь, поехали!
С ЧЕГО ВСЕ НАЧИНАЛОСЬ
Это амбициозная цель — создать мобильную RTS с реалистичной графикой. Это значит, что все решения, от текстур до масштаба моделей, должны сохранять ощущение реальности происходящего на экране. И если на планшете еще можно представить себе кинематографическую картинку с множеством читаемых деталей, то перенести это чувство на смартфон намного сложнее.
На момент MVP проект уже определился с визуальным стилем, но тогда в студии еще не было арт-директора. Создание карт началось с размещения геймплейных и стратегических элементов для работы над кор-геймплеем и базового подбора гаммы, текстур и элементов рельефа с точки зрения арта. Получилось скромно:
Пол года спустя, к команде присоединился я, и передо мной стояла задача сделать из грубого наброска настоящую красоту. Мне карта казалась плоской и скучной, играется круто, выглядит слабо — логичный результат, учитывая что арт не был главным приоритетом. Но вместе мы решили, что графика должна стать одной из главных фишек игры, и моей задачей стало преобразить карты, добавив им реализма.
КАКИЕ ВЫБРАЛИ РЕФЕРЕНСЫ
Начали, конечно, с поиска рефов. На мобайле жанр RTS представлен скромно, и даже собрав список похожих мобильных игр мы не нашли картинку, к которой хотели приблизиться. Я считаю лучше задавать планку повыше, чтобы получился наилучший возможный результат. Зачем ограничивать себя в амбициях? Если делаем ставку на графику, значит она должна вызывать вау-эффект.
Так мы пришли к выводу, что стоит смотреть в сторону ПК-проектов. Такая графика на мобилках будет смотреться достойно и через два-три года. За основу взяли Iron Harvest и Company of Heroes:
Когда я работаю с референсами, я стараюсь выделить “фишку”. На этих скринах много всего — танки, солдаты, обломки зданий, взрывы, растительность. Я набрасывал много эскизов, но смена объектов или гаммы не давала такого же реализма. Фишка в чем-то другом.
Что общего у всех объектов и поверхностей на карте? Это наверняка что-то простое, о чем мы просто не задумываемся. И у меня появилась идея!
КАК МЫ ДОБИВАЛИСЬ РЕАЛИЗМА
- ВОЗДУХ
Что делает живопись произведением вне времени? Нам помогают опыт и эмпатия, мы буквально переносимся туда. Картины передают эмоции сквозь время и расстояние, и даже житель большого города с замиранием сердца рассматривает будто дрожащие кроны деревьев и туман над реками. Мы буквально чувствуем свежий воздух, глядя на картинку.
Вот и ответ -воздух! Воздушная перспектива, выражаясь терминологии классической живописи. Этот прием, дает зрителю увеличенную глубину изображения и погружает его в пространство. Дымка скрывает детали, заставляет додумывать, расширяет фантазию. В реальности мы “видим” воздух только когда он чем-то заполнен и не задумываемся что он вокруг нас. Но в графике этот эффект придает реализма, например если объект окружен туманом, нам легче поверить, что он настоящий.
Взяв этот прием из изобразительного искусства, мы начали думать как внедрить его в нашу игру. В большинстве RTS бой строится на плоском изображении, которое заполняет весь экран — линии горизонта у него нет. Зато есть туман войны. В нашей игре он уже чем-то напоминал прием воздушной перспективы, но выглядел грубо, как временное решение. Мы решили проверить: что если накинуть поверх тумана и границ карты светлый тонированный градиент?
Результат показал, что мы на правильном пути! Технически это оказалось несложно, наш тех артист скопировал прием из фотошопа — сделал плоскость с градиентом расположив ее перед игровой камерой со смешивающим наложением. Теперь когда игрок перемещает камеру по карте, он воспринимает туман войны и границы карты как некую дымку в пространстве, а этот эффект нам и нужен. Это и есть воздушная перспектива. Начались эксперименты с тоном и цветом дымки, с туманом войны и без.
Мне кажется именно этим эффектом мы задали правильный вектор. В процессе на картах стали появляться новые текстуры и детали, которые тоже добавляли реализма картинке.
Карты однозначно ожили, но перед добавлением новых объектов и деталей остались еще две важные настройки, связанные с реализмом — свет и цвет.
2. СВЕТ
Работа со светом редко обходится без технических трудностей. Их нам создала разрушаемость объектов на картах — реалтайм освещение сильно нагружает железо, но тень не может оставаться прежней когда половина здания разрушена. Во многих играх сейчас используется гибрид реалтайм и запеченных освещений, но мы его отбросили, на мобайле производительность важнее.
Решили запекать. Попытка усложнялась реальной физикой — от разрушенного объекта оставались артефакты и черные пятна. Нам это не подходило, но и от разрушаемости отказываться нельзя, это тоже часть реализма игры.
Мы сделали “фейковую” разрушаемость, не используя физическую модель. Объект режется на несколько частей и по мере его разрушения нарезанные части просто скрываются, а маскируем мы это через fx пыли, дыма и частиц. Так мы добились эффекта разрушаемости без значительной нагрузки на железо и смогли вернуться к работе со светом.
Как понять какой карте подойдет пасмурное освещение, а какой солнечное?
Мы решили опираться на ассоциативное мышление: карта с пляжем ассоциируется с теплом, значит станет солнечной, а карта с морским портом — пасмурной. Конечно, в жизни бывает и по-другому. Но в этом отличие реальности от реалистичной графики, чем больше картинка на экране соответствует привычным ожиданиям игрока, тем больше он верит, что она настоящая. Мы знаем, что на пляже может пойти дождь, но хотим мы его видеть именно солнечным.
Сделали эскизы, на их основе настроили нужный свет и запекли его в карты текстур. Это значительно изменило впечатления от изображения, ушла однообразность, карты стали разными по настроению, освещение стало соответствовать теме локаций.
3. ЦВЕТ
Оставалась работа с цветом. Чтобы создать реалистичную гамму, нужно много работы с фото-референсами. Если сравнивать реальные изображения со скриншотом ранней версии, видно сразу несколько проблем:
- Вся гамма зелено-“грязная”, в реальности оттенков больше
- Ритм и размер текстур (рябь на земле), создают избыточный шум и однообразие
- В тенях много черного и серого, нет оттенков
Решаем проблемы по пунктам:
- Добавляем оттенков, сохраняя прежнее цветовое настроение
- Применяем текстуры большего разрешения, накидываем декали, например лужи и следы от колес, они тоже добавляют цветовые оттенки
- Поднимаем тон теней, снижаем контраст и получаем гораздо более правдоподобные тени от объектов
Получаем результат (по-моему, небо и земля):
КАКИЕ СДЕЛАЛИ ВЫВОДЫ
С момента начала работы над проектом мы точно приблизились к желаемому качеству графики карт, сделали их разнообразными, реалистичными и запоминающимися.
Какие сделали выводы:
- Воздушное пространство карт (туман/дымка) даёт +100500 к реализму
- Иногда реалистичная графика — это соответствие нашим ожиданиям, а не сходство с жизнью
- На мобайле тени на картах лучше запекать, даже на картах с разрушаемостью
- В работе с цветом важно разнообразие оттенков, чем их меньше, тем меньше мы поверим в реальность объекта
Предстоит еще много работы, чтобы наш игрок мог сказать “это что, настоящая стратегия на телефоне?” Нужна переработка архитектуры, флоры, работа с террейном, юнитами — но мы готовы к новым вызовам и будем рады делиться прогрессом с вами!
Бонусом прикладываю три скриншота, продемонстрировать реальность и ожидания
