Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /var/sites/a/ on line 20
Wavelength | Your Game Editing Resource | Placing Custom Images into a VGUI Menu
Welcome, Guest! Login | Register

Placing Custom Images into a VGUI Menu [Print this Article]
Posted by: hopper
Date posted: Dec 30 2004
User Rating: 5 out of 5.0
Number of views: 13284
Number of comments: 2
Description: This tutorial walks you through creating a material with transparency and then placing it into VGUI menu.
This tutorial will walk you through the very basic method of making a material that you can use in a vgui menu. This tutorial is pretty basic, I dont do anything advanced, and the materials are compiled with all default settings.

Yes, I know that the sdk documentation covers this topic, but honestly the documentation they provide is overkill to an extent that it was a pain to follow and understand.

Anyways, here you go.

1. Make the Image
Open up photoshop or whatever you edit your images with. You want to save your image as a 32 bit .TGA file. You can save it at 16 bit or 24 bit also if you want.

2. Transparancy
For most images you want some transparency. In my photoshop, if you saved as either 16 or 24 bit TGA, you will have a "background" layer and the image will have no transparency. To get around this, you can duplicate the background layer and then delete the "background" layer. Then just clear the background color that is on the image so that it shows the transparency..

3. Image Dimensions
Make sure that each image has dimensions that are powers of 2.. so 2..4..8..16..32...64...128...256...etc This is because vtex will yell at you if you dont.

4. Save your Images
Save your TGA files to ....\valve\steam\SteamApps\username\sourcesdk\sdkcontent\materialsrc
This is where vtex wants them to be, otherwise it will throw an error and yell at you saying its too stupid to continue. If you are using the newer sdk, you may need to use the path ...\mymod\materialsrc though the new sdk seems to do ok with them in the sdkcontent folder.

4. Compile your Images
Drag each of the TGA files you want to convert onto the vtex program one by one. vtex is located in ....\valve\steam\SteamApps\username\sourcesdk\bin If for whatever reason, you cant find vtex in that directory, try launching steam and running the Source SDK game. For some super awesome reason, content from this directory sometimes disappears. If you cant get this to work, you might want to check to make sure that you have your VProject environment variable set up correctly. (Right click My Computer, hit Properties, hit Advanced Tab, hit Environment Variables, hit New System Variable, Type in the path of your mod) After dragging a file onto vtex, you should get a command shell that pops up and tells you if it worked or not.

5. Retrieve the Compiled Materials
If it worked correctly, go to ....\myMod\materials to find your newly created .vtf files. If you have trouble finding them, you might want to check what you set your VProject variable correctly. Also, the myMod directory could be in Valve\Steam\SteamApps\SourceMods\myMod if you are using the newer sdk.

6. Place the Files in a vgui Directory
Now, make a directory called "vgui" within the materials directory for your mod. Any materials you plan to use in vgui menus are expected to be in this directory.

7. Set up the Materials
Copy the .vtf files you just made into the vgui directory. Make a new empty txt file for each of the vtf files and rename it to a .vmt file. For example, bodygirl.vtf should have a corresponding file called bodygirl.vmt. You need to place the following in each of the .vmt files, where you replace bodygirl with whatever your vtf files are called:


    "$basetexture" "vgui/bodygirl"
    "$translucent" 1

8. Copy Everything into the vgui Directory
Copy the vtf files you made and their partner vmt files into the vgui directory.

9. Bring Up a Panel to Edit
Now launch your mod and pull up the vgui panel you want to edit. You can do this easily from teh console by typing in showpanel "panelname"

10. Launch the Panel Editor
Launch the vgui panel editor by hitting Ctrl+Shift+Alt+B all at once. This menu thing should pop up. (this is all detailed in the VGUI documentation in the SDK)

11. Create a New ImagePanel
Go ahead and create a new imagePanel by selecting it from the dropdown list. Change the size of the image to whatever you want, but keep the proportions the same as your original image. Type in the name of your image without any extensions or path into the image field. So, for my material, I would type in "bodygirl" and then, finally... under the field for scaleImage, type in 1.

There, your image should now be in your vgui menu. Remember to save it, then quit the game and it should be there still next time. Congrats, and happy messing around with more complicated materials!

Lead Programmer
Mind-Body-Power, a Half-Life 2 Mod

Rate This Article
This article is currently rated: 5 out of 5.0 (1 Votes)

You have to register to rate this article.
Related Files
Zip FileFilename: final_product.jpg
File Size: 81.9 KB

User Comments Showing comments 1-2

Posted By: imperio59 on Feb 04 2005 at 19:50:17
Good tutorial, here's to hoping someday soon we'll be able to use non power of 2 texture sizes (24x24 icons anyone? ;) )

Posted By: hopper on Feb 05 2005 at 16:41:07
Thanks for the compliment.

if you want an icon that is 12X125 on your vgui screen...

Open your 12x125 .tga file up in photoshop and resize it to 16X128. (try to resize it to a power of 2 size that is the next closest larger size than the original... ie 234x489 would be resized to 256x512, 45x145 would resize to 64x256, this is for quality's sake)

Save your .tga file that is now a power of 2 and do the tutorial above to make it into a texture.

When you place it into your vgui menu, just resize it so that it is the original size: 12x125.

This is how I made my main menu background image, not sure if you will notice resizing artifacts or not when you try it in a vgui menu. Try it out and see.

You must register to post a comment. If you have already registered, you must login.

Latest Articles
3rd person View in Multiplayer
Half-Life 2 | Coding | Client Side Tutorials
How to enable it in HL2DM

By: cct | Nov 13 2006

Making a Camera
Half-Life 2 | Level Design
This camera is good for when you join a map, it gives you a view of the map before you join a team

By: slackiller | Mar 05 2006

Making a camera , Part 2
Half-Life 2 | Level Design
these cameras are working monitors that turn on when a button is pushed.

By: slackiller | Mar 04 2006

Storing weapons on ladder
Half-Life 2 | Coding | Snippets
like Raven Sheild or BF2

By: British_Bomber | Dec 24 2005

Implementation of a string lookup table
Half-Life 2 | Coding | Snippets
A string lookup table is a set of functions that is used to convert strings to pre-defined values

By: deathz0rz | Nov 13 2005

Latest Comments
knock knock
General | News
By: MIFUNE | Dec 31 2017
knock knock
General | News
By: omega | Dec 22 2016
knock knock
General | News
By: MIFUNE | Oct 10 2015
New HL HUD Message System
Half-Life | Coding | Shared Tutorials
By: chbrules | Dec 31 2011
knock knock
General | News
By: Whistler | Nov 05 2011
Particle Engine tutorial part 4
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 18 2010
Particle Engine tutorial part 2
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
Particle Engine tutorial part 3
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
Game Movement Series #2: Analog Jumping and Floating
Half-Life 2 | Coding | Shared Tutorials
By: mars3554 | Oct 26 2009
Particle Engine tutorial part 5
Half-Life | Coding | Client Side Tutorials
By: Deadpool | Aug 02 2009

Site Info
297 Approved Articless
8 Pending Articles
3940 Registered Members
0 People Online (3 guests)
About - Credits - Contact Us

Wavelength version:
Valid XHTML 1.0! Valid CSS!