Existing menuDef names | ownerDraws | Formatting tags | Display Flags and Conditionals

Hiding Existing items

If all you want to do is hide existing items, it is very easy. Through the console or by writing it into a config, you can use the hudscript command to hide items, or show previously hidden items.

The use is: hudscript hide menudefname
hudscript show menudefname

A menudef is a group of items for the hud. For example, default_medium_ammostatus draws the icons and counts for both grenade types and all 4 ammo types. Hiding that menudef will hide all 12 of those objects.

You can see a list of existing menudefnames here. A hudscript hide will need to be executed every time a map is loaded, so if it's something simple, it could be easiest to add it to each class config and turn class configs on.


Some hud elements can also be hidden through existing cvars.

Lagometer cg_lagometer 1/0 Network connection meter, show / hide
Sentry Camera cg_showsentrycam 1/0 Sentry camera (on huds that have it), show / hide
Timer cg_drawtimer 1/2/0 Map timer, count down / count up / hide
FPS cg_drawfps 1/0 FPS Counter, show / hide
Speedometer cg_drawspeedometer 1/0 Horizontal Speed Vector, show / hide
X-hair Gren timer cg_showgrenadtimer2 1/0 Pie style visual grenade timer, show / hide
Grenade Timer Bar cg_showgrenadetimer1 1/0 Bar style visual grenade timer, show / hide
Sound icons cg_visualaids 1/0 Deaf assistance icons, show / hide
Attacker Icon cg_drawattacker 1/0 Icon and name of your attacker, show / hide

These are also accessable through the in game menu.



Before you start

Before you start, realize that this may take you a while, and it's better to learn how to do this all at once. Set aside a few hours to walk through this without distraction.

All you need to create your own hud is notepad or some other text editor. Personally, I am very happy with textpad. It allows you you have multiple files open in one window and undo lots of changes, instead of just the most recent one. It also allows your lines to be numbered, a great help when there are problems.

The hud system uses a number of files for each type. The menu in game scans the /ui/hud/ directory for .cfg files. It reads the names of these into the top box. I will call those the hud styles.

The contents of the .cfg are read into the lower box. I will call these the hud variant. The game then translates this information to create the path to the hud. It generates /ui/hud/style/variant/hud.menu as the hudfiles path.

The game also pulls from /ui/hud/style/ the variant.jpg for the preview box, and variant.cfg for the text description box. Any picture used for the preview will only show when the game is not connected to a pure server. Purity prevents any graphics from being used in the game that are not also on the server. Because of this, I suggest that every third party hud come with a very good description in the variant.cfg.

As of right now, the HUD you make will only show up in the menu before players join a team, or on unpure servers. Server purity prevents the HUD from displaying in the selection menu while on a pure server, but does not prevent the HUD from being used if it was selected prior to joining.

I also suggest binding a key in the game to "loadhud" and doing this with ETF running in a window. You can make changes, save it, alt-tab to the game, push the "loadhud" button, and see what your changes did to see if you want to keep them.

If you make an error in the hud, everything after that point will not be drawn, or will be drawn incorrectly. Make sure you pull down the console and check for red warnings when you're having problems. It will even tell you which line of your hud you screwed up on.



Getting Started

The first step is to give yourself an existing base of files to test.

  1. Go into your /et/etf/ui/ folder and create a new folder, /hud/
  2. Now, using winzip or another archive reading program, open your etf_pak0.pk3 and sort by path. Scroll down to ui/hud/ and pick the style.cfg that is the closest to the HUD you want to create.
  3. Select that .cfg and the same named folder. For this example, we'll start off with the 'default.cfg' and 'default' folder. Extract them to your etf/ui/hud/ folder.
  4. Rename the etf/ui/hud/default.cfg to whatever you want your HUD to be named. Most people just use their name for it. Don't use spaces, and try not to use special characters. For our example, we'll use "customhud.cfg". Now, open customhud.cfg and you will see the names of the three variants. Since it's still really the 'default' style, you'll see the three sizes. If you only plan on making one variant, remove everything in there, and type the name of the variant you'll be making. For our happy example, lets just use variant1.
  5. Now that we have our style and variant named, the rest of the used files also have to be relinked. Here's what you do. Change the name of the Default folder to customhud. Open the now named customhud folder, delete the large and small folders, as well as large.cfg, large.jpg, large.menu, medium.jpg, small.cfg, small.jpg,and small.menu. Rename the folder and 2 remaining files from medium to variant1. Load the now named variant1.menu into textpad and change the first path to reflect your new hud. Our example would make it say "ui/hud/customhud/variant1/hud.menu"
  6. After you are done modifying the HUD, make sure you open /etf/ui/hud/customhud/variant1.cfg and modify the description there to fit what you have created.
  7. Lastly, open /etf/ui/hud/customhud/variant1/hud.menu and change the four #include lines to reflect our new path. Basically, take out default/meduim from each and replace it with customhud/variant1
  8. Now you are ready to begin your editing. Most HUD's have multiple menu's that you can edit. There's no reason for this, other than it's convenient and easier to organize if you're editing by screen chunk. Feel free to break it down more, or combine them with each other. Just remember to edit the main hud.menu with the #includes to have it all working.


