View source for Creating a working mini-map for CS:GO

{{Subpage|[[Counter-Strike: Global Offensive]]}}
{{brokenlink}}
__TOC__

== Intro and Basics ==

Some [[mod]]s (Counter-Strike:Source, Day of Defeat:Source) have a mini-map mode, that shows a level overview and projects players and objects on that map. An ''overview map'' is an image made from in-game [[screenshot]]s and must be created once a new map is finished. 

[[Counter-Strike: Global Offensive]] also has a mini-map feature. From the player's point of view, the mini-map behaves the same in game as in previous versions of Counter-Strike. But from a developer point of view quite a few things have changed from creating a level overview in Counter-Strike: Source. 

The big differences are:
# In CS:GO the map overview is referred to as the "radar." 
# CS:GO doesn't use VTFs and VMTs for the radar. 
# In CS:GO radar files are saved as a ".DDS" file. 
# There are only two necessary files to get a basic mini-map working the '.DDS" and a ".txt". The ".DDS" serves as the map overview image, and the ".txt" tells the Source engine how to display the overview. 

To compare the differences in finer detail, read: [[Level_Overviews|Level Overviews]] and see how to make a level overview for Counter-Strike: Source.

== Make the raw overview image ==
[[File:Dust2_Overview_CSGO.png|200px|thumb|Sample level overview (de_dust2)]]
# Start the game. Click '''Options''' and switch to the '''Video''' tab. Change '''Resolution''' to "1280x1024" pixels and the '''Aspect Ratio''' to "Normal".If you have problem setting the resolution (small screen),you can add a startup option " -width 1280 -height 1024".
# Load the new level with the map <code><mapname></code> [[console command]] and enable <code>"sv_cheats 1"</code>.
# Join a team.
# Turn off bots in the map.<code>"bot_quota 1"</code> using the [[console]].
# Bind the "[[screenshot]]" command to a key, etc. <code>"bind p screenshot"</code> using the [[console]]. This is important, as using the default screenshot key (F5) will take a compressed [[JPEG]] rather than a raw [[TGA]].
# Remove any HUD elements with console commands <code>"cl_drawhud 0"</code>, <code>"r_drawviewmodel 0"</code> and <code>"hidepanel all"</code>.
# Remove disturbing world effects like skyboxes (<code>"r_skybox 0"</code>), fog (<code>"fog_override 1"</code> and <code>"fog_enable 0"</code>), props (''optional:'' <code>"r_drawstaticprops 0"</code>), etc.
# Turn off player clipping.<code>"noclip"</code> using the [[console]]. Then move to a position where you can see the whole level from above.
# Switch to orthographic mode with the console command <code>"cl_leveloverview ''x''"</code>, where ''x'' is the scale factor.
# Set <code>"cl_leveloverviewmarker 1024"</code> to show a red helper line on the right. You will need to briefly toggle <code>cl_drawhud 1</code>, line it up, and then toggle the HUD off again. 
# You can move around while ''cl_leveloverview'' mode is on. You are still in spectator mode and moving, so move the arrow keys to change the position. Now change scale so the map fits into the square defined by the red line. The right edge of your map should be on the left of the red line, anything to the right of the red line will be chopped off in a later step. Check the attached screenshot  to see how this step looks in <code>de_dust2</code>.
# The current projection data (position and scale) will be updated in the console, eg "Overview: <code>scale 6.00, pos_x -2651, pos_y 4027</code>".
# Once everything is perfect, take a screenshot (using the key you bound to "screenshot") and '''write down''' the projection data values. You will need them in a later step.

Here are all the needed commands as bind:
* o => Overview-Mode
* p => Take [[screenshot]]  

 //Overview-Mode 
 //Script by The RaZZeR App
 bind "o" "change_resolution; clear_view; clear_map; clear_game; record_config; radar_image";
 bind "p" "screenshot";
 alias "change_resolution" " mat_setvideomode 1280 1024 1;";
 alias "clear_view" "sv_cheats 1; cl_drawhud 0; r_drawviewmodel 0; hidepanel all; net_graph 0;";
 alias "clear_map" "bot_quota 1; bot_kick all; r_skybox 0; fog_override 1; fog_enable 0";
 alias "clear_game" "mp_freezetime 0; mp_roundtime 9999; mp_roundtime_defuse 9999; mp_roundtime_hostage 9999; mp_roundtime_deployment 9999; mp_warmup_end;";
 alias "record_config" "con_logfile overview_info.log;";
 alias "radar_image" "noclip; cl_leveloverviewmarker 1024; cl_leveloverview 5";

