Maplist Thumbnails

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.

An example custom Quick List thumbnail.

Adding a Quick List Thumbnail

There are 3 files needed for a thumbnail to be fully functional:

• menu_thumb_mapname.vtf
• menu_thumb_mapname.vmt
• mapname.res

Be advised that 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.

Creating the VTF file

1. Take a screenshot of your map that is very easily recognizable and represents the theme of your map well.
2. Resize the image so that it fits well into a 128x96 rectangle and looks good.
3. Position the image along the top of a 128x128 image.
4. Save the image uncompressed as "menu_thumb_mapname.vtf".

Creating the VMT file

• Open notepad and paste the following lines of code into it.

"UnlitGeneric"
{
 "$basetexture" "vgui\maps\menu_thumb_mapname"
 "$translucent" 1
 "$ignorez" 1
 "$vertexcolor" 1
} 

• 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

"$basetexture" "vgui\maps\menu_thumb_ctf_2fort"

• Save the file as "menu_thumb_mapname.vmt".

Creating the RES file

• Open notepad and paste the following lines of code into it.

"Resources" 
{ 
	"materials/vgui/maps menu_thumb_mapname.vmt"	"file"
	"materials/vgui/maps menu_thumb_mapname.vtf"	"file" 
}

• Replace 'mapname' with the name of your custom map.
• Save the file as "mapname.res".

Placing your files in the proper directory

Move your "menu_thumb_mapname.vtf" and "menu_thumb_mapname.vmt" to the following directory:

 "..\Program Files\Valve\Steam\SteamApps\_Username_\Team Fortress 2\tf\materials\vgui\maps\"

And move your "mapname.res" to the following directory:

 "..\Program Files\Valve\Steam\SteamApps\_Username_\Team Fortress 2\tf\maps\"

Make your mod's default tetxure

If your making this for a custom mod, then you'll need to add your own default 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:

menu_thumb_default.vmt

"UnlitGeneric"
{
	"$basetexture" "vgui\maps\menu_thumb_default"
	"$translucent" 1
	"$ignorez" 1
	"$vertexcolor" 1
}

menu_thumb_default_downloaded.vmt

"UnlitGeneric"
{
	"$basetexture" "vgui\maps\menu_thumb_default_download"
	"$translucent" 1
	"$ignorez" 1
	"$vertexcolor" 1
}

Conclusion

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

• Material Creation