Moving Items

Moving items is a good place to start. The HUD is plotted out on a grid. The game reads a 640x480 unit grid as the screen, and overlays that on any resolution that may be running. This way the HUD displays properly for all users. Each HUD element is defined in it's place by this coordinate system.

There are two types of elements on a hud. The itemDef is a single element. And the menuDef is a group of itemDefs. Each menuDef or itemDef has a line for it, rect # # # #. The first two numbers are what we're concerned about for moving objects. For a menuDef, the first two numbers are the x y coordinate from the top left corner being 0 0, and the bottom right being 640 480. The itemDef numbers are points from the menuDef's top left corner as 0 0.

By modifying rects, any item can be moved anywhere on the screen. You can use negative and decimal values, but it is not recommended. Decimal values can cause a hud to display improperly on different resolutions, and negative values can just be confusing.



Resizing Items

The next step would be to change the size of something currently drawing on the HUD. There are again, several parts to this. If you want to change the size of some text element, find it's itemDef. There is a line (or should be a line) in it: textscale .##

By changing the number, the scale of the text is changed. There are cutoff points for font clarity. 0->.19 uses small font, .191 -> .299 uses the medium size, and .3 and over uses the large font. These help control character clarity. More information on that in the fonts section.

Graphical elements are defined by the last two numbers in a rect. The third number is horizontal size, and the last number is vertical size. The sizes are in the units of the HUD coordinate system.

Many text elements are bound within the confines of the rect as well. If you have a text string that is 150 units long, but the itemdef rect is 5 25 100 30, it will cut a third of your item off. If you run into it, just extend your rect bounds.



Colors & Fade

Often in the HUD scripting you will see a line, "forecolor 1 1 1 1", or something of the sort. This controls the color of the item. It can be used on most texts, and some graphical elements. The first three numbers are the percentages of certain color channels showing. Red, Green, Blue. By modifying those you can create other colors. You can use decimals. 1 is 100% of the selected color drawing. 1 1 1 is white, 1 1 0 is yellow, 1 0 0 is red, etc.

The last number in the color string is for alpha blending. 1 is 100% opaque, .5 is 50% transparent. Use this with caution. Having too many items with blended backgrounds causes a resource drain on low end systems.



Borders & Backgrounds

Borders are defined by three lines.

border #
      // defines what type of border to draw.
      // 1 = box, 2 = horizontal sides only, 3 = vertical sides only.
bordersize #
      // defines what size the border is in HUD coordinate units.
bordercolor # # # #
      // defines the color of the border,
      // first 3 numbers are R G B values, fourth is alpha blend value.

Backgrounds also depend on three lines.

One is always the same, just add or make sure the line "style WINDOW_STYLE_FILLED" exists in your itemDef.

Second, the last two numbers in the itemDef rect define the size of your background. Make sure your rect sizes match what you're trying to put a background to.

And third, you need backcolor # # # #. Again, this will be R G B values with the fourth as alpha blending. The system always draws in the order the items are in the .menu. If you want a background, it should be listed first of all the itemdefs.

Here is an example from the default medium scores.menu.

		itemDef {
			name "back_REDSCORE"
			rect 0 0 55 20
			visible MENU_TRUE
			decoration
			backcolor 1 0 0 .35
			style WINDOW_STYLE_FILLED
		}
		itemDef {
			visible MENU_TRUE
			rect -1 -1 56 21
			decoration
			border 1
			bordersize 1
			bordercolor 1 0 0 1
			ownerdrawflag CG_SHOW_ON_RED_TEAM
		}

This will draw a 65% faded background in red, with a full red line around it whenever the player is on the red team.

Also see formatting.txt for more information on backgrounds and borders.