{{tip| Create a file like overviewexec.cfg (or something else), paste everything from above into this cfg. Move the file to csgo/cfg/ and run "exec overviewexec" in the [[console]].}}

This script dumps the [[console]] output in a log file which is saved at "csgo/overview_info.log".
Also the resolution gets changed to 1280x1024 (4:3) windowed.

== Create the .DDS ==
=== Using Photoshop ===
# Start up Photoshop and open the .TGA file that you created. It should be located at <code>"%STEAMINSTALL%\SteamApps\common\Counter-Strike Global Offensive\csgo\screenshots"</code>. Where <code>"%STEAMINSTALL%"</code> is the directory in which you have steam installed. This is most likely <code>"C:\Program Files (x86)\Steam"</code>.
# Using the Canvas Size tool (Image -> Canvas Size) set the new width of the image to be 1024 pixels. And in the anchor section click the top-left box. <br>[[File:PhotoshopScaleImage.PNG]]
# In the layers panel double click on the layer labeled ''Background''. A "New Layer" window will pop up, press OK.
# Select areas of the image which you wish to be transparent when on the mini-map, then press the backspace key.
# Some people like to add different colored features to their mini-maps, if you wish to do so do that now.
# Save the image as a .DDS file. (File -> Save As). The file name should be your map name followed by <code>"_radar"</code> ex. (de_dust_radar.dds). The file format should be D3D/DDS. Save the file to <code>"%STEAMINSTALL%\SteamApps\common\Counter-Strike Global Offensive\csgo\resource\overviews"</code>
# When the Intel Texture Works dialog box opens click the drop down box at the top left, and change the "Texture Type"  and "Compression" option from <code>"Color"</code> and <code>"BC1 4bpp(Linear)"</code> to <code>"Color + Alpha"</code> and <code>"BC3 8bpp(Linear)"</code>  As shown in the image below. <br>[[File:ITW_dialog.jpeg]]
# You now have successfully created the .DDS file for your map.

