Posted by: hopper
Date posted: Dec 30 2004
User Rating: 5 out of 5.0 | Number of views: 12169
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:
| | |
"UnlitGeneric"
{
"$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!
-Hopper
Lead Programmer
Mind-Body-Power, a Half-Life 2 Mod
www.mind-body-power.net
|
|
User Comments
Showing comments 1-2
|
Good tutorial, here's to hoping someday soon we'll be able to use non power of 2 texture sizes (24x24 icons anyone? ;) ) |
|
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.
|
297 Approved Articless
8 Pending Articles
3940 Registered Members
0 People Online (6 guests)
|
|
