Helpful HUD Customizing Techniques

updated steampipeIf 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.

Sections.

1. Changing Colors in the clientscheme file.
2. More ways than one to change a color
3. Colors
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!


 

Changing Colors in the ClientScheme file.
Stop here! IMPORTANT! Read this and understand this simple way to find a function of a HUD item

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.


 

More ways than one to change a color.

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.


 

Colors.

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.


 

About the RGB Decimal color used in ClientScheme.res.

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...

painters-palette

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 :)

RGBLab_2005


 

Transparency and how to set it.

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...

Transparency_in_menu

"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.


 

The dodlogo.TTF, a True Type Font file.

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...
}

"d_skull_dod"
{
"font" "ClientTitleFontPlayerIcons"
(The font type..and size.)
"character" "S"
}

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)
{
"1"
{
"name" "Day of Defeat Logo"
"tall" "76"
"weight" "0"
"additive" "0"
"antialias" "1"
}
}

ClientTitleFontSmall
(This one is the smallest)
{
"1"
{
"name" "Day of Defeat Logo"
"tall" "20"
"weight" "0"
"additive" "0"
"antialias" "1"
}
}

ClientTitleFontPlayerIcons
(This one is the middle size used on most icons.)
{
"1"
{
"name" "Day of Defeat Logo"
"tall" "25"
"weight" "0"
"additive" "0"
"antialias" "1"
}
}
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 : )

dodlogo_TTF

If you are going to customize this file you will need to know more...

  • Special Font editing programs. Freeware for windows is FontForge but hard to use! Linux and Mac programs handle this better, but editing TTF files in windows means you pay for a good program....typical MS bullshit, get a clue Gates!.
  • Once you have edited it, you need to make the file read only or Steam will replace it.
  • You can also add special font files to the bottom of the clientscheme.res file.

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.


 

Positioning HUD Items on the Screen.

Files of interest when moving items around...

Two very important files for positioning items is the HudPlayerStatusPanel.res file and the HudLayout.res file.
These files determine the area items like the Stamina bar have to display in. They hold information about the items on the screen, Stamina Bar, MG Heat, Weapon status, Health Bar, icons, Current Weapon status and Ammo status, Capture Bar. Just open the files and look at the many sections.

Getting the settings wrong in these files can cause some errors in others. More on that latter... Please read the "IMPORTANT NOTE ABOUT POSITIONING CERTAIN PANELS..." on the Maps, Bots and Notes page before you edit any positions on the bottom of the screen... will save you some time and sanity. Other files of interest, (for positioning items) if placed in the dod\custom\tut_hud\resource\ui folder...
HudCapturePanel.res
HudCurrentWeapon.res
HudPlayerStatusFireSelect.res
HudHealth.res
ScoreBoard.res
Win_Allies.res and Win_Axis.res
HudPlayerStatusStamina.res
HudPlayerStatusMGHeat.res
The HudLayout.res file can be placed in the dod\custom\tut_hud\scripts folder and contains positions of many items and a few other things... read on, it is mentioned below and on other pages.
The "X" and "Y" positions and "wide" and "tall".

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".

screen1 

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" ...

x_y_pos

WinPanel_Axis