{{note|If the "Save As..." .DDS file option is not available to you, then you might need to download a photoshop plug-in. You can get it off of the Intel website here: [https://software.intel.com/en-us/articles/intel-texture-works-plugin Intel® Texture Works Plugin for Photoshop] (NVIDIA Texture Tools has outdated for a long time)}}

=== Using GIMP ===
''(this tutorial was written using GIMP 2.6, but should work for all GIMP 2.x)''

# Download and install the [http://registry.gimp.org/node/70/ GIMP DDS Plugin 2.0.2] (preincluded with newer versions of Gimp)
# Start up GIMP and open the .TGA file that you created. It should be located at "%STEAMINSTALL%\SteamApps\common\Counter-Strike Global Offensive\csgo\screenshots". Where "%STEAMINSTALL%" is the directory in which you have steam installed. This is most likely "C:\Program Files (x86)\Steam".
# Using the Canvas Size tool (Image -> Canvas Size) set the new width of the image to be 1024 pixels. keep the Height at 1024. 
# Select areas of the image which you wish to be transparent when on the mini-map, then press the delete key.
# Some people like to add different colored features to their mini-maps, if you wish to do so do that now.
# Save the image as a .DDS file. (File -> Save As). The file name should be your map name followed by "_radar" ex. (de_dust_radar.dds). The file format should be D3D/DDS. Save the file to "%STEAMINSTALL%\SteamApps\common\Counter-Strike Global Offensive\csgo\resource\overviews".
# When the DDS dialog box opens click the drop down box at the top left, and change the compression drop down from "None", to "BC1/DXT1". Click "OK".
# You now have successfully created the .DDS file for your map.

== Create the overview script ==

Finally, create a text file called <code><mapname>.txt</code> in <code><game dir>\resource\overviews\</code>. This file will define the precise numbers needed to align the overview. The following is an example taken from de_vertigo:

For your map's script use the projection data that you wrote down in step 12 of [[#Make_the_raw_overview_image|Make the raw overview image]]

 // HLTV overview description file for de_vertigo.bsp
 "de_vertigo"
 {
 	"material"	"overviews/de_vertigo_radar"	// texture file
 	"pos_x"		"-3168"				// X coordinate
 	"pos_y"		"1762"				// Y coordinate
 	"scale"		"4.0" 				// scale used when taking the screenshot
 	"rotate"	"0"				// map was rotated by 90 degrees in [[image editor]]
 	"zoom"		"1.3"				// optimal zoom factor if map is shown in full size
 
 	//loading screen icons and positions
 	"CTSpawn_x"	"0.22"
  	"CTSpawn_y"	"0.73"
 	"TSpawn_x"	"0.63"
 	"TSpawn_y"	"0.10"
 
 	"bombA_x"	"0.17"
 	"bombA_y"	"0.78"
 	"bombB_x"	"0.73"
 	"bombB_y"	"0.68"
 
 	"Hostage1_x"	"0.56"
 	"Hostage1_y"	"0.83"
 	"Hostage2_x"	"0.48"
 	"Hostage2_y"	"0.64"
 	"Hostage3_x"	"0.47"
 	"Hostage3_y"	"0.78"
 	"Hostage4_x"	"0.30"
 	"Hostage4_y"	"0.88"
 	"Hostage5_x"	"0.42"
 	"Hostage5_y"	"0.86"
 }

"pos_x" (red line) and "pos_y" (green line) correspond to the top view of Hammer where X is left/right and Y is down/up. Lowering the scale makes the radar bigger.

To get the correct positions of all loading screen icons you have to open up your finished radar file in Photoshop. 
Then press {{key|Ctrl+R}} to get the Ruler-Tool (make sure it's set to percent). You get the correct value by dragging the top and left ruler. Note that for example 31.12% are written like 0.31.

== Adding Multiple Heights ==

After the Wildfire update to CSGO you can now have multiple height images added to your radar. This is done by creating multiple radar files with your different paths highlighted depending on the player's height in the world. You can reference the new de_nuke for examples inside your game's files.
 
* mapname_lower_radar
* mapname_radar (This is the ground floor)
* mapname_higher_radar

Then add the following to your overview text file.

 "verticalsections"
 {
 	"default" // use the primary radar image
 	{
 		"AltitudeMax" "600"
 		"AltitudeMin" "-500"
 	}
 	"lower" // lower radar file
 	{
 		"AltitudeMax" "-500"
 		"AltitudeMin" "-10000"
 	}
 	"higher" // higher radar file
 	{
 		"AltitudeMax" "10000"
 		"AltitudeMin" "600"
 	}
 }

* Type "cl_showpos 1" in game console check the Altitude.

* The higher/lower .dds files will not be included by the Workshop publishing tool, and must be packed manually to be used on the Steam Workshop.


{{note|The section names are not required to be named "lower", "higher" and "default". Any name is possible and it's possible to have many more than three sections.}}

== Conclusion ==
<p>
Below is a screen capture of the radar in game. If you followed all the steps correctly, then the finished product should look something like this:
</p>
[[File:CSGO_Example_Radar.png]]
== Resource ==
Bombsite Clear[[File:Bombsite_clear.png]]
Bombsite A [[File:Bombsite_a.png]]
Bombsite B [[File:Bombsite_b.png]]

CT Icon [[File:Ct.png]]
T Icon [[File:T.png]]
Hostage Icon [[File:Hostage.png]]

New T spawn Icon [[File:T_spawn_icon_NEW.png]]

== Other Tutorials ==
* [https://www.youtube.com/watch?v=SSheuw9ASuM TopHATTwaffle's CS:GO Radar / Overview Creation Tutorial]
* [https://www.youtube.com/watch?v=DANME4Fy7fI TopHATTwaffle's Tutorial about Terri Auto Radar for CS:GO]
* [[TAR|TAR (Terri Auto Radar)]]
* [[JERC|JERC (Jim's Easy Radar Creator)]]
* [https://gamebanana.com/tuts/11983 How to use CS:GO Radar Maker]

[[Category:Level Design]]
[[Category:Tutorials]]