Difference between revisions of "Creating a working mini-map:ru"

From Valve Developer Community
Jump to: navigation, search
Line 9: Line 9:
  
 
== Вступление и основы ==
 
== Вступление и основы ==
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: Source и Day of Defeat: Source, имеют мини-карту, на которой изображены карта, игроки и объекты. 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.  
+
В [[Counter-Strike: Global Offensive:ru|Counter-Strike: Global Offensive]] есть мини-карта, так же как и в прошлых играх серии. С точки зрения игрока мини-карта не изменилась, но вот с точки зрения разработчиков процесс создания мини-карты отличается от Counter-Strike: Source.
  
 
Основные различия:
 
Основные различия:
Line 21: Line 21:
 
Для сравнения, вы можете прочитать [[Level_Overviews|Level Overviews]] и увидеть как создать мини-карту для Counter-Strike: Source.
 
Для сравнения, вы можете прочитать [[Level_Overviews|Level Overviews]] и увидеть как создать мини-карту для Counter-Strike: Source.
  
== Make the raw overview image ==
+
== Создание заготовки изображения уровня ==
<ol>
+
[[Image:Dust2_Overview_CSGO.png|200px|thumb|Изображение уровня de_dust2]]
<li>Start the game. Click '''Options''' and switch to the '''Video''' tab. Change '''Resolution''' to "1280x1024" pixels and the '''Aspect Ratio''' to "Normal".</li>
+
# Start the game. Click '''Options''' and switch to the '''Video''' tab. Change '''Resolution''' to "1280x1024" pixels and the '''Aspect Ratio''' to "Normal".
<li>Load the new level with the map <code><mapname></code> [[console command]] and enable <code>"sv_cheats 1"</code>.</li>
+
# Load the new level with the map <code><mapname></code> [[console command]] and enable <code>"sv_cheats 1"</code>.
<li>Join a team.</li>
+
# Join a team.
<li>Turn off bots in the map.<code>"bot_quota 1"</code> using the [[console]].</li>
+
# Turn off bots in the map.<code>"bot_quota 1"</code> using the [[console]].
<li>Bind the "[[screenshot]]" command to a key, etc. <code>"bind p screenshot"</code> using the [[console]].</li> This is important, as using the default screenshot key (F5) will take a compressed [[JPEG]] rather than a raw [[TGA]].
+
# 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]].
<li>Remove any HUD elements with console commands <code>"cl_drawhud 0"</code>, <code>"r_drawviewmodel 0"</code> and <code>"hidepanel all"</code>.</li>
+
# Remove any HUD elements with console commands <code>"cl_drawhud 0"</code>, <code>"r_drawviewmodel 0"</code> and <code>"hidepanel all"</code>.
<li>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.</li>
+
# 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.
<li>Turn off player clipping.<code>"noclip"</code> using the [[console]]. Then move to a position where you can see the whole level from above.</li>
+
# Turn off player clipping.<code>"noclip"</code> using the [[console]]. Then move to a position where you can see the whole level from above.
<li>Switch to orthographic mode with the console command <code>"cl_leveloverview ''x''"</code>, where ''x'' is the scale factor.</li>
+
# Switch to orthographic mode with the console command <code>"cl_leveloverview ''x''"</code>, where ''x'' is the scale factor.
<li>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.</li>
+
# 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.
  
[[Image:Dust2_Overview_CSGO.png|200px|thumb|Sample level overview (de_dust2)]]
+
== Создание .DDS ==
 
+
=== Используя Photoshop ===
<li>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>.</li>
+
# 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>.
<li>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>".</li>
+
# 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.{{clr}} [[File:PhotoshopScaleImage.PNG]]
<li>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.</li>
+
# In the layers panel double click on the layer labeled ''Background''. A "New Layer" window will pop up, press OK.
</ol>
+
# 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.
== Create the .DDS ==
+
# 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>
=== Using Photoshop ===
+
# When the DDS dialog box opens click the drop down box at the top left, and change the option from <code>"DXT1 RGB 4 bpp | no alpha"</code> to <code>"DXT1 ARGB 4 bpp | 1 bit alpha"</code> As shown in the image below.{{clr}} [[File:Photoshop_ddssavedialog.PNG]]
<ol>
+
# You now have successfully created the .DDS file for your map.
<li>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>.</li>
 
<li>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.</li>
 
[[File:PhotoshopScaleImage.PNG]]
 
<li>In the layers panel double click on the layer labeled ''Background''. A "New Layer" window will pop up, press OK.</li>
 
<li>Select areas of the image which you wish to be transparent when on the mini-map, then press the backspace key.</li>
 
<li>Some people like to add different colored features to their mini-maps, if you wish to do so do that now.</li>
 
<li>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> </li>
 
<li>When the DDS dialog box opens click the drop down box at the top left, and change the option from <code>"DXT1 RGB 4 bpp | no alpha"</code> to <code>"DXT1 ARGB 4 bpp | 1 bit alpha"</code> As shown in the image below.
 
</li>
 
[[File:Photoshop_ddssavedialog.PNG]]
 
<li>You now have successfully created the .DDS file for your map.
 
</ol>
 
  
 
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 NVIDA website here: [https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop NVIDA .DDS Plug-In]
 
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 NVIDA website here: [https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop NVIDA .DDS Plug-In]
  
