Кастомизация загрузочных экранов карт в CSGO с помощью HTML

Разработка игр | 14 декабря 2021 | Редакция

Вы когда-нибудь в процессе загрузки карты задумывались, как Valve добавляет на экран ожидания эти чертовы иконки, фоновое изображение, схему карты и все остальное? Если да, то эта статья как раз для вас.

Этот GitHub-репозиторий поможет вам понять, где находятся эти файлы.

Примечание: Текст, взятый в стрелочки, означает, что вместо него нужно что-то вставить. Сами стрелочки писать не надо, они нужны лишь для того, чтобы было понятнее, где находятся элементы, которые надо поменять. Например, вместо <ИмяКарты>.png можно написать de_dust2.png.

Фон

Для фона в загрузочном экране используется PNG-файл. Вам нужно будет создать 2 изображения: у одного должно быть разрешение 640×360, а у другого – 1920х1080. Изображение 640х360 поместите сюда:

“../Counter-Strike Global Offensive/csgo/materials/panorama/images/map_icons/screenshots/360p/<ИмяКарты>.png”

А изображение 1920×1080 сюда:

“../Counter-Strike Global Offensive/csgo/materials/panorama/images/map_icons/screenshots/1080p/<ИмяКарты>.png”

Радар

Загрузочный экран использует файл радара, заданный по умолчанию. Если вы хотите поставить вместо радара изображение, которое игрок на карте видеть не должен (например, скриншот карты с некими героями, как у некоторых кооперативных карт Valve), то спрячьте его где-нибудь на высоте 32 000 юнитов от нулевой точки карты.

Настройки этого изображения задаются в уже существующем TXT-файле радара с помощью такого кода:

"verticalsections"
{
    "default" //<ИмяКарты>_radar.dds
    {
            "AltitudeMax" "<МаксЗначение>"
            "AltitudeMin" "<МинЗначение>"
    }
    "<ИмяСекции>" //<ИмяКарты>_<ИмяСекции>_radar.dds (можно создать несколько секций)
    {
        "AltitudeMax" "<МаксЗначение>"
        "AltitudeMin" "<МинЗначение>"
    }
}

Финальные версии файлов, нужных для радара:

<ИмяКарты>.txt
<ИмяКарты>_radar.dds (радар по умолчанию, загрузочный экран)
<ИмяКарты>_<ИмяСекции>_radar.dds (спрятанное на высоте изображение)
<ИмяКарты>_radar_spectate.dds (для наблюдателей)

Проблема с вертикальными секциями радара

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

Пример проблемного кода:

"aim_underground_build1"
{
    "material" "overviews/aim_underground_build1"
    "pos_x" "-1688.000000"
    "pos_y" "1328.000000"
    "scale" "1.930000"
    "verticalsections"
    {
        "default"
        {
            "AltitudeMax" "10000"
            "AltitudeMin" "5000"
        }
        "layer0"
        {
            "AltitudeMax" "5000"
            "AltitudeMin" "344"
        }
        "layer1"
        {
            "AltitudeMax" "344" // проблема в том, что layer2 ниже
                                // имеет те же параметры
            "AltitudeMin" "-10000"
        }
        "layer2"
        {
            "AltitudeMax" "344"
            "AltitudeMin" "-10000"
        }
    }
}

Пример корректного кода:

"aim_underground_build1"
{
    "material" "overviews/aim_underground_build1"
    "pos_x" "-1688.000000"
    "pos_y" "1328.000000"
    "scale" "1.930000"
    "verticalsections"
    {
        "default"
        {
            "AltitudeMax" "10000"
            "AltitudeMin" "5000"
        }
        "layer0"
        {
            "AltitudeMax" "5000"
            "AltitudeMin" "160"
        }
        "layer1"
        {
            "AltitudeMax" "160"
            "AltitudeMin" "-10"
        }
        "layer2"
        {
            "AltitudeMax" "-10"
            "AltitudeMin" "-10000"
        }
    }
}

Заголовок

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

Иконка карты

Для иконки загрузочный экран использует SVG-файл. Для создания и экспорта SVG-файла Valve использует Adobe Illustrator.

Как экспортировать свой SVG-файл

Создайте документ нужного разрешения (Valve использует 35×35 или 80×80), затем создайте саму иконку для карты/режима и сохраните ее (File > Save As) тут:

“../Counter-Strike Global Offensive/csgo/materials/panorama/images/map_icons/map_icon_<ИмяКарты>.svg”

Настройки в окне Save As в Adobe Illustrator

SVG Profiles: SVG 1.1

Fonts:

Type: SVG
Subsetting: None (Use System Fonts)

Advanced Option:

CSS Properties: SVG
Decimal Places: 3
Encoding: Unicode (UTF-8)
Addaptive SVG / Responsive: Disabled

Описание

Зайдите в папку карты, создайте пустой TXT-файл и назовите его, как BSP-файл. Например, de_dust2.txt.

Добавление официальной команды со списком авторов

Откройте этот TXT-файл и впишите туда вот такой код:

COMMUNITYMAPCREDITS:
THE OWL
Garry
Robert
Box

RGB

список авторов

Использование HTML-синтаксиса

Хотя в примере ниже я снова воспользовался командой COMMUNITYMAPCREDITS, вы можете воспользоваться HTML-синтаксисом и без нее.

Откройте TXT-файл и впишите туда следующий код (для цветов используйте HEX или RGB).

COMMUNITYMAPCREDITS:
<b>THE OWL</b>
Garry
<font color="rgb(255,255,0)">Robert</font>
<font color="#00FFFF">Box</font> 

<font color="rgb(255,0,0)">R</font><font color="rgb(0,255,0)">G</font><font color="rgb(0,0,255)">B</font>

html-синтаксис в Source