Level Overviews: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
No edit summary
(formatting)
Line 1: Line 1:
[[Category:Level Design]] [[Category:Tutorials]]
[[Category:Level Design]] [[Category:Tutorials]]
Some Mods (Counter-Strike:Source, Day of Defeat:Source) have a minimap mode, that shows a level overview and projects players and objects on that map. An <i>overview map</i> is an image made from in-game screenshots and must be created once a new map is finished:
__TOC__
 
Some Mods (Counter-Strike:Source, Day of Defeat:Source) have a minimap mode, that shows a level overview and projects players and objects on that map. An <i>overview map</i> is an image made from in-game screenshots and must be created once a new map is finished.
 
==Make the raw overview image==


1. Start the game. Click '''Options''' and switch to the '''Video''' tab. Change '''Resolution''' to "1280x1024" pixels and the '''Aspect Ratio''' to "Normal".
1. Start the game. Click '''Options''' and switch to the '''Video''' tab. Change '''Resolution''' to "1280x1024" pixels and the '''Aspect Ratio''' to "Normal".
Line 20: Line 24:
9. Set <code>"cl_leveloverviewmarker 1024"</code> to show a red helper line on the right.
9. Set <code>"cl_leveloverviewmarker 1024"</code> to show a red helper line on the right.


10. Now change scale and position, so the map fits into the square defined by the red line. Here is a screenshot how it would look for the map <code>de_dust2 in</code> Counter-strike:Source:
[[Image:dust2_overview.jpg|350px|thumb|right|Sample raw level overview for de_dust2]]
[[Image:dust2_overview.jpg | Sample raw level overview for de_dust]]
10. Now change scale and position, so the map fits into the square defined by the red line. Here is a screenshot how it would look for the map <code>de_dust2</code> in Counter-strike:Source.<br style="clear:both">


11. 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>"
11. 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>"
Line 27: Line 31:
12. 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.
12. 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.


13. Close the game and open the screenshot in an image editor. Screenshots are found in the <code>"<game dir>\screenshots"</code> directory. Using the image editor, remove the unused border right of the red line so the image size is reduced to 1024x1024 pixels.
==Edit the overview image==
 
1. Close the game and open the screenshot in an image editor. Screenshots are found in the <code>"<game dir>\screenshots"</code> directory. Using the image editor, remove the unused border right of the red line so the image size is reduced to 1024x1024 pixels.
 
2. Modify the image as you like or add an alpha channel to blend out unused areas. Save the final iamge as mapname.TGA where mapname is the name of your .BSP file. Save the .TGA in your material source folder (eg. <code>"sourcesdk_content\cstrike\materialsrc\overviews\mapname.TGA"</code>)


14. Modify the image as you like or add an alpha channel to blend out unused areas. Save the final iamge as mapname.TGA where mapname is the name of your .BSP file. Save the .TGA in your material source folder (eg. <code>"sourcesdk_content\cstrike\materialsrc\overviews\mapname.TGA"</code>)
==Create the material files==


15. Run <code>"vtex.exe mapname.TGA"</code> to create a matching .VTF texture file (eg. <code>counter-strike source\cstrike\materials\overviews\mapname.VTF</code>). Make sure that '''Current Game''' is set correctly in the SDK window for the Mod your working on. More information on creating materials can be found in Creating Materials.
1. Run <code>"vtex.exe mapname.TGA"</code> to create a matching .VTF texture file (eg. <code>counter-strike source\cstrike\materials\overviews\mapname.VTF</code>). Make sure that '''Current Game''' is set correctly in the SDK window for the Mod your working on. More information on creating materials can be found in Creating Materials.


16. In the same folder as this .VTF, using a text editor, add a new material file, mapname.VMT, which should look like this:
2. In the same folder as this .VTF, using a text editor, add a new material file, mapname.VMT, which should look like this:


<pre>
<pre>
Line 46: Line 54:
</pre>
</pre>


17. Finally, in a text editor, create a text file mapname.txt in \resource\overviews (eg. counter-strike source\cstrike\resource\overviews) that contains the necessary projection data:
3. Finally, in a text editor, create a text file mapname.txt in \resource\overviews (eg. counter-strike source\cstrike\resource\overviews) that contains the necessary projection data:


<pre>
<pre>

Revision as of 21:06, 16 August 2005

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

Make the raw overview image

1. Start the game. Click Options and switch to the Video tab. Change Resolution to "1280x1024" pixels and the Aspect Ratio to "Normal".

2. Load the new level with the map <mapname> console command and enable "sv_cheats 1" and "developer 1".

3. Join the Spectator team.

4. Bind the screenshot command to a key, eg. "bind p screenshot" using the console.

5. Remove any HUD elements with console commands "cl_drawhud 0" and "hidepanel all".

6. Remove disturbing world effects like skyboxes, fog etc. ("fog_override 1").

7. Move in spectator mode to a position where you can see the whole level from above.

8. Switch to orthographic mode with the console command "cl_leveloverview 1". The "1" is the scale factor.

9. Set "cl_leveloverviewmarker 1024" to show a red helper line on the right.

Sample raw level overview for de_dust2

10. Now change scale and position, so the map fits into the square defined by the red line. Here is a screenshot how it would look for the map de_dust2 in Counter-strike:Source.

11. The current projection data (position and scale) will be updated in the console, eg "Overview: scale 6.00, pos_x -2651, pos_y 4027"

12. 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.

Edit the overview image

1. Close the game and open the screenshot in an image editor. Screenshots are found in the "<game dir>\screenshots" directory. Using the image editor, remove the unused border right of the red line so the image size is reduced to 1024x1024 pixels.

2. Modify the image as you like or add an alpha channel to blend out unused areas. Save the final iamge as mapname.TGA where mapname is the name of your .BSP file. Save the .TGA in your material source folder (eg. "sourcesdk_content\cstrike\materialsrc\overviews\mapname.TGA")

Create the material files

1. Run "vtex.exe mapname.TGA" to create a matching .VTF texture file (eg. counter-strike source\cstrike\materials\overviews\mapname.VTF). Make sure that Current Game is set correctly in the SDK window for the Mod your working on. More information on creating materials can be found in Creating Materials.

2. In the same folder as this .VTF, using a text editor, add a new material file, mapname.VMT, which should look like this:

"UnlitGeneric"
{
	"$translucent" "1"
	"$basetexture" "overviews/mapname"
	"$vertexalpha" "1"
	"$no_fullbright" "1"
	"$ignorez" "1"
}

3. Finally, in a text editor, create a text file mapname.txt in \resource\overviews (eg. counter-strike source\cstrike\resource\overviews) that contains the necessary projection data:

"mapname"
{
	"material"	"overviews/mapname"	// texture file
	"pos_x"		"-2651"	// X coordinate,
	"pos_y"		"4027"	// Y coordinate,
	"scale"		"6.0" 	// and used scale used when taking the screenshot
	"rotate"		"0"	// map was rotated by 90 degress in image editor
	"zoom"		"1.3"	// optimal zoom factor if map is shown in full size
}