Jump to content

Customizing the loading screen for your map in CS:GO


THE OWL

Introduction
Have you ever looked at Valve's map loading screens and can't figure out how they added those damn icons, backgrounds, and more? This article will provide some information about it.


A repository on Github that will allow you to better understand the location of the files.

Notice: Text surrounded by arrows indicates what needs to be entered here. Arrows should not be written, it is only necessary for a more convenient understanding of important elements. For example, instead of <mapname>.png I will write de_dust2.png
Notice: Spoiler blocks replaces code blocks


Background
The loading screen uses PNG images as background. You need to create two images, where the first image will be have resolution 640x360 and the second will be have 1920x1080. After creation, you need to put the images in these paths:

Spoiler

640x360
../Counter-Strike Global Offensive/csgo/materials/panorama/images/map_icons/screenshots/360p/<mapname>.png 

1920x1080
../Counter-Strike Global Offensive/csgo/materials/panorama/images/map_icons/screenshots/1080p/<mapname>.png


Radar
Loading screen uses default radar file. If you want to use some image instead of the radar that the player should not see on the map (for example, a screenshot of the map with heroes, as is done in some of Valve's cooperative maps), then you should use heights that will hide the unnecessary image somewhere in 32 thousand units from the zero point of the map.

In the already created TXT file of the radar, we prescribe this code that adjusts the high-altitude images:

Spoiler

"verticalsections"
{
    "default" // <mapname>_radar.dds
    {
            "AltitudeMax" "<valueMax>"
            "AltitudeMin" "<valueMin>"

    }
    "<sectionname>" // <mapname>_<sectionname>_radar.dds (you can create multiple sections)
    {
        "AltitudeMax" "<valueMax>"
        "AltitudeMin" "<valueMin>"

    }
}

The final version of the files needed for the radar:

Spoiler

Configuration
../csgo/resource/overviews/<mapname>.txt


Default Radar, Loading Screen
../csgo/resource/overviews/<mapname>_radar.dds

High-Altitude Image
../csgo/resource/overviews/<mapname>_<sectionname>_radar.dds

For Spectators
../csgo/resource/overviews/<mapname>_radar_spectate.dds


The problem with vertical sections of the radar
If the sections contain the same values in AltitudeMax and AltitudeMin, then the game just crashes without any messages. The same values can only be in one of the parameters!

Problem code example:

Spoiler

"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"
        {
            // The problem is that layer1 has the same parameters
            "AltitudeMax" "160"
            "AltitudeMin" "-10"
        }

    }
}

Correct code example:

Spoiler

"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"
        }
    }
}


Title
I tried to find a file that regulates the names of official maps, but nothing came of it. For now, the name depends on the Steam Workshop and some sort of Valve magic file.


Map icon
The loading screen uses SVG for the map icon. Valve uses Adobe illustrator to create and export the svg.

Export your svg
You need to create a document with the resolution you want (Valve use 35x35 or 80x80), create your nice gamemode/map icon, and then save it (File > Save As) to this path:
"../Counter-Strike Global Offensive/csgo/materials/panorama/images/map_icons/map_icon_<mapname>.svg"

Settings for the Save As panel
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

 

Description
Go to the map folder and create a blank TXT there and name it with the BSP name, for example: de_dust2.txt

Adding an official command with a list of authors
Open an TXT file and write code like this:

Spoiler

COMMUNITYMAPCREDITS:
THE OWL
Garry
Robert
Box

RGB

CommunityMapCredits01.png.d92f7d911bf4f7a524de90fd03504f4b.png

Using HTML syntax
You can use the html syntax without COMMUNITYMAPCREDITS, but I am giving an example with this command.

Open an TXT file and write code like this (
Use HEX or RGB for colors):

Spoiler

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>

CommunityMapCredits02.png.6edc3957ec9770b279da3e9f61133be7.png

 

Final result
FinalResult01.png.944bfd47ce01907e0a62c620f69c6c5f.png

FinalResult02.png.f7c09d09d8e8775dade1e8bb37c1c214.png

Tags for search engines: Counter-Strike: Global Offensive, csgo, cs




User Feedback

Recommended Comments



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...