Team Fortress Classic | Modding | Making A Custom HUD

Making A Custom Heads Up Display (HUD)
|RES|Dragline

Tools you will need to make a custom HUD:
Pak Explorer
SprView
SprWiz
A Paint program

Everything aside from the paint program can be found at the files section of the extremely helpful site known as Wavelength.

Files to back up before starting:
None. Your original HUD sprite is in a .pak file. You won't be moving or destroying it.


Your HUD, or "heads-up display," is that area at the bottom of your screen that tells you how you're doing in the health, armor, ammo, and gren departments. TF uses the traditional Half-Life HUD, which can get a little old. There are a few reasons why there aren't so many custom HUDs around, though. One reason is the inability to be overwhelmingly colorful in your creations. You have probably noticed that the vast majority of HUD stuff and other informational sprites are the same orangey color. There are a few exceptions, such as red in the health display when you die and a green icon when you lovingly TK your buddies. It turns out that the orange color is hard-coded into the game. The HUD and other display sprites are made up of .spr sprite files and a corresponding text file that tells the game what part of each sprite to use for a particular in-game image. The sprites are created from bitmap images that are grayscale; normally the shade of gray determines the intensity of the usual orangey color. Due to the way the sprites work, it is possible to add a little color to your sprites using shades of green and red. Other colors will not appear normally.

So, on to creating a custom HUD:

1. Extract the HUD sprite file.
You could conceivably create a new bitmap and start from scratch, but it's much easier to use the standard HUD bitmap as a template. The reason for this is that the game uses one sprite to create a variety of different images that display during the game. There is a text file called hud.txt that acts as a roadmap, telling the game what section of the sprite to use for each image (this will be covered in the next tutorial). If you use the standard HUD bitmap as a template, you can create your new HUD right over the old one, knowing that the positions you choose for everything will be correct. It's not very difficult to edit the hud.txt for a custom job, but then you would have to share the hud.txt with anyone who wanted to use your HUD. This could get tricky if they have other customizations, such as death sprites.

Back to the topic at hand: Open up PakExplorer and choose File->Open. Browse to Sierra/Half-Life/valve and open up pak0.pak. In PakExplorer, navigate to the sprite folder and locate 640hud7.spr. Highlight it and click the "extract" button on the toolbar to extract the sprite file. The uncompressed sprite file 640hud7.spr can now be found in Sierra/Half-Life/valve/sprites (This will be covered in the PAK Tutorial later, but no need to get ahead of ourselves). Note: if you play in a resolution lower than 640x480, you need to extract the file 320hud7.spr to work with. You also need to think about a new video card.

2. Acquire a bitmap image to work with
Now you have the sprite, but to start editing you need a bitmap. The handy program SprView can take care of this job. Open up SprView, choose File->Open, browse to Half-Life/valve/sprites, and choose to open 640hud7.spr. You'll be able to see the display numbers 0-9, health cross, little armor man, etc. Now choose File->Save BMP. Save the image as a name you'll remember somewhere where you can access it easily. This can be right in the sprites folder if you choose. For our example, we'll call it hud.bmp.



3. Edit the bitmap
Start up your paint/image program (even MSPaint would do, although it's not very user-friendly) and open up hud.bmp and take a look:



It is much handier here to have an image program with some advanced features. I'm using Paint Shop Proin this example, but use whatever you wish. I find it easiest to make a duplicate layer of the original HUD, then do the work on one of the layers. If you make your new layer slightly transparent, you can see the original below and line things up correctly. Using a duplicate you also won't have to recreate image portions that you don't intend to change. As the image is grayscale, you may have to increase the number of colors available in order to create layers. You will certainly have to add red and green shades to the image's palette if you intend to use them. The final image can be a 256-color, single layer bitmap and you can save it as any name you wish. We'll stick with hud.bmp. Here's a look at an edit in progress, with the new layer over the old:



And the final edited bitmap (don't forget to make it one layer, 255 colors):



4. Make the sprite
Now it's time to turn your wonderful bitmap creation into a sprite the game can use. How is this done? Well, fortunately Michael "Spider" Morace of Wavelength was kind enough to create the Sprite Wizard. Start SprWiz, choose Next, then choose Browse. Browse to hud.bmp and select it. Choose next, choose next, choose Additive (default), choose finish. Save the sprite in Sierra/Half-Life/valve/sprites as 640hud7.spr (save in a mod folder such as tfc/sprites if you want it to be specific to one mod).



5. Play a game That's it for the custom HUD, start up a game and see how it looks in action:

Click for larger image.


Download the HUD featured in this tutorial here. Read the enclosed readme.txt for instructions.

Ouch, I made something awful. How do I get my old HUD back?

Simply delete the file 640hud7.spr from Half-Life\tfc\sprites. Your original HUD sprite, which is still safely tucked in pak0.pak, will take over after you delete it.

Back: Team Fortress Classic: Modding


IGN.com | GameSpy | Comrade | Arena | FilePlanet | GameSpy Technology
TeamXbox | Planets | Vaults | VE3D | CheatsCodesGuides | GameStats | GamerMetrics
AskMen.com | Rotten Tomatoes | Direct2Drive | Green Pixels
By continuing past this page, and by your continued use of this site, you agree to be bound by and abide by the User Agreement.
Copyright 1996-2009, IGN Entertainment, Inc.   About Us | Support | Advertise | Privacy Policy | User Agreement Subscribe to RSS Feeds RSS Feeds
IGN's enterprise databases running Oracle, SQL and MySQL are professionally monitored and managed by Pythian Remote DBA.