During a series of updates, around a couple of months ago, the radar was updated to show a mini-map of the level with the location of your team, enemies and objectives. However, when a custom map is made, without knowing how to do this, the radar will be blank. This tutorial instructs you from start to finish, how to make a radar and regular overview. This is an advanced tutorial and requires that the reader is proficient in Hammer and has access to a image editing program. I have used Photoshop CS2, as I found this to be the easiest program to work with.
Obtaining The Software
If you do not have access to photoshop, try to get a hold of it, its a very useful program in its own right, not only used for texture editing. If you do not have photoshop, do not despair, I will try to explain what to do if you are using a different program. First of all, if you have photoshop, click on this link and download the version appropriate.
After downloading, follow the instructions to install it into photoshop. If you do not have photoshop, this plug-in will not work, instead you need to download a texture editing program. I personally use VTFEdit, link here
VTF Edit Download
This is a good texture editing program and is very useful for a variety of applications, its well worth getting, for any mapper or modder of the Source engine. Download the program and install it by following the instructions.
Editing Your Map
Now that you actually have the software to edit images with, you need an image to edit. This image will be taken when in an special view in-game, thus you need to use the map this overview will be made for. However, since the picture will be taken from above, anything that gets in the way such as rooftops are not needed. As you can see in Screenshot B, the map has a lot of rooftops, but also a lot in areas under the rooftops, so apply the "nodraw" texture to them and they will not be visible in-game (Screenshot C). Then click "save as" and change the name of your map, I placed a "\_radar" suffix on the end of mine. Certain props may also get in the way, simply remove them if you wish. Also, remove the 3D skybox from the map too.
Compile your map with the VBSP set to "full" the VVIS set to "fast" and the VRAD set to "full", you may wish to put HDR on, but I suggest you don't. Once the map has compiled, enter the game, build the cubemaps (if any) and restart the game.
Taking The Overview Picture
First, go into options and change the quality settings to as high as your graphic card will allow. Turn AA and AF up as high as you can and click apply, it is best to do this in increments to determine when your computer can take no more. Set the resolution to 1280x1024, this is vitally crucial. You will have very poor FPS, but as we are taking a static image, this is not a problem. Just remember your previous settings so you can turn them back after doing this section.
This is the main picture that will be edited, I suggest you take your time and get this right, as everything else will be based off of this. Move yourself, to a position of the map, so you can see everything from above by using the "noclip" command. I find if you do not do this, certain problems can happen when lining up the picture that makes props vanish in small maps.
Next, open up the console and type in the following list of commands.
r\_drawstaticprops 0 (optional, I usually don't)
net\_graph 0 (if you use this function)
This will remove everything from you HUD, the panel, the remnants of the skybox, the fog and the penultimate one will remove static props, but isn't required.
You will now need to switch views, you can do this by typing in
X is the scale factor, you will need to adjust this value to get the map to fill as much of the screen possible. However, as textures needs to be square, a guide line is needed. This is displayed by typing in
then using cl\_drawhud 1/0 to show and hide the line.
Line the map up so that nothing crosses the right hand side of the line, change the cl\_leveloverview factor and use the directional keys to get everything perfect. Before taking the screenshot, make sure cl\_drawhud is turned to 0. Press the screenshot button (usually F5, but it may be different) and open the console, without moving the camera. In the console there will be multiple lines that state the scale, pox\_x and pos\_y, such as this:
"scale 6.00, pos\_x -2651, pos\_y 4027"
Write down the one prior to taking the screenshot, this is vital for the projection data that is needed in the next section. Don't lose it!!! Change your settings back to what they were and exit the game. The screenshot can be found in your screenshots folder.
C:\Program Files\Steam\SteamApps\[steam name]\counter-strike Source\cstrike\screenshots
Editing The Image
The image we now have will hopefully measure 1024x1248 pixels. If it doesn't, you have done the previous sections wrong, go back and try again. If you do, well done, lets move on. Open the image in photoshop or your choice of image editing program (Screenshot E).
The first job to do is to get rid of all of the green areas. Unlock the layer and use the magic wand tool, if you don't have photoshop or another version, delete all the green using a logical method. Then remove all of the unwanted detail that lays outside of the players area. No need to clutter the radar with un-needed stuff. You can see my result in screenshot F.
The final move is to crop the image so that it is exactly 1024x1024. Simply select the crop tool and do so. If using CS2, the tool will try to "jump" so that the image becomes the size of a photo, this is not 1024x1024 watch out for this. If you have been successful with the crop, you should get something that looks like this:
Adding To The Image
Well, this first stage is optional, but I feel that it tidies up the texture perfectly. All you simply have to do is to add a black outline to it. This simply makes the edges neat and will hide some of the green you may of missed. The magic wand tool in CS2 definitely missed some if you look carefully in the images. Take you time over these steps, get it right and it will look great.
You need to mark where the bombsites / hostage rescue points are, if you have included them. I did this by making the area of the bombsites more yellow using the colour balance tool and selecting only the bombsites. You can do the same thing with the hostage rescue points. Note how they do not have the letters on them, as the radar will do this automatically.
You will also need to add an alpha layer, to do this varies with different programs and will depend on how you export the image. You could do this from the beginning when the green background still exists, but its up to you. I found it easier to do it at the end, took me around half an hour to do it, however I only started to use photoshop last week.
Finally, the beauty of doing it in an advanced program like Photoshop was that I could cover up any problems with the image. For example, I forgot to turn off the hud when I took the screenshot and instead of doing it all over again, I could cover up the crosshairs using Photoshop as I forgot to turn cl\_drawhud to 0. If you have done everything correct, hopefully you will end up with something that looks like this:
Making The Radar View
Now that we have the overview image, it is a simple task to convert it into the radar image. All we need to do is to tint it green, so it looks like its on a radar. With photoshop, this is easy, simply select the entire picture and use colour correction to make it green. Make sure you save it under a different name as well. Tweak the settings how you like until you get a suitable tint to it. This is my result:
Exporting The Image in VTFEdit
Depending on your method of editing the picture will depend on how you export it. If you are working in a program other than photoshop, you will need to export the image as a JPEG image or as a TGA file. It is better to export it as a TGA file as the alpha layer should be retained. Save the overview image as the name of your map and the radar image the name of your map, but with a "_radar" suffix. Then open VTFEdit and click on import (Ctrl+I), select one of the images and import it. Then under "flags" on the right hand of the screen, select "Clamp T" and "Clamp S" this will prevent the repeating problem I have suffered before. Then simple click on "save" button and save it with the same name. It doesn't matter where you save the VTF, not yet anyway, but we will get to that in the next stage.
Exporting The Image in Photoshop
If you are using photoshop, our lives are a little easier as we do not need to go through VTFEdit as long as you have downloaded the VTF plug-in. Select "save as" from the menu and change the file type to .VTF and give it the exact same name as your map. Click OK and a box will pop-up, select "Clamp S" "Clamp T" "No Compression" and "Eight Bit Alpha" The select OK. The texture has now been created. Do the same for the radar image with the "_radar" suffix on the end of the file name. Now we have both the texture files, it is now time to edit the VMF.
Making The VMF's
Now we need to make the appropriate VMF file, a VMF is basically a text file that defines the texture, the image is simply one layer of the texture. We now need to tell the engine what to do with it. To make the VMF, open up VTFEdit and select "new" In this window (However, if you made the textures by going through VTFEdit originally, the VMF would have been made for you). Simply put the following in the VMF.
"$basetexture" "overviews/(your mapname)"
Save it as the map name. Then save the following for the radar overview. Remember that the name needs to be the same as your map one, but with the "\_radar" suffix.
"$basetexture" "overviews/(your mapname)_radar"
The next task is to make a file that will feed the projection data of the original screenshots. This is why I asked you to write it down at time of taking the screenshot at the beginning, without the right numbers it would take weeks to find the correct values by guessing. Make a .TXT file, the same as your map name and put the following into it.
"material" "overviews/(your mapname)" // texture file
"pos_x" "-2651 "// X coordinate,
"pos_y" "4027" // Y coordinate,
"scale" "6.0" // scale used when taking the screenshot
"rotate" "0" // set to 1, if the map was rotated by 90 degrees in image editor
"zoom" "1.3" // optimal zoom factor if map is shown in full size
Now we should have five files made, two VMF's, two VTF's and a TXT, the VMF's and VTF's should be paired with each other and have the name of your map, for example for de\_dust there would be the following files:
The final task is to put these into the correct folder's. To do this, take all of the VMF's and VTF's and place them into:
C:\Program Files\Steam\SteamApps\(Your Steam Name)\counter-strike source\cstrike\materials\overviews
and take the TXT file and place it into:
C:\Program Files\Steam\SteamApps\(Your Steam Name)\counter-strike source\cstrike\resource\overviews
The final thing to do, after all of that work is to simply run your map and start adjusting the values in the TXT file, you only need to change the zoom factor, get it right and its worthwhile. Its very very very satisfying to see this final piece of detail done. It brings a smile to my face, here is my result after all that work. However, your job is not over, not yet. You MUST use BSPZip or PAKRAT or a similar program to embed the files into your BSP. If you don't people won't be able to see all your hard work.
Well, that's it, I hope you have a perfect high quality radar now, no excuse for teamflashing!!! Its a long process, took me a while to get it right, but as long as you take your time, you will get there. Final note, this is the first tutorial to tell you how to do both the overview and the radar background. So FPSB get in on the groundfloor and all of you CS:S mappers have no excuse for including a radar now.