eXtv/TGBF spectator HUD for Team Fortress 2 at keekerdc

eXtv/TGBF spectator HUD for Team Fortress 2

November 12th, 2011

Work continues ‘behind the scenes’ in preparation for resuming full video coverage of TF2. I’ve been working with eXtine on specifications for a HUD that meets our needs. If there’s sufficient interest I’ll put the relevant files up on GitHub.

I used the Garm3n HUD as a starting point; it’s a tremendously clean HUD and really well crafted from a player’s standpoint, but needed some work on the spec side.

The primary fault of most spec HUDs I’ve seen to this point is an attempt to cram too much information onto the screen at once. The more information that’s presented at any given time, the more your mind has to work to parse and categorize everything on the screen. With the ability to just hold ‘TAB’ and get the full gamut of information available to you as a spectator, there’s little need to have it all present on the HUD at all times. So, out of everything, here’s the short list of stuff I felt the HUD needed to communicate:

Alive/Dead. The difference between these two states has to be obvious. When that’s in place, it’s easy to determine…
Current numbers up per team. You should be able to identify the current (# on #) situation – 5 on 5 in the screenshot above – very quickly.
Classes. Needed to be clear, large, and unambiguous. Identifying what class just bit it is often more important than identifying who exactly just bit it.
Lit / Doing OK / Buffed. The numbers themselves could even go, but in the end I decided to leave them in because it can sometimes be useful in commentary. Really, the important bit that needs to be communicated is if a player is badly hurt or way over-healed. I stretched the bonus indicator cross so that it could be used as a progressive bar, which communicates clearly the extent of the damage or buff in a glance.
Medic charge percentage. Missing from the screenshot, but gets overlaid on top of the medic’s class icon. Doing so saves space that would otherwise be wasted in every other player box, and if there’s a charge percentage, the class icon is redundant anyways – you know that’s the medic.

What most people would probably notice are missing and might complain about are the names of the players. Yup, they’re gone, and there’s several reasons for that:

Saves space. Holy moly; do the names ever take up a ton of space! To ensure that all names will fit properly, all the spec boxes would need to take up 200% more space than they do without. Since a primary goal of these modifications was to make sure the class icons were easily recognized, the boxes had to be made taller, and extending them to fit the name wasted far too much space.
Saves on visual processing. At least in my case, I noticed every time I’d look left to get information from the HUD, the first thing I’d fixate on were names – stuff that never changed, and had no real bearing on the current situation in the game. The visual complexity of all the names sitting on the left side of the screen acted as a speed bump, and acted contrary to the purpose of the HUD – to communicate important information fast.
Removes a commentary crutch. Look, TF2 is a class-based, team game. Often, in any situation, it’s more important to know what classes are still involved than the names of the players that are controlling them. The purpose of any segment of commentary is to describe an event or convey a particular insight. Using a name instead of a class, when it comes to TF2, adds two extra unnecessary steps to that process – first the commentator has to translate class to name, and then the audience member needs to translate that back to class to get the full picture. From a commentary standpoint, it’s far more clear to use team names and classes in the run of play, and then using player names to highlight a notable play, and in such cases names can be picked up from the obit readout, anyway.

That’s it for now; thoughts are appreciated.

Written by keekerdc

November 12th, 2011 at 4:57 pm

Posted in glhf

http://twitter.com/KritzKast KritzKast

Names are important. I get why you’d want to remove them; space, instant info etc. But names are the difference between teams, they are the reason people tune in to see their favourite players, how they are working in new teams. Names are the narrative in game play. They are the discussion pre-game, the jokes in colour casting and the differentiator in the post-game analysis.

An answer? Split the screen, Blu on the left, Red on the right. Add the names below each character in what in a small font below. Limit it to n characters if you want. Cut them completely and you may as well not talking through the game either.
http://about.me/Brugman eagle

Looks awesome! Where did you find info on how to do more advanced GUI adjustments like all the current players’ health or weapon? I made a CSS spectator GUI a while back but I couldn’t find any guides or tuts on things other than changing fonts, sizes and positions.
Anonymous

Fair enough; but I think I’d argue in counter that it’s the commentator’s job to know names or have them written down for quick reference if he needs to use them. All the names are also just a TAB away. I’d still hold that including them in the tournament HUD itself is a waste of space, and would break up the overall aesthetic if each box was made taller to include them underneath.
Anonymous

Flame’s guide to HUDs is a pretty good starting point, if not a bit incomplete on the tournament HUD side of things. At the least it’s a good place to start.

http://flamehud.googlecode.com/files/FlameHUD.pdf

Some things in the tournament HUD are a bit counter-intuitive, or just plain don’t work, so some experimentation was definitely necessary. It’s taken me several months of on-and-off tinkering just to get a good grip of things.For instance, one thing that I don’t like but can’t do anything about are the class portraits. I’d rather put representative monochromatic icons with distinct outlines in their place, in order to make them more immediately recognizable.
http://twitter.com/LuckyLukeTF2 Luc Oehlen

Looks sexy. I’d prefer the advanced spectator and killnotices at the top of the frame though. Also not sure why the timer should be so big since it’s useless. Unless he can make it so it shows server time left.

About the names, I’d like to have names there. But I don’t think you should split it up, since then the space between blu / red info is too far from each other – that doesn’t read well.
Asdf

Player names? Scoreboard?
Anonymous

Thx.

I plan to have an externally generated scoreboard occupy the space in the upper left corner, which is why it’s been left empty. But, since this needs to be usable for highlander, I might have to rethink things a bit. Right now I’m considering whether to have separate layouts for 9v# and 6v6…
Anonymous

TL;DR?
bcpk

I agree with your first point about the names. Indeed, oftentimes all you can see is clantag prefix, rendering the whole thing pointless.

However, I feel like your second point does the brain a disservice. If the caster/s have run through the rosters beforehand, you have some idea what to expect. There isn’t exactly a great deal of processing to do and the discrimination between one of max two possible names has negligible duration. There is a human interest element negated by this anonymity.

What I’d like to see is a team-name field above each roster, and the tag stripped from the players’ names. I don’t know if this is feasible within the HIS framework, perhaps not.
bcpk

HUD*.

Also I’d suggest you use a non-bold font. But considering the context, you clearly have some strange ideas about fonts anyway…
Anonymous

Bolder typefaces end up holding up better on a stream than thinner ones.

If the commentator is doing their job properly, there’s little anonymity, imo. That role is one that has always been filled by commentators in traditional sports – identifying players. Besides, there’s still the obit readout, complete with all the names you really need. If there’s enough teeth gnashing about the damn names then I might provide a fork of these modifications with the names there. I agree that the best of all considerations would be to have the team names displayed at all times on the tournament HUD, but, as you suspected, the way it’s programmed does not offer that possibility. I do plan to fill that gap with something else I’m working on.The font on the blog here looks like shit on Windows, I know. It’s quite pleasant elsewhere.
bcpk

>That role is one that has always been filled by commentators in traditional sports – identifying players.

The difference there being not every player looks identical on a sports field like they do in the HUD. Even if the players have individual hats and miscs to separate them, that is not reflected in their class icon. Speaking of class icon, have you considered using that instead of the class’s face? I don’t think I’ve seen a spec HUD that does that, and have wondered how it would turn out. Stylistically it seems it would gel better with the minimal layout you have now.
bcpk

Here’s a mockup http://i.imgur.com/XrQEe.jpg
bcpk

Haha, I really should read the comments more thoroughly.

Nevermind!
Anonymous

Hah; quite alright. Yea I tried to implement exactly that but it wasn’t taking. Could have been that I didn’t find that juuuust right way of getting it done, but I burned too much time on it already and needed to move on. :)
Mongoose