Text Styles & Alignment

There are a few different ways to style text. There is a small shadow, big shadow, blinking, and pusling. In general, the when a text item is smaller, use the normal shadow. When the text is larger, use the bigger shadow option. These are only used on itemDef's that draw text.

    textstyle ITEM_TEXTSTYLE_NORMAL        // for normal text
    textstyle ITEM_TEXTSTYLE_BLINK         // some items blink automatically
    textstyle ITEM_TEXTSTYLE_PULSE         // some items pulse automatically
    textstyle ITEM_TEXTSTYLE_SHADOWED      // thin shadow, normally for smaller text
    textstyle ITEM_TEXTSTYLE_SHADOWEDMORE  // thick shadow, normally for larger text

Also of importance is aligning text. It can be left, center, or right. These are justified around the rect point and using the rect sizing. If you have a rect with x size 200, and change it from right align to left align, your text will move 200 units. If you don't set an align, the system assumes left.

    textalign ITEM_ALIGN_LEFT
    textalign ITEM_ALIGN_CENTER
    textalign ITEM_ALIGN_RIGHT

You can also move text around with alignx and aligny in relation to other objects in the itemdef. For instance, if you had text drawing on a background within the same itemdef, but it was drawing above and to the right of where you wanted it to be, you could add these lines:

    alignx 5
    aligny 10

Again, the numbers are units of the HUD grid system.

The most complicated aspect of text formatting is the scalable boxes for mm1, mm2, and various others. They can have a defined anchor point and growth direction. It is annoying to fiddle with, and I never really bothered with it once I had the two styles used in all the huds. Some information for their use is in formatting.txt

Also, because it's perfect for this, I have uploaded Athan's mm2 modification guide from Q3F2 here.



Fonts

There are 8 different fonts that you can use in the HUD. You'll see in your hud.menu there is a single assetGlobalDef. This sets the 'asset' font for the HUD. It is what everything defaults to if you don't specify a font in the menuDef, or if you have a 'useassetfont' in an itemDef. This allows you to use two different fonts in any given menuDef. You can see an example of each font, with the name of each, here. Each font comes in 3 or more sizes, for you to set using smallfont, font, and largefont. This allows the quality of the referenced font to change with the size of the text you are using. Anything with a fontsize .19 or smaller uses smallfont, anything over .3 uses bigfont, and the rest of course, use the font setting. As small fonts get bigger, they get fuzzy and hard to read. As the big fonts get smaller, they get less defined and can run into each other. If you're having trouble reading something, make sure you're using the three sizes. I didn't always do this for the included HUD's, not because I'm lazy, but because it provided the proper effect for what I wanted to do. A list of the fonts and their sizes is below.

FONTNAME       SIZES

disinteg       10 16 21
q3f            12 16 20
sf_quartzite   10 15 19
standard-1     14 16 21
standard-2     12 24 36
veramobd       12 18 20 26 32
veramono       12 16 20 36
zerothre       12 18 21


Display flags & Conditionals

Display flags are a dynamic way of drawing the HUD. These are what allows the HUD to automatically change depending on what's going on in the game, as well as the class a player is, or the weapon they have selected.

There are two types. One is the dispaly flag. It is used inside the itemDef or menuDef as an ownerDraw. The list of available ownerDraw display flags is in displayflags.txt. The can be used in both menuDef's and itemDef's. Below is an example of their use.

	menuDef {
		name "default_medium_red_score"
		fullScreen MENU_FALSE
		rect 250 448 64 32
		visible MENU_TRUE
		ownerDrawFlag CG_SHOW_RED_TEAM_EXISTS
		ownerDrawFlag CG_SHOW_NO_SCOREBOARD

		itemDefs go here

		}

The above would draw on the hud whenever the red team is allowed to be on a map, and then only when the scoreboard was not being drawn.

The other type of draw is a positive conditional. This allows you to draw certain elements when a player is the specified class or has the specified weapon selected. It is with these the hud can be very dynamic. Good examples of their uses are the 1h hud (for weapon conditionals) and dev_team shuriken hud (for class conditionals). The list is also available at the bottom of displayflags.txt. Their use is in both menuDef's and itemDef's as follows.

		itemDef {
			name "shells_clipcount"
			rect  95 175 36 20
			visible MENU_TRUE
			decoration
			weapon {sniperrifle;minigun;assaultrifle}
			forecolor 1 .4 0 1
			textalign ITEM_ALIGN_RIGHT
			textstyle ITEM_TEXTSTYLE_SHADOWED
			textscale .35
			ownerDraw CG_PLAYER_AMMOSLOT_SHELLS_VALUE
		}

