Maplist Thumbnails: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
No edit summary
(cleanup)
Line 1: Line 1:
The Quick List view allows a more presentable server browser that is more friendly towards new players, placing more emphasis on more important information such as the map name and gametype, rather than the server name. It also includes a small thumbnail for all stock maps.
[[Image:Menu thumb.png|frame|A quicklist thumb (100%)]]
{{note|this is only available in the orangebox engine}}
[[image:Menu_thumb.png|thumb|right|An example custom Quick List thumbnail.]]
__TOC__


== Adding a Quick List Thumbnail ==
The [[Quick List]] is a user-friendly mode for the server browser, available in the [[Orange Box]], which emphasises key information like the map name and gametype. It achieves this partly by providing a thumbnail image of each map, and this article will show you how to create one of your own.


There are 3 files needed for a thumbnail to be fully functional:
== Creating a thumbnail ==
*menu_thumb_mapname.vtf
*menu_thumb_mapname.vmt
*mapname.res


Be advised that [[Pakrat|packing these files]] into the bsp will not work for clients. In order to allow others to download and see your thumbnail, you must include a [[RES]] file outside the bsp. The .RES file will instruct the server to upload the thumbnail files to clients when the map is changed.
Three files are needed for a thumbnail to appear:


=== Creating the VTF file ===
# <code>menu_thumb_<map name>.vtf</code>
# <code>menu_thumb_<map name>.vmt</code>
# <code><map name>.res</code>


# Take a screenshot of your map that is very easily recognizable and represents the theme of your map well.
{{note|[[Pakrat|Packing]] these into your BSP file will not work. You must instead distribute each one alongside it (and hope that they stay together). The [[.res]] will tell the server to upload the thumbnail files to clients along with the map.}}
# Resize the image so that it fits well into a 128x96 rectangle and looks good.
# Position the image along the top of a 128x128 image.
# Save the image uncompressed as "menu_thumb_mapname.vtf".


=== Creating the VMT file ===
=== Texture ===
* Open notepad and paste the following lines of code into it.


"UnlitGeneric"
:''For an in-depth guide to creating a VTF file, see [[Creating a Material]].''
{
 
  "$basetexture" "vgui\maps\menu_thumb_mapname"
Take a screenshot of your map that is easily recognizable and will scale down well. Then:
  "$translucent" 1
 
  "$ignorez" 1
# Resize/crop the image so that it fits into a 128x96 rectangle.
  "$vertexcolor" 1
# Position the image along the top of a 128x128 image. ''Don't'' resize it.
}
# Enable the "No Mipmap" and "No Level of Detail" options.
# '''Save as <code><game>\materials\vgui\maps\menu_thumb_<map name>.vtf</code>.'''


* Replace 'mapname' in "$basetexture" "vgui\maps\menu_thumb_mapname" with the name of your custom map. For example, if your map is called ctf_2fort, then it should read
=== Material ===
"$basetexture" "vgui\maps\menu_thumb_ctf_2fort"
* Save the file as "menu_thumb_mapname.vmt".


:''For an in-depth guide to creating a VMT file, see [[Creating a Material]].''


=== Creating the RES file ===
Paste this:


* Open notepad and paste the following lines of code into it.
  [[UnlitGeneric]]
  "Resources"
  {
  {  
  [[$basetexture]] "vgui\maps\menu_thumb_<map name>"
  "materials/vgui/maps menu_thumb_mapname.vmt" "file"
  [[$translucent]] 1
  "materials/vgui/maps menu_thumb_mapname.vtf" "file"
[[$ignorez]] 1
[[$vertexcolor]] 1
  }
  }


* Replace 'mapname' with the name of your custom map.
{{todo|Are the last three parameters really required?}}
* Save the file as "mapname.res".


Remember to replace <code><map name></code> in $basetexture with your map's actual name. Don't include a file extension anywhere. '''Save as <code><game>\materials\vgui\maps\menu_thumb_<map name>.vmt</code>.'''


=== Placing your files in the proper directory ===
=== Resource list ===


Move your "menu_thumb_mapname.vtf" and "menu_thumb_mapname.vmt" to the following directory:
Paste this:
  ''"..\Program Files\Valve\Steam\SteamApps\_Username_\Team Fortress 2\tf\materials\vgui\maps\"''


[[Resource list|Resources]]
{
materials/vgui/maps menu_thumb_<map name>.vmt file
materials/vgui/maps menu_thumb_<map name>.vtf file
}


