Как создавалось артовое оформление окружения для карты Sanctum в Counter-Strike 2

Создание Environment Art для Sanctum

Sanctum — это соревновательная карта Counter-Strike 2 в пышных джунглях вокруг древнего храма, который восстанавливают. Она сочетает реальную историческую архитектуру с новыми творческими идеями для отличных визуальных эффектов и геймплея.

Карта была добавлена в официальный пул соревновательных карт CS2 22 января 2026 года после нескольких месяцев совместной работы дизайнеров уровней, художников по окружению и цифровых художников. В этой статье описан процесс разработки Environment Art, специальные инструменты, которые я создал, и ключевые художественные решения.

Немного обо мне, Твист: я художник по окружению с опытом работы в игровых движках, таких как Unreal, Unity, а также в рендеринге статических изображений и кинематографических роликов в Vray и Octane. Я также создал Hammer5Tools — набор утилит для ускорения рабочих процессов создания карт CS2. Он развивался во время работы над Sanctum для решения реальных задач.

Мой вклад в проект

Рубан начал проект как владелец и дизайнер уровней. Я пришёл позже и взял на себя визуальную часть и возглавил производство, настраивая макеты для плавных визуалов. Мои основные обязанности: определение и создание полного художественного видения, создание ключевых ассетов и материалов, создание большей части финального контента, контроль текстур, освещения и согласованности, помощь в настройке макетов и геймплея, а также разработка Hammer5Tools для рабочего процесса.

Креативное направление и концепция

Когда я присоединился к проекту, тема уже была определена, но геометрия ещё не была окончательной, так что мы всё ещё могли настроить сеттинг. Подобные карты с джунглями и храмами уже существовали в мастерской CS2, поэтому наша карта одновременно казалась неоригинальной, рискованной и дорогой.

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

Карты с джунглями и храмами распространены в Counter-Strike 2, но я хотел создать уникальный подход вместо того, чтобы копировать других. Основное вдохновение: Камбоджа, Ангкор-Ват, один из самых известных храмов в мире. Мы не могли скопировать его в точности, хотя это священное буддийское место, которое требует уважения, чтобы избежать проблем.

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

Дизайн уровня

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

Первый проход был больше похож на черновик. Может показаться, что все формы одинаковые, но это не так. Я потратил огромное количество времени на тестирование этой карты на игровом уровне вместе с парой хороших друзей: syncope, g3om и другими.

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

Наряду с геймплеем и архитектурными зданиями я работал над созданием красивых визуальных идей на карте. Например, это дерево было вдохновлено реальными деревьями, растущими в Ангкор-Вате. Модель дерева была сформирована без дождей и доработана мной.

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

На самом деле она оказалась не такой полезной, как я думал во время её создания. Но некоторые люди в сообществе дизайнеров уровней Counter-Strike 2 сочли этот инструмент полезным, так что я рад внести свой вклад в сообщество картографов CS2!

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

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

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

Визуальная часть

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

Когда я был удовлетворён идеями и композицией, я перешёл к созданию контента. Сначала я закончил один угол, чтобы установить качественный ориентир для карты, более технический, чем художественный. Часто это лучший способ выяснить, какой контент нужен сцене. Пользовательский контент для меня сложен, но 80% карты использует его. Оставшиеся 20% состоят из сторонних активов, таких как те, что от Dekogon или из стандартной библиотеки Counter-Strike. В конце из-за нехватки времени пришлось использовать сторонние активы, но я интегрировал их, устранил технические проблемы и переименовал некоторые для уникального вида.

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

Особенностью этого этапа стали настенные рисунки и частицы. Я невероятно рад, что работал с талантливым цифровым художником Гуриным. Он нарисовал фантастические картины по теме карты. Все они рассказывают мини-истории, связанные с Counter-Strike, например, установка бомбы, режим wingman, соревновательная игра и вулкан.

Цифровое искусство

Все картины были сделаны нашим цифровым художником Гуриным.

Целью было передать ощущение Ангкор-Вата, не копируя его напрямую. Сначала идея заключалась в том, чтобы воссоздать картины из храма Ангкор-Ват и адаптировать их к сеттингу CS2.

Однако мы отказались от этого подхода на раннем этапе разработки, потому что я не хотел рисковать проблемами, вызванными слишком большим сходством с реальным местом.

Даже небольшие элементы были изменены или подвергнуты цензуре на поздних этапах производства.