=== Using GIMP ===
+
=== Используя GIMP ===
''(this tutorial was written using GIMP 2.6, but should work for all GIMP 2.x)''
+
{{todo:ru|перевести [[Creating a working mini-map#Using GIMP|раздел]]}}
 
 
# Download and install the [http://registry.gimp.org/node/70/ GIMP DDS Plugin 2.0.2].
 
# 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 ==
 
== 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:
 
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]]
+
Используйте данные которые вы запоминали в пункте 12 [[#Создание заготовки изображения уровня|создания заготовки изображения уровня]].
  
 
  // HLTV overview description file for de_vertigo.bsp
 
  // HLTV overview description file for de_vertigo.bsp
Line 94: Line 75:
 
[[File:CSGO_Example_Radar.png]]
 
[[File:CSGO_Example_Radar.png]]
  
== Resource ==
+
== Ресурсы ==
 
Место закладки бомбы [[File:Bombsite_clear.png]]
 
Место закладки бомбы [[File:Bombsite_clear.png]]
 
Место закладки бомбы A [[File:Bombsite_a.png]]
 
Место закладки бомбы A [[File:Bombsite_a.png]]
Line 103: Line 84:
 
Знак заложника [[File:Hostage.png]]
 
Знак заложника [[File:Hostage.png]]
  
[[Category:Level Design]] [[Category:Tutorials]]
+
[[Category:Category:Level Design Tutorials:ru]]
 +
[[Category:Counter-Strike: Global Offensive:ru]]
 +
[[Category:Russian]]

Revision as of 10:56, 28 October 2014

English



В статье описывается процесс создания мики-карты для Counter-Strike: Global Offensive Counter-Strike: Global Offensive, для создания мини-карт к другим играм читайте (EN) Level Overviews.

Вступление и основы

Некоторые игры, к примеру Counter-Strike: Source и Day of Defeat: Source, имеют мини-карту, на которой изображены карта, игроки и объекты. An overview map is an image made from in-game screenshots and must be created once a new map is finished.

В Counter-Strike: Global Offensive есть мини-карта, так же как и в прошлых играх серии. С точки зрения игрока мини-карта не изменилась, но вот с точки зрения разработчиков процесс создания мини-карты отличается от Counter-Strike: Source.

Основные различия:

  • В CS:GO мини-карта является радаром.
  • CS:GO не использует VTF и VMT файлы.
  • В CS:GO мини-карта сохраняется в ".DDS" файл.
  • Требуется только два основных файла для работы мини-карты, ".DDS" и ".txt". ".DDS" содержит изображение уровня, а ".txt" основные настройки отображения изображения.

Для сравнения, вы можете прочитать Level Overviews и увидеть как создать мини-карту для Counter-Strike: Source.

Создание заготовки изображения уровня

Изображение уровня de_dust2
  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".
  3. Join a team.
  4. Turn off bots in the map."bot_quota 1" using the console.
  5. Bind the "screenshot" command to a key, etc. "bind p screenshot" using the console. This is important, as using the default screenshot key (F5) will take a compressed JPEG rather than a raw TGA.
  6. Remove any HUD elements with console commands "cl_drawhud 0", "r_drawviewmodel 0" and "hidepanel all".
  7. Remove disturbing world effects like skyboxes ("r_skybox 0"), fog ("fog_override 1" and "fog_enable 0"), props (optional: "r_drawstaticprops 0"), etc.
  8. Turn off player clipping."noclip" using the console. Then move to a position where you can see the whole level from above.
  9. Switch to orthographic mode with the console command "cl_leveloverview x", where x is the scale factor.
  10. Set "cl_leveloverviewmarker 1024" to show a red helper line on the right. You will need to briefly toggle cl_drawhud 1, line it up, and then toggle the HUD off again.
  11. 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 de_dust2.
  12. The current projection data (position and scale) will be updated in the console, eg "Overview: scale 6.00, pos_x -2651, pos_y 4027".
  13. 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.

Создание .DDS

Используя Photoshop

  1. Start up Photoshop 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".
  2. 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.
    PhotoshopScaleImage.PNG
  3. In the layers panel double click on the layer labeled Background. A "New Layer" window will pop up, press OK.
  4. Select areas of the image which you wish to be transparent when on the mini-map, then press the backspace key.
  5. Some people like to add different colored features to their mini-maps, if you wish to do so do that now.
  6. 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"
  7. When the DDS dialog box opens click the drop down box at the top left, and change the option from "DXT1 RGB 4 bpp | no alpha" to "DXT1 ARGB 4 bpp | 1 bit alpha" As shown in the image below.
    Photoshop ddssavedialog.PNG
  8. 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 NVIDA website here: NVIDA .DDS Plug-In

Используя GIMP

Необходимо сделать: перевести раздел

Create the overview script

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

Используйте данные которые вы запоминали в пункте 12 создания заготовки изображения уровня.

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

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

Заключение

Если вы сделали все правильно, у вас должно получится что-то подобное изображению ниже.

CSGO Example Radar.png

Ресурсы

Место закладки бомбы Bombsite clear.png Место закладки бомбы A Bombsite a.png Место закладки бомбы B Bombsite b.png

Знак спецназа Ct.png Знак террористов T.png Знак заложника Hostage.png