{

"fieldName" "WinPanel_Axis"

"visible" "1"

"enabled" "1"

"xpos" "143"

"ypos" "381"

"wide" "305"

"tall" "90"

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...

"textAlignment" "west"

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" ...

WinPanel_Axis

{

"fieldName" "WinPanel_Axis"

"visible" "1"

"enabled" "1"

"xpos" "143"

"ypos" "381"

"wide" "305"

"tall" "90"

Let's look at the Winpanel we placed on the screen....

wide_tall

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.

Using "xpos" and "ypos" to align 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.


 

How to see the invisible areas in the HUD

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...

see_areas_in_hud

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 ....

HudPlayerStatusPanel

{

"fieldName" "HudPlayerStatusPanel"

"xpos" "0"

"ypos" "290"

"wide" "640"

"tall" "190"

"visible" "1"

"enabled" "1"

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...

Panel.BgColor "blank"

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!


"zpos" and how to position panels on top or behind

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...

WinPanel_Axis

{

"fieldName" "WinPanel_Axis"

"visible" "1"

"enabled" "1"

"xpos" "143"

"ypos" "381"

"wide" "305"

"tall" "90"

"zpos" "0"

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"


 

Adjusting items while in the game.

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 :)


 

Setting up your PC to make it quicker

To make light work of customizing try to set yourself up like this ...

    • Have the file to edit, (preferably using Notepad++) open on the windows desktop.
        • Run the game in a window, say 800x600 or 1024x768. I use 1024x768...800x600 is a bit small but is also good for checking, some players do still use this resolution!
          • Turn off antivirus, and other system hungry background programs.
            • Run a small map... they load quicker! See the Maps and bots section for details.
              • Use the next technique and test your changes in different resolutions. Even widescreen if you can.

                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...

                • Checking in different resolutions, if the above one is not working for you.
                Note: Use at your own risk, this technique involves changing your in-game screen resolution multiple times! It may be bad for some systems.
                It did not hurt my video card, game files or PC!

                Try setting your video options to "run in a window" and select 800x600 resolution. When you need to edit the file you are working on, press "escape" click the file on your desktop, edit the position, save it, change the resolution to 640x480 and it will refresh the screen and show the item in the new position.
                This does not work with colours... just positions. Just keep going from 800x600 to
                640x480 to "refresh the screen".
                My system takes about 20 seconds to change resolutions... beats restarting the game : )

                Do not... "Minimize" the dod screen while in "run in a window" mode. It may crash.
                Do not... Pick a resolution over 800x600 it will take longer to load and will be a pain to edit the file behind it.
                Do... ask someone else about this, if you are not sure if it is bad for your hardware!
                It saved me from going, (pardon the pun) ... insane.
                When you are trying to work out where an item is on the screen or panel just by the settings....

                "xpos" "143"

                "ypos" "381"

                ...you are right... it's damn hard. Maybe this will help, the picture below is a 640 X 480 screen divided up into increments of 30...
                640x480-30-unit
                You can look at it and work out an items position and the size.
                I have a Black and White version that you can print out.
                Just right click on the pic in the link and save.
                (To print, just use the Windows Picture and Fax viewer to print it at the Max size).
                There is more preparation yet... Maps and bots.

                Maps, Bots make a difference to testing

                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.

                hud test 5man cap thumb_hud_test_det
                INsanes 5 flag map INsanes special DET map
                Download the special maps here.

                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...

                • Test the health bar in steady increments by submerging under the water on the allied beach.
                • Spawn 3 bots and with certain commands control them to cap flags, cap-out... use to test capture bar and Kills/Deaths area with the minimap on.

                    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.

                    Bots can be very helpful.

                    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...

                    • Press "KP_HOME" while in-game and a bot will join. If the map will allow it normally you can have up to 3 bots, just press again.
                    • Press "KP_UPARROW" you can make the bot do exactly what you are doing, reload, fire, walk/run... use this to control his movements and cap flags. Press again to set him free :)
                    • Press "KP_PGUP" this will kick all the bots named in the bind.

                    There are some more bot commands you can use... but these are the most helpful when testing a HUD.


                     

                    IMPORTANT NOTE ABOUT POSITIONING CERTAIN PANELS.

                    You may find sometimes that you position a panel and it gets "cut off" or even disappear.
                    This does happen sometimes when you have edited/not edited "wide" and "tall"... or a file in another place that controls the sizes in that area.
                    To explain: We have opened
                    HudPlayerStatusStamina.res file to change the width in the Stamina bar, you may want a long stamina bar like the standard one but you find it has been cut off...
                    cutoff_stamina_bar
                    The setting in the
                    HudPlayerStatusPanel.res file sets the size of the area where you can display the Stamina Bar...
                    "PlayerStatusStamina"
                    {
                    "ControlName" "EditablePanel"
                    "fieldName" "PlayerStatusStamina"
                    "xpos" "10"
                    "ypos" "161"
                    "wide" "105" (Default "266")
                    This is the editable area for that item.
                    "tall" "32"
                    "visible" "1"
                    "enabled" "1"

                    If you changed that to ... "wide" "105" you will only be able to use that width in the
                    HudPlayerStatusStamina.res file. Change it back to the default "266" and you can have your wide one ...
                    Stamina_bar_fixed
                    So, the
                    HudPlayerStatusPanel.res is kind of like the "Master settings" file for that area.
                    The
                    HudPlayerStatusStamina.res file adjusts the visual items to do with the Stamina Bar.
                    Another file that behaves like this is the HudLayout.res file, it's location to place and customize...
                    \dod\custom\tut_hud\scripts. (It is not a standard file and has to be added... it is in the download of extracted standard dod files at the start of the tutorial main page.)
                    The area the capture bar and all the contents in and around it can only be edited in the centre of the screen if you adjust positions in the HudCapturePanel.res file... if you try and move it to the right or left lower screen it will disappear!
                    Here is why...
                    HudCapturePanel
                    {
                    "fieldName" "HudCapturePanel"
                    "xpos" "c-75"
                    "ypos" "c80"
                    "wide" "150"
                    "tall" "90"
                    "visible" "1"
                    "enabled" "1"
                    "icon_space" "2"
                    Look at the value positons "xpos" and "ypos"... they have a "c" in them, one is even a minus value! If you want it on the
                    lower right side change to this...
                    HudCapturePanel
                    {
                    "fieldName" "HudCapturePanel"
                    "xpos" "r130"
                    "ypos" "r100"
                    "wide" "150"
                    "tall" "90"
                    "visible" "1"
                    "enabled" "1"
                    "icon_space" "2"
                    You get the idea, sometimes when something is disappearing off the screen... there is another file affecting the area you are trying to edit. After you adjust the area in the HudLayout.res file, you can edit the HudCapturePanel.res file.

                    A bit more info' about the HudLayout.res file... and word of warning!
                    In this file you can set the size of the area and all it's components that fit in it and adjust the assembled, separate items around the screen as a whole group.
                    If you have just spent 30 minutes or so adjusting all the components so they don't overlap each other... and then you find you want to make room for another group or a single item, you may find it quicker to adjust these values. This is the first set and it controls the position of the items in the HudPlayerStatusPanel.res file...
                    "fieldName" "HudPlayerStatusPanel"
                    "xpos" "0" ...
                    The width position. Taken from the top left corner of the area.
                    "ypos" "285" ...The height position. Taken from the top left corner of the area.
                    "wide" "640" ...The width of the area, "640" is the total width of the Game screen.
                    "tall" "190" ...The height of the area, "480" is the total height of the Game screen.
                    "visible" "1"
                    "enabled" "1"
                    This is very handy... but in the case of the Player Status Bar you have to remember that if you do move the assembled "panel" ...
                    you will also move other items!
                    These items are the Stamina bar, the MG bar and the Fireselect Bar, so be very careful adjusting the HudPlayerStatusPanel.res positions in the HudLayout.res file. You will have to re-adjust a lot of other items!
                    Moved_up_old_health
                    You will find it is better to leave the standard "xpos" and "ypos" alone in the HudLayout.res and adjust the items in the HudPlayerStatusPanel.res, HudHealth.res files.
                    On the other hand using the HudLayout.res file to adjust panels like the Win_Allies.res and Win_Axis.res, (end of the round win panels with a lot of individual items) is very handy as all the items move around together with just one simple adjustment ;)

                    dodbits.com Copyright © 2014. All Rights Reserved.