The above would draw the players invintory number of shells, but only when they have the sniper rifle, assault rifle, or minigun active.



Use of "Special"

When going through this, you may find some itemDef's have a line in them, "special". This has a different effect on each itemDef in which it is used. In most cases, it is either for automatic border spacing or for line spacing. The best way to figure out if you should mess with it is to mess with it. Change the number, comment the line out, see what it does.



Advanced

Ok, now for the fun advanced functions. In this way you can make the hud even more dynamic and complicated. We will go over cvar tests and text cvar scripting.

Cvar Test
By adding a cvar test to an itemDef, you can make it draw only when a cvar in the game is set to a specified value. This is what I used to make the FPS meter, Timer, and Speedometer move up when the lagometer is not being drawn.
eg:
		itemDef {
			name "fps"
			rect 0 2 48 8
			cvarTest "cg_lagometer"
			showCvar { "0" }
			visible MENU_TRUE
			decoration
			forecolor 1 1 1 1
			textstyle ITEM_TEXTSTYLE_SHADOWED
			textscale .2
			ownerDraw CG_SYSTEM_FPS
		}
		itemDef {
			name "fps"
			rect 0 43 48 8
			cvarTest "cg_lagometer"
			showCvar { "1" }
			visible MENU_TRUE
			decoration
			forecolor 1 1 1 1
			textstyle ITEM_TEXTSTYLE_SHADOWED
			textscale .2
			ownerDraw CG_SYSTEM_FPS
		}

As you can see, these two itemDef's both draw the FPS meter, but one draws when cg_lagometer is set to 1, and the other draws when it is 0. This will move the FPS meter up 41 units whenever the lagometer is turned off.


Text Cvar Scripting

With Text Cvar scripting, you can use an itemDef to display a variable text as defined by config files. Lets use this as an example:

		itemDef {
			rect 50 13 22 10
			visible MENU_TRUE
			decoration
			textstyle ITEM_TEXTSTYLE_SHADOWED
			forecolor 1 1 1 1
			textaligny 12
			textscale .15
			cvar "textcvar1"
		}

With the above itemDef in a menuDef on the HUD, whatever "textcvar1" is set to, will be written on the screen. This is what is used extensively in the Elhana Enhanced hud for her communication scripting at the top of the screen. You use configs to create cvars like this:

set textcvar1 "Test Text One"
bind x "set textcvar1 "Test Text Two"

If you were in the game and executed the above config, "Test Text One" would print on your HUD. If you then pushed X, it would change to "Test Text Two".



Creating New Elements

You can also create new elements that aren't currently on the HUD you're editing. While most information is on most huds, you may want to add something new that isn't currently used. A nearly complete list of all options is in ownerdraws.txt. I don't suggest typing out a new menuDef, but find one that matches the type of ownerDraw and replace it. For example, if you want to put a new text ownerDraw in, find an existing one and change it's ownerDraw.



Finishing Up

A few last things before you're done.

  1. Go through the HUD and change each menudef 'name' line to match your new style and variant. This will allow users to use the hudscript hide/show functions. It would also be best for you to include a list of those names with your HUD if you release it to others.
  2. Write a description for your new HUD and put it in /ui/hud/style/ as variant.cfg
  3. Make sure each itemDef contains the line "decoration"
  4. Make a screenshot of your HUD, resize it to 512x512 pixels, and put it in ui/hud/style as variant.jpg.
  5. When in doubt, look in the scripting for the huds already in the game. There are examples of everything you can do already included feel free to steal and use whatever you want from the files already included.


F.A.Q.

Q. Why doesn't /edithud work in ETF?
A. Because the new HUD's generally don't have borders and backgrounds, it would have been impossible for users to know where to grab. To simplify things, at this point, it was removed. There are plans to reimpliment it, but no timetable to do so.

Q. Why is there only one question in here?
A. Theres two now. But anyway, it's because no one has asked me questions yet. If you have a question, I'm in #etfgame, or you can email me at shuriken@etfgame.com. If you have a problem, please work on it for a while before you ask me. I ended up teaching most of this to myself, I'm sure most problems can be solved if you just work with it a little. I also work full time and am not around all that much. If you do need to catch me, the best time is evenings US time and weekends.