And move your "mapname.res" to the following directory:
Once again, replace <map name> with your map's actual name. '''Save as <code><game>\maps\<map name>.res</code>.'''
  ''"..\Program Files\Valve\Steam\SteamApps\_Username_\Team Fortress 2\tf\maps\"''


== Creating a default thumbnail ==


=== Make your mod's default texture ===
There are actually two default thumbnails: one for maps that need to be downloaded and one for maps already on the player's computer. They are:
If your making this for a custom mod, then you'll need to add your own default texture otherwise the mod will use the black/purple checkered texture. This will be used if the custom map doesn't come with it's own custom thumbnail. To make your own default texture, create your 128x128 vtf and name it '''menu_thumb_default'''. You can also make one called '''menu_thumb_default_downloaded''' that get's used instead if the user has downloaded the map.


Now make the VMTs:
* <code>materials\vgui\maps\menu_thumb_default</code>
:'''menu_thumb_default.vmt'''
* <code>materials\vgui\maps\menu_thumb_default_download</code>
<pre>
"UnlitGeneric"
{
"$basetexture" "vgui\maps\menu_thumb_default"
"$translucent" 1
"$ignorez" 1
"$vertexcolor" 1
}
</pre>
:'''menu_thumb_default_downloaded.vmt'''
<pre>
"UnlitGeneric"
{
"$basetexture" "vgui\maps\menu_thumb_default_download"
"$translucent" 1
"$ignorez" 1
"$vertexcolor" 1
}


</pre>
They are otherwise identical to any other quicklist thumbnail.


== Conclusion ==
{{warning|These files are not inherited from the engine. Mods '''need''' to make your own or the dread purple checkerboard will be drawn instead.}}
Remember that packing these files into the bsp will not work for servers and must be uploaded separately onto the servers. If you correctly followed these steps, then you should have a perfectly working Quick List thumbnail for your map!


== See also ==


== See Also ==
* [[Creating a Material]]
*[[Material Creation]]
* [[Quick List]]


[[Category:Modding]]
[[Category:Modding]]
[[Category:Level Design]]

Revision as of 12:48, 23 January 2009

A quicklist thumb (100%)

The Quick List is a user-friendly mode for the server browser, available in the Orange Box, which emphasises key information like the map name and gametype. It achieves this partly by providing a thumbnail image of each map, and this article will show you how to create one of your own.

Creating a thumbnail

Three files are needed for a thumbnail to appear:

  1. menu_thumb_<map name>.vtf
  2. menu_thumb_<map name>.vmt
  3. <map name>.res
Note.pngNote:Packing these into your BSP file will not work. You must instead distribute each one alongside it (and hope that they stay together). The .res will tell the server to upload the thumbnail files to clients along with the map.

Texture

For an in-depth guide to creating a VTF file, see Creating a Material.

Take a screenshot of your map that is easily recognizable and will scale down well. Then:

  1. Resize/crop the image so that it fits into a 128x96 rectangle.
  2. Position the image along the top of a 128x128 image. Don't resize it.
  3. Enable the "No Mipmap" and "No Level of Detail" options.
  4. Save as <game>\materials\vgui\maps\menu_thumb_<map name>.vtf.

Material

For an in-depth guide to creating a VMT file, see Creating a Material.

Paste this:

UnlitGeneric
{
	$basetexture	"vgui\maps\menu_thumb_<map name>"
	$translucent	1
	$ignorez	1
	$vertexcolor	1
}
Todo: Are the last three parameters really required?

Remember to replace <map name> in $basetexture with your map's actual name. Don't include a file extension anywhere. Save as <game>\materials\vgui\maps\menu_thumb_<map name>.vmt.

Resource list

Paste this:

Resources
{ 
	materials/vgui/maps menu_thumb_<map name>.vmt	file
	materials/vgui/maps menu_thumb_<map name>.vtf	file 
}

Once again, replace <map name> with your map's actual name. Save as <game>\maps\<map name>.res.

Creating a default thumbnail

There are actually two default thumbnails: one for maps that need to be downloaded and one for maps already on the player's computer. They are:

  • materials\vgui\maps\menu_thumb_default
  • materials\vgui\maps\menu_thumb_default_download

They are otherwise identical to any other quicklist thumbnail.

Warning.pngWarning:These files are not inherited from the engine. Mods need to make your own or the dread purple checkerboard will be drawn instead.

See also