Rather than having the medic charge over the medic icon why not disassociate it from the medic entirely to reduce the amount of clutter in one place and give the charge percentage its own place, maybe at the top or bottom of the team. I haven’t put *that* much thought into this, but the uber percentage is in many situations far more important than which players are down and could do IMO with far more prominent placing in the spectator huds. Sure the medic carries the ubercharge but on a co-ordinated team it effects how every single player acts.
Anonymous

A good thought, but can’t be done.

In the HUD in general, things have to be within the area that’s defined for its parent element. In the case of the tournament HUD, most things are tied to each player’s box, and that includes the charge percentage, so it has to be placed somewhere within the box.
StoreClock

One thing that always bugs me is that the order of the players is always different. Does the framework allow for sorting my class? Like Medic, Demo, Soldier, Soldier, Scout, Scout. You could just glance over and know exactly where the info you want is, instead of looking down the list every time to find the player you want.
Anonymous

Right there with you, but unfortunately, no.
http://twitter.com/steelfirez Horace He

Just wondering, can you change what shows on the leaderboard(when you press tab). If you could, would it be possible to have an overlay of the names whenever you press tab?
Next, are you sure you want that big of a round scoreboard in the upper left? I would rather make it so that it’s possible to toggle on and off. Or if it’s possible to change the leaderboard, then you could just make it show when you press tab. Server time, team names, points should not be an overlay, but should rather be an extension of the current HUD, but only when you press tab.
Finally, it would be nice if the player’s names got progressively redder, instead of a split off between red, white, and blue.
Yeah, if you can’t change the leaderboard, most of my suggestions are moot.
Erik Twice

I agree with the name thing, accesibility first! TF2 is an extremely tough game to follow. Six players divided into two groups and again divided depending ont heir roles? Rocket Jumping and sniping in the same game? I nightmare it is!
AstroNit

I’d agree with keeping the names. I’m new to watch TF2 competitive and I find it really useful to have the names, even if it’s just the first 10 characters