Modifying the CSS HUD - Step 4

Sectionsupdated steampipe

The flashing colors in HUD Numbers and Icons 

The common scheme method

Individually adjusting each icon.

The Budget + and - number background option

The Flashing Icons in the HUD can have a common scheme adjusting just two places or you can edit them individually in other files.

The common scheme method

Open the clientscheme.res, the section we need is "scheme-specific colors", go to line 202 and 203 and you can see two colors, one for red and one for green.

If adjust "HudIcon_Green" you can alter the green icons like shopping cart, defuse kit, C4, hostage. This will not adjust the flash, just the icon as you see it normally.

I put my "HUD_Icon_normal" color for the "HudIcon_Green"...


The result was my other HUD icons are now the same blue and I still have a red warning color as you can see by my budget area...


But it also has a drawback, now I adjusted the icons to Blue the + budget funds are no longer green...


They turned blue. You may be happy with that, if so leave it. If not open hudanimations.txt and go to the "event AccountMoneyAdded" section about line 246. Find the colors, (there are 2 to change) "HudIcon_Green" and change to what you want, I used "0 160 0 255" the standard green for that area...

commonschemenormcolorHUD4  The result was this...commonschemenormcolorHUD3


Now the red colors, well I like them red and see the purple effect when it flashes, but you may not, just change the "HudIcon_Red" on line 203 of the clientscheme.res to what you want and test it, here I changed that to a yellow, but don't forget you can name it a more descriptive name up in the Colors section and use that for the color too, up to you.

make a_flash_color

You can see the value of knowing where all this stuff is and the relationship between the files? Exploring the HudLayout.res and HudAnimations.txt you will find all these items quite easily once you know how these three files communicate.


Individually adjusting each icon is something I really want to cover later in actual HUD areas like "all about the health area" in a more in depth article where everything is discussed. Better we follow a path of making a classic blue HUD, then go crazy with more intricate things. So look for more articles in my CSS HUD and GUI Modification tutorials soon and as VALVe change things :)


The Budget + and - number background option, If you decided not to use a background then you can move to the next step, Modifying the CSS HUD - Step 5.

For those that want this: in this small section we can modify the HUD to have the budget display the background. It takes quite a bit because of the way it works. You have to shrink the display area and adjust the budget additions and subtractions to display over the same line as the normal budget total.

Open hudlayout.res, go to the HudAccount section and find the background setting, (around line 106) un-comment (remove the "//" in front of the "bgcolor_override" "0 0 0 96" line) so it works. Next we need alter quite a few positions so it looks like this code insert below, (so you can copy paste the code below and paste it in your file)...

        "fieldName" "HudAccount"
        "xpos"    "r123"
        "ypos"    "394"
        "wide"    "108"
        "tall"  "45"
        "visible" "1"
        "enabled" "1"
        "PaintBackgroundType"    "2"
        //"bgcolor_override"        "0 0 0 96"
        "icon_xpos"    "9"
        "icon_ypos"    "16"
        "digit_xpos" "100"
        "digit_ypos" "16"
        "icon2_xpos" "9"
        "icon2_ypos" "-4"
        "digit2_xpos" "100"
        "digit2_ypos" "-4"

The Changes there adjust lots of items basically we dropped down the icons for the "+" and "-" and the removed or gained funding so it is in the same place as the total. That's not the end of it yet.

Remember we edited the hudanimations.txt and fooled around with the green and red icons? Well we need to replace a whole section now so this works...

//activecolor - instantly turn red, fade back to yellow
event AccountMoneyRemoved
    Animate HudAccount        FgColor    "0 0 0 0" Linear 0.0 0.0001    //"HudIcon_Red" 
    Animate HudAccount        FgColor    "Panel.FgColor" Accel 0.0 3.0      //0.0 3.0
    Animate    HudAccount        Ammo2Color "HudIcon_Red" Linear 0.0 0.0001
    Animate HudAccount        Ammo2Color "0 0 0 0" Accel 0.0 3.0     //0.0 3.0
//activecolor - instantly turn green, fade back to yellow
event AccountMoneyAdded
    Animate HudAccount        FgColor    "0 0 0 0" Linear 0.0 0.0001    //"HudIcon_Green"
    Animate HudAccount        FgColor    "Panel.FgColor" Accel 0.0 3.0      //0.0 3.0
    Animate HudAccount        Ammo2Color "HUD_Icon_Green_flash" Accel 0.0 0.0001
    Animate HudAccount        Ammo2Color "0 0 0 0" Accel 0.0 3.0     //0.0 3.0

We also need to a new color in the clientscheme.res, see the Ammo2Color "HUD_Icon_Green_flash" ? I had to add that to separate those functions away from others, otherwise when you get new funds the HUD just shows blue. So insert... 

"HUD_Icon_Green_flash"   "0 160 0 255"      // Green

hud green_flash  The result will be the + and - amounts will fade on the same line... hud green_flash_pic

We have most of the icons now but there are a few to go yet, lets look at the others like the weapon selection and the HudHistoryResource items that pop-up when you buy or pick items up.


Enter Amount Copyright © 2011. All Rights Reserved.