If you are new to this and need help the following pages may speed up any modifications you do. People who have been doing this a while may pick up a few tips but basically the below is for novice users.
This is a big page, a bit boring but useful when you are stuck. I will refer to its sections here from time to time in other articles.
1. Changing Colors in the clientscheme file.
2. More ways than one to change a color
4. About the RGB Decimal color used in clientscheme.res
5. Transparency and how to set it
6. The dodlogo.TTF, a True Type Font file
7. Positioning HUD Items on the Screen. ...and xpos and ypos alignment
8. How to see the invisible areas in the HUD
9. "zpos" and how to position panels on top or behind
10. Adjusting items while in the game.
11. Setting up your PC to make it quicker
12. Maps, Bots make a difference to testing
13. IMPORTANT NOTE ABOUT POSITIONING CERTAIN PANELS
14. A bit more info' about the HudLayout.res file... and word of warning!
If you know what color/function does what, skip this and go to "colors" below.
If you do not know where your color is in the ClientScheme.res file then go here for dods and here for Counter Strike: Source and save the file (open with a text editor like notepad or even better NotePad++) or open in it a browser window.
Then use the browsers "find" function to search for a function.
Say you need to know what colors are involved with the kills deaths caps area.
Just put in "kills" and see what pops up, (make sure you search ALL the lines so you get ALL the info) the word will be found in the description... slide to the left of that to see the details of the control for that area.
The standard color is repeated to the right beside the real one so you can copy/paste it back....
"HudHealthBorder" "255 255 255 255" //"255 255 255 255" * White, Health bar boarder.
The ClientScheme.res file is messy as hell, if you change a color, make sure to read the description in that "line" that the function is on... it may do a lot more than just one function!
Best way is to search that file in the link above, read all the search results, then change and test it.
If you are unsure of what changes a function does, just change it's color to...
"255 25 252 200" a bright pink and see what has changed.
Join allies and axis, look at the scoreboard, the team select and class screens, capping flags... all the HUD functions you can.
You can also download the special clientscheme.res file and use it as a guide to changing / searching for colors / functions. It is the same one as the text one in the link.
When you first start to edit the HUD files you will at some point want to change a color.
You will see colours like ...
// base colors
"Orange" "255 176 0 255"
"OrangeDim" "255 176 0 120"
"LightOrange" "188 112 0 128"
Also you will see...
"ClassMenuLight" "251 207 59 255"
"ClassMenuDark" "144 134 98 155"
The names on the left like "Orange" and "ClassMenuDark" are the names you will find in the clientscheme.res file and other .res files to color a message, panel or button, that sort of thing.
The group of four numbers on the right of them is the color, the first three groups are a RGB Decimal and the fourth is a transparency setting.
All together these four numbers are called a RGBA color space, you can read more on that in the Wikipedia.
The format used is called RGB Decimal. "255 255 153" = a light yellow
If you used real oil colors this would not equal the light yellow. The RGB colors are different.
Think of it this way... "0" = no color.
"255" = full strength color.
Now picture a RGB Decimal painters palette, add 255 of red, 255 of green, 153 of blue and mix it all up...
You have a light yellow. So... the ClientScheme.res file uses RGB Decimal, how do you edit a color when you know what color to use... but don't know the correct RGB Decimal number?
There are many ways to choose a color. You can use a Graphics Program like Photoshop or the Freeware ones ...GIMP and my favorite Paint.NET. Not everyone has these, there are alternatives.
You can use some of the on-line color pickers like this one or this extensive chart. I regard this one, Color Schemer Online V2 as the best online one when picking a color, brighten and darken based on the color you pick and it returns the setting you need.
You can use a small freeware program, there are many at snapfiles. Most of these are a program that you can click on a color with your mouse, after running the program and selecting a button, then just clicking on an image or whatever is on your screen.
The best one out of these is RGBLab 2005. If you set it up right in "Tools" "Custom Format..." and paste in this... %DR% %DG% %DB% and press OK...
It will automatically send the RGB Decimal code to the clipboard so... you just paste it in :)
We have covered the first three in the format used. Now for the fourth one, Transparency.
Look at the picture below it's from a menu screen, the need here was to make background behind a button and gradually increase the transparency...
"0 0 0 0" = no color, and invisible.
"119 136 153 100" = A light grey with High transparency Just visible.
"119 136 153 190" = A light grey with Medium transparency More visible.
"119 136 153 255" = A light grey with Low transparency Totaly visible.
Where you will use the RGB Decimal code varies but mostly you will find it in the clientscheme.res file.
There is another interesting file in the dod/resource folder that helps the HUD in various areas, the dodlogo.TTF is a True Type Font file.
Like the clientscheme.res file it helps to know a bit about it before proceeding to edit areas in the HUD.
This special true type font file is used for icons and header fonts and graphics on some of the in game panels.
The image below shows what the Characters look like, if you know dod well you will recognise them.
Look at one Character below the "S" is a skull and crossbones icon. This is the one that comes up when you fall of something high and kill yourself :)
It can be found in the mod_textures.txt file in the dod\scripts folder...
"font" "ClientTitleFontPlayerIcons" (The font type..and size.)
As you can see you can adjust it because the font size is mentioned in the ClientScheme.res file in the dod\resource folder, look at the last one, it is the "d_skull_dod" font size...
ClientTitleFont (This one is the biggest)
"name" "Day of Defeat Logo"
ClientTitleFontSmall (This one is the smallest)
"name" "Day of Defeat Logo"
ClientTitleFontPlayerIcons (This one is the middle size used on most icons.)
"name" "Day of Defeat Logo"
So as you can see, some of the icon's on screen are not VTF files or graphics...they are fonts.
And you can adjust them : )
If you are going to customize this file you will need to know more...
Go here for more information about Authoring and Using TrueType Fonts in HL2. In Day of Defeat:Source editing Font files is not common but if you like why not pop over to my CSS tutorial about font tools and font editing.
Files of interest when moving items around...
The Half Life 2 VGUI works on a screen size of 640 x 480. I know what you are thinking... my playing resolution is way bigger than that, don't worry about playing resolutions... this screen size automatically resizes and places items on the screen correctly, even on a 16:9 widescreen.
The 640 x 480 screen is the base size. Placing items inside it and regulating their size is easy. There are settings in sections of every HUD .res file like those mentioned above with the exception of the ClientScheme.res file.
The positioning of items uses a Two-dimensional coordinate system... "x" and "y".
Let's look at a section in the HudLayout.res file that controls the position of the Axis Winpanel.
Note the settings beside "xpos" and "ypos" ...
An item like a rectangular DoD:s Winpanel, is set into position by "xpos" and "ypos" coordinates. The top left corner is where the intersecting "xpos" and "ypos" coordinates meet...
The Top Left corner is a starting point for most things like panels and images.
Sometimes this will change. One example is the positioning of some of the text in the HUD. You set the "xpos" and "ypos" and if you have another setting in that section like...
The text will start at that coordinate, then, go to the left.
"east" will head towards the right.
There are more too, "centre", "north" and "south".
But... like I said, normally most items, (like panels) will start at the "xpos" and "ypos" coordinate and display to the right and down... from that all important Top Left hand corner.
The next part to understand is the "wide" and "tall" settings, they control size.
Remember that section in the HudLayout.res file that controls the position of the Axis Winpanel? Look at it again, this time note the settings beside "wide" and "tall" ...
Let's look at the Winpanel we placed on the screen....
As you can see this has set out a size the Winpanel can display in.
There are many more components to the Winpanels and even another .res file for each team, but for the basics of how Half Life 2 HUD items are set on the screen, I do not need to explain them here.
So to sum it up... Most sections in HUD .res files will have these four settings to position and set sizes of items.
The "xpos" and "ypos" coordinates have one more trick yet. You can place a "-", "c" or a "r" in front of the coordinate. Just like text in a page if you place one of those fore mentioned symbols in front of the value... it will control where on the screen or panel the value will start to position from...
"xpos" "10" ... The nomal setting. This will start from the left hand side of the screen and then display the item to the right 10 units away from that point.
"xpos" "-10" ...This makes an item reverse the starting point of the screen or panel and work backwards. Use with caution, it can make items go off the screen!
"xpos" "c10" ...This makes an item start from the centre of the screen or panel, "0" is the centre of the screen or panel now.
"xpos" "r10" ...This makes an item start from the right of the screen or panel, "0" is the right side now and "10" will push the item from the right to left.
You can't always see the wide and tall settings, mostly they are invisible, sure you can see items like the Winpanels but there are some wide and tall settings in the HUD that make life a little difficult if you can't see them. Look at the picture below, (click to enlarge), the technique described below will help you see these areas that are normally invisible...
A perfect example of this are the settings for a group of items in the lower half of the hud, The section in the HudLayout.res file "HudPlayerStatusPanel" has a huge area ....
Lots of things are in this 640 wide (full width) and 190 high area. But how do you "see" this invisible area? There is a way :)
Open up the ClientScheme.res file. Go to Line 147...
This "color" called blank ("0 0 0 0" = no color/clear) is clear for a reason. Change this to a color and ALL the "invisible" areas in the HUD will show up. Change it now to a Transparent White....
Panel.BgColor "255 255 255 50"
Start up the game and take a look, you will now see all the "invisible" areas that have been set in various .res files.
Note the areas overlap each other too.
This overlapping is OK and normal but sometimes when you overlap another panel you want one of them on top (in front) of others!
The "zpos" setting is like a setting you will see in things like Microsoft Office to "Bring forward" or "in front".
It can be used on all items but is rarely seen in the standard files. You just place it in the section if you need it. Below "tall" will do fine...
This setting works the same as some graphic programs when you want to "set to the front", in other words place a graphic over another one.
The settings allow for quite a bit of adjustment. Think of it like this ...
"zpos" "0" = The Background or the item that is set the furtherest back.
"zpos" "1" = The image on top of the Background.
"zpos" "2" = The item on top of another item that is set on "zpos" "1".
Just keep adding higher numbers to get one image on top of another, the one on top has the highest number and it's the one that cannot be blocked by other items.
There is also the ability to get behind the one that is set on "0". Put a minus in front of the number ...
"zpos" "0" = The Background.
"zpos" "-1" = The image behind the Background.
"zpos" "-2" = The image behind the image set on "zpos" "1"
Without some special techniques, the files you edit can only be changed once, then you start the game the have a look at the result.
This can be very time consuming, there are three techniques you can use to "do it on the run".
This first one recommended by a dodbits reader, Oliver, is the best and involves a bit of preparation before you start the game.
There is a CVAR you can type in the console to reload the files used in the HUD after you have edited them. It is called "hud_reloadscheme".
Put this bind in your autoexec.cfg or config.cfg...
bind "KP_END" "hud_reloadscheme" Just change the key to what you want.
Now when you are editing a file like the positions of items in the HudLayout.res file, you can instantly see the change.
Thanks Oliver :)
To make light work of customizing try to set yourself up like this ...
NOTE: I did try "hud_reloadscheme" in the past and it did not work for me (it’s working now). If you find it does not, try the next technique below this one.
It will not work on the colors and Fonts in the clientscheme.res file, for changes in this file you have to restart the game to see the changes.
You can use the “create a shortcut” function in the Steam games list and make one or more shortcuts with all kinds of options, map name, windowed mode/size, no startup video. Just look at all the options here.
The second technique can be used for...
Some maps take a long time to load, this wastes time when all you want to do is edit your files and check them. Use a simple map like these ones, one 4 flag map and a special DET map, (see pics below) made from haircuts tutorial map.
|INsanes 5 flag map||INsanes special DET map|
Don't forget to set the map time to "0", (this is found on the "Create Server" window when you start a LAN game) so it won't load up big map... right when you are in the middle of something !
When you choose a map in dods... "Create Server" in the popup window that comes next, there is another tab to save that setting.
Turn off antivirus and other memory/system intensive services, use the smaller resolutions and test in the higher ones when you have a few things done.
Oliver also recommends dod_snow_battlefield_final as a good map to test on. I have others also that I can’t release yet as they are not finished. But mostly these two will suit all needs.
Another map that is of use is dod_anzio. Why?
Joining as Allies you can...
If you are testing the Winpanels I strongly recommend you use the small maps I made from haircuts tutorial map... quick to cap out and you can introduce a bot and have him do some capping as well.... so you can kill him to invoke the “defended” Stats.
Put these binds in your autoexec.cfg or config.cfg...
bind "KP_HOME" "sv_cheats 1; wait; wait; wait; bot"
bind "KP_PGUP" "kick Bot01; kick Bot02; kick Bot03; kick Bot04; kick Bot05; kick Bot06; kick Bot07; kick Bot08; kick Bot09; kick Bot10"
To use the bot binds...
There are some more bot commands you can use... but these are the most helpful when testing a HUD.