Это был огромный объём работы, и я искренне благодарен Гурину, который работал над этими картинами на протяжении всего развития проекта.

Когда все настенные рисунки были готовы, я обработал их в Substance 3D Designer и добавил некоторые детали.

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

Частицы

Частицы и вулкан: в сообществе создателей карт для Counter-Strike 2 никто раньше такого не делал, и это было сложно создать. Взрывы — это самая простая часть; их легко сделать. Ничего сложного. Но потоки лавы... Я пробовал разные методы, такие как анимация шейдеров, анимация сетки и морфинг. Но ни один из них не мог дать достойный вид и производительность. Частицы были единственным выходом, и я бы сказал, что это было не так просто, как может показаться.

Сначала я думал, что есть способ рассчитать столкновение частиц с сеткой вулкана. И это прекрасно работало с одним небольшим нюансом: это не работало с 3D-скайбоксом.

Объяснение для тех, кто не работал с движком Source 2:
3D скайбокс — это ещё одна карта, которая всегда работает поверх вашей корневой карты. На этой карте может быть геометрия, такая как горы и т. д. Это позволяет нам создавать приличный туман и разделять разрешение карты освещения. Конечно, есть и технические причины: ограничение размера карты. Вы не можете создать большую карту открытого мира в Source 2; нужно укладываться в ограничения. Поэтому в Source 2 мы используем 3D скайбокс в сочетании с обычным скайбоксом.

Возможные решения были такими: перенести вулкан из скайбокса на корневую карту, но в этом случае я бы потерял эффекты тумана, применённые к этой сетке, плюс проблемы с производительностью.

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

В конце концов, я нашёл решение! Оно было связано с использованием странной системы костной анимации и систем частиц в комбинации. Частица потока лавы использует свою предыдущую позицию для установки конечной точки, а начальная точка — это точка появления. Затем со временем она модифицируется, меняет цвет и форму.

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

Результат в игре

В Source 2 есть потрясающая графическая функция: объёмный свет. Но в ветке CS2 эта функция была отключена. Я нашёл решение, как подделать этот эффект, используя пользовательские частицы.

Создание контента

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

Ассеты

Для архитектурных элементов, камней и блоков я использовал ZBrush для скульптинга. Сначала я получил правильные формы и размеры в самом редакторе Source 2 World Editor, затем экспортировал их в Blender. Используя аддон BlenderToZBrush, я загрузил их в ZBrush для скульптинга и обратно через GoZ. После этого я немного уменьшил количество полигонов для высокополигональных сеток, потому что нет смысла использовать модель из 15 миллионов полигонов, когда можно получить почти такой же результат с моделью из 1 миллиона полигонов.

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

Для создания текстур я сделал несколько пользовательских базовых материалов в Substance 3D Designer, а затем настроил умный материал в Substance 3D Painter, чтобы быстро применять его к новым ассетам.

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

Материалы для плитки

Для плиточных сеток и материалов, хотя я знаком с Substance 3D Designer и знаю, как построить этот материал там, мне не нравится такой подход, потому что результаты могут выглядеть некачественно. Во многих случаях быстрее вручную вылепить сетки, а затем текстурировать их, чем выстраивать всю установку в Substance 3D Designer.

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

Растительность

В этом проекте я почти не использовал SpeedTree, но всё же использовал, и это весело, я бы сказал. Мне нравится, как можно управлять деревьями вручную и динамически назначать цвета вершин.

Умные пропсы

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

Если вы знакомы с Unreal Engine, то наиболее точное описание умных пропсов — это ограниченные blueprint'ы, ориентированные на создание контента. Эти инструменты позволяют рандомизировать размещение объектов, упрощают использование модульных наборов и многое другое!

Мне понравилась эта функция Source 2, но отсутствие существующих инструментов для неё заставило меня создать свои собственные. Я выбрал Qt, потому что это самый мощный фреймворк GUI (и редактор карт Source 2 создан с его помощью), и Python, потому что у меня не было серьёзного опыта программирования.

Проект, который я назвал Hammer5Tools: «Hammer» обозначает редактор карт Source 2, а «5Tools» — это различные утилиты, которые в него включены: редактор загрузки, редактор звуковых событий, редактор умных пропсов, создатель групп ассетов и редактор горячих клавиш.

