Modifying the CSS HUD - Health Flash Animations

A Tutorial for Counter-Strike: Source

Sections How the flashes work in HudHealth A quick modification on Low Health How the flashes work in HudHealth (file to edit for this page is in cstrike\cstrike\_pak\_dir.vpk. Using GCFScape navagate to root\scripts\HudAnimation.txt).
Apart from the colors in this area there are some animations with values and timings to adjust. We need to understand how this works and see what we can adjust. Basically the Health numbers will...
1. Flash a couple of times on each damage value.
2. When reaching "25" and below it will keep flashing for a "Low Health" warning.
To find this out we can ... Create a local LAN game on de_prodigy. Join as CT go out to the top of first bunker and jump off to the steps below. The landing at the bottom of the stairs will give about "30" damage, middle about "10" damage, second step about "3" damage, and the top and second step about "0- 5" damage. Here is a video... In all the jumps where you get damage the Health area will flash. This is governed by this section in the cstrike\custom\tut\_hud\scripts\hudanimation.txt...
}
event HealthTookDamage
{
    Animate HudHealth        FgColor    "HudIcon_Red"        Linear 0.0 0.1
    Animate HudHealth        FgColor    "Panel.FgColor"        Pulse     4 0.1 1.0  //"OrangeDim"
    Animate HudHealth        Blur    "7"            Deaccel 0.0 0.2
    Animate HudHealth        Blur    "1"            Deaccel 0.2 0.3
}
What that does is to flash between the normal color "OrangeDim" and the warning color "HudIcon\_Red" (in this hud it has been changed to "Panel.FgColor"). Past 25 the flash becomes permanent, control is the hudanimations.txt file, this section...
}
event HealthLow
{
    Animate HudHealth        FgColor    "HudIcon_Red"        Linear 0.0 0.1
    Animate HudHealth        FgColor    "Panel.FgColor"        Pulse 2000 0.1 1000.0  //"OrangeDim"
}
What this does is permanently, (well for the rest of the map time anyway) set the flash until you die or get more health. When you do get more health, (say at the start of a new round) this section controls that by stopping any other running animations and setting up the normal color again....
}
event HealthRestored
{
    StopPanelAnimations HudHealth    0.0
    Animate HudHealth        FgColor    "Panel.FgColor"        Linear 0.0 0.01  //"OrangeDim"
    Animate HudHealth        Blur    "7"            Deaccel 0.0 0.2
    Animate HudHealth        Blur    "1"            Deaccel 0.2 1.0
}
A quick modification on Low Health Now you have the basics it is a matter of what you want to do . In my Ver5 HUD I wanted to move the HUD Health to the center of the screen so it really stands out that... one more hit and I will die! So I change the "event HealthLow" section...
}
event HealthLow
{
    Animate HudHealth        FgColor    "HudIcon_Red"        Linear 0.0 0.1
    Animate HudHealth        FgColor    "Panel.FgColor"        Pulse 2000 0.1 1000.0  //"OrangeDim"
// Moves the Health to a low centre position when below 25 health
    Animate HudHealth Position "C-20 C100" Linear 0.0 0.2       
}
It looks like this... But we must also make sure that when we restart the normal position is set. This should always be the same positions as the "HudHealth" section in the HudLayout.res, the "xpos" and "ypos" settings. In this hud my settings are "xpos" "8" and "ypos" "446". The code style when moving panels around in hudanimations.txt is... "8 446" the 8 = xpos then a space and then the ypos 446...
}
event HealthRestored
{
    StopPanelAnimations HudHealth    0.0
    Animate HudHealth        FgColor    "Panel.FgColor"        Linear 0.0 0.01  //"OrangeDim"
    Animate HudHealth        Blur    "7"            Deaccel 0.0 0.2
    Animate HudHealth        Blur    "1"            Deaccel 0.2 1.0
// Resets the Health to its normal position see third line in "event HealthLow"    
    Animate HudHealth Position "8 446" Linear 0.0 0.2                           
}
Now it will look and work OK... You have to know how to manipulate the events, some things like colors are easy, positions simple, timing... but read the top of that file for a guide, the adjustments are many and not easy to understand! This is a good thing, your HUD will look far different from the others should you take the time to experiment and learn about this file.
Sign up to access this!

Embed

Share banner
Image URL
HTML embed code
BB embed code
Markdown embed code

Credits

Key Authors
dodbits

Submitter

natko avatar
natko username pic Joined 17y ago
Ripe Supporter Admin
Offline
282,181 points Ranked 11th
59 medals 11 legendary 15 rare
  • Achieved Admin clearance Medal icon
  • 10 years a member Medal icon
  • Submitted 100 Skins Medal icon
  • Submitted 15 Tools Medal icon
  • Submitted 50 Gamefiles Medal icon
  • Submitted 30 Tutorials Medal icon

natko avatar
natko

Redistributor
Are you the owner? Request Ownership
Sign up to access this!
Sign up to access this!
Sign up to access this!

Game

Sign up to access this!

Category

Details

Difficulty Level
Beginner

Attributes

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+
  • 5.3k Views
  • 6ySubmitted
  • 6yModified

Scores

  • Not yet rated
Sign up to access this!

More from Submitter

More Sprites & GUIs Tutorials

bcp.crwdcntrl.net tracking pixel