Идея всего этого проекта заключалась в том, чтобы заполнить пробел в отсутствующих инструментах для Source 2. Я уверен, что у сотрудников Valve есть такие инструменты; в файлах движка даже есть несколько иконок. Но по какой-то причине они не публикуют их в сообществе.

Конвейер контента Source 2 разделён на две папки: content и game. В отличие от Unreal Engine, который преобразует ассеты в свой собственный формат, а затем компилирует их для использования в игре, Source 2 делает это иначе: ваши исходные файлы должны быть в папке content, а затем Source 2 компилирует их в свой собственный формат.

Чтобы определить, какой файл какой, существует несколько форматов файлов:

• Vmdl — обозначает модель Valve.
• Vmat — обозначает материал Valve.
• Vsmart — обозначает умный проп Valve.
• Vtex — обозначает текстуру Valve.

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

Я решил, что создание полноценного 3D-вьюпорта для меня — это перебор, потому что в этом нет смысла.

Первым инструментом, который был создан, является редактор загрузки; этот инструмент предоставляет функции для создания скриншотов на карте и добавления загрузочных экранов вместе с иконками и описаниями. Это был самый простой инструмент, но мне пришлось изучить основы Python и Qt.

После небольшой паузы я начал работать над редактором звуковых событий. Soundevent — это описание того, как должны воспроизводиться звуковые файлы, где и какой должна быть громкость.

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

В то же время работа над Sanctum продолжалась, и мы с Rainless начали создавать контент. Часто нам требовалось огромное количество вариаций для моделей, и импорт всех их в движок занимал много времени… Именно тогда родился AssetGroupMaker. Чтобы ускорить процесс импорта похожих ассетов, я создал этот инструмент.

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

Все конфигурации хранятся в файле с именем %folder_name%.hbat.

Пример каталога был бы таким:

Этот инструмент оказался очень полезным, потому что в Unity или Unreal Engine нельзя изменить атрибуты для нескольких ассетов одновременно, а у нас их было много! На самом деле, он работает почти со всем, что имеет небинарный формат.

Честно говоря, в то время я не слишком разбирался в звуках в Counter-Strike 2 и в Source 2. Но я нашёл уже готовую библиотеку KV3 для Python у kristiker. Сразу после обнаружения библиотеки я начал работу над этим инструментом, но у него был немного странный дизайн пользовательского интерфейса и плохая структура с точки зрения кода. Поэтому вопрос о переписывании редактора всегда стоял.

После публикации в X к моему серверу Discord присоединился талантливый саунд-дизайнер bman, и я попросил его помочь с новой концепцией для редактора Soundevent: как он должен выглядеть для того, кто работает со звуками.

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

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

«...Я использовал Ghidra, чтобы изучить cs2.exe и найти функцию, которая интерпретирует данные кривой громкости. Я не уверен, но думаю, что также использовал Cheat Engine, чтобы выяснить, как хранятся фактические входные данные после их преобразования из текстового файла».

«Но если я и использовал Cheat Engine, то только в экземпляре CS2, который запускается при запуске инструментов моддинга; никогда при обычном запуске игры».

Найти функцию было непросто, и как только он её нашёл, ему пришлось преобразовать декомпилированный код на C в нечто более читаемое на C++, а затем перевести его на Python.

Сразу после того, как я закончил первую версию редактора Soundevent, я начал работу над редактором Smartprop, который мне был нужен больше всего. Имея некоторый опыт работы с первой версией редактора Soundevent, я быстро разработал основы программы, несмотря на то, что это был гораздо более сложный редактор, чем Soundevent Editor.

Файлы Smart prop просты в построении; они состоят из блоков: Element, Modifier, Selection Criteria. Элементы могут иметь дочерние элементы или быть дочерними по отношению к другим элементам. Модификаторы и критерии выбора — это дополнительные параметры для описания функций элементов. Некоторые элементы не могут иметь дочерних элементов, например, smartprop или model.

Для каждого параметра можно задать переменную или выражение.

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

Я рад видеть свою карту в официальном пуле карт Counter-Strike 2. Я проделал так много работы и потратил столько времени, чтобы всё это осуществить. И спасибо Рубэну, который дал мне возможность показать свои навыки в области окружающей среды на его карте.

Благодарности:

Twist — Steam, X, ArtStation
rainless — Steam, X
Рубэн — Steam, X, ArtStation
GURIN — Steam
rastick — Steam

Твист, 3D Environment Artist