This past weekend was Evo weekend, which means that for most waking hours for three days, I’m tuned in to Twitch streams from SRK and watching the best fighting game players in the world do things that I’ve only dreamed of.

It’s a fantastic weekend and overall, the streams are well-produced and it’s easy to follow along with the action, get excited, and have a good time. I can’t recommend it enough if you like anything competitive and strongly suggest you watch next year.

While watching, there’s a great group of friends I hang out with in IRC and we discuss the competition and the games being played. Some of us sit at our desks, and some of us sit in living rooms watching the action on a PC display, a tablet or even a phone, or a TV through a device app, like the options available on Xbox 360, PS4, and Xbox One. (Hey, Twitch – how about an Apple TV app?)

I gave no thought to this, but one of that group mentioned that he couldn’t see the players’ names and what sides they were on during the broadcasts from srkevo1. Taking a look, I thought about this and it’s true. On some TVs and using some options on some TVs, the information that was on the screen would not have been visible.

The reason why is what’s called overscan. Let’s take a look at what that means.

Overscan

Traditionally, televisions have had at least some portion of the image outside the bounds of the actual “frame” that was visible. I won’t bore you with a discussion of the history of television, but originally this was because of manufacturing imperfections in CRT (“tube”) displays.

The solution to the manufacturing problem was to put a certain percentage of the display area of the set outside the physical frame of the TV set. This would mean that some of the image would not normally be visible, and a different “slice” of the image wasn’t available to different people.

Today, HDTVs use technologies that measure panels in pixels, so theoretically there should be no overscan. Sets are capable of 1:1 mapping of the pixels of the transmitted image. In practice, this is not how TVs are configured, especially straight out of the box:

@charlesrandall @ryanmarkel It's about at 5 on the overscan chart on my calibration disc. If you can adjust that I haven't found how.

— Matt Keil (@mkeil) July 14, 2014

I have a Sharp Aquos, and out of the box, it does not display 1:1 pixels, though you can change that and have the TV show the exact image. The same for the Sony set I had previously (both LCDs). The DLP set I had before that had a non-adjustable overscan and I would lose something like 7% of the image.

No; I don’t have any idea why HDTVs overscan by default. The only thing I can think of is that it might be some kind of self-perpetuating problem; broadcasters continue to plan for overscan, and so TV manufacturers build it in by design to make consumers think they are seeing “more” of the image. (Try looking at the ESPN Bottom Line on a display with no overscan and you’ll see what I mean. It takes up a whole lot of real estate.)

So tl;dr: on a lot of TVs, the people watching can’t see all of a given 720p or 1080p image. It’s stupid, but that’s the TV industry for you.

The solution for this in the days of CRT televisions—and something that lives on to this day—is a set of recommendations called safe areas.

Playing It Safe

To make sure information shown on a TV can be seen by all people, various broadcasters came up with the idea of safe areas. These are guidelines for the image to be broadcast that try to make sure that what you put on screen can be seen by as many people as possible.

For various TV standards and various broadcasters, these suggestions have been different over time. To help with the visualization, I’m using this blog post from developer Allen Pestaluky, which claims that the Xbox certification team had (has?) definite guidelines for safe areas on the Xbox 360. It’s in turn based on these comments by Shawn Hargreaves in the XBLIG forums:

Native Xbox games have two different safe areas. They are strongly recommended to keep everything within 80%, and strictly required to keep everything within 90%. A single UI pixel outside the 90% region is an instant cert fail. UI outside the 80% region is going to get mentioned in the cert report, and they’ll most likely be asked to fix it, but if a big commercial developer pushes back and decides they don’t want to do that, it’s not a totally rigid requirement.

For indie games, there is no official cert and thus no rigid fail threshold. Our recommendation for indie games is exactly the same as for commercial titles: Microsoft thinks all games should keep all UI within the 80% region, and would love it if every developer would do this.

These comments are pretty old now, but I think the 90%/80% rules are pretty good. And as we’ll see later, they have been followed quite well. You can see what that looks like in this HD frame:

The guides to follow are the insides of each line. To use the traditional terminology, the 90% is action safe and the 80% line is title safe. That means that:

• You should assume that anything outside the 90% line can’t be seen by anyone and should not put anything there at all.
• You should assume that anything outside the 80% line can’t be seen by at least some viewers and you should not put anything you definitely want people to see there.

Now, I’ll assume you are reading this as someone broadcasting to Twitch. This means that you should not put any tickers, donation notifications, counters, or anything you want to make sure people can see outside the 80% guideline.

If you are showing just the game, you do not need to worry about this because the game designers already have. You’ll see what I mean in a bit here as I’m going to show you some examples.

I know this sounds ridiculous. “Why would I need to follow these guides if I am streaming in HD and most people are going to be watching on a computer screen—in a browser?” Look at the proliferation of apps embedded in TVs, installed on our game consoles, or used in set-top-boxes like Apple TVs and Rokus.

And if you are also pushing your broadcasts to YouTube, you need to be thinking about this as well because YouTube already has a much greater foothold at the device level. If you are pushing to YouTube you should be more worried about using safe areas.

If we streamers as an enthusiast community want to see the medium gain more mainstream acceptance, we’ll need to consider a broader set of rules for a broader set of devices.

So let’s see how this works in practice.

SRK versus CapcomFighters: FIGHT

Here’s a capture of the titles being used by SRK in their Twitch broadcasting this weekend, conveniently overlaid with the safe areas mentioned above:

Oof.

You can already see the game UI and how it’s plotted through the Evo titles. UMvC3 pushes display all the way out to the action safe area. (This is probably why the positions of these elements are adjustable in the game’s options.)

But the Evo stream data is way out of bounds. Because they are using the boundaries of the game UI to position their elements, almost everything they are adding to the game image is unsafe. This explains why my friends were unable to see the elements.

Not being able to see who is playing what side sucks and can dramatically change the tone of the experience. Some device viewers might just turn it off because they can’t get the information they want out of the frame.

But oh—what’s this? It’s a frame grab from a match (not from Evo) showing the UI frame CapcomFighters uses for its streams:

You can see the difference immediately. Again, you can see what the game itself does to keep things safe; for SF4, the UI elements that matter are all within title safe! Everything the stream adds that is necessary information is within the 90% boundary. The only elements outside that are the Capcom logo and part of the CPT logo, neither of which are important to someone seeing what’s going on.

Care has been taken here to make sure that everyone will be able to see the status of the match, who is playing, and the score.

CapcomFighters used the same UI bits for their Evo streams. (I like their consistency.) With just a little bit of tweaking, SRK’s streams could do that as well. This isn’t just something that professionals should be paying attention to: if you stream on Twitch or record for YouTube, or do whatever with online video, you should heed these guides and make sure everything you broadcast is at least within the 90% safe guides.

You can download a PNG template for this with transparency here. Add it as an element in your XSplit or OBS scenes as you arrange elements to make sure they fit within the guides. (Just toggle it on and off as you build to make sure.)

You can safely ignore the next section unless you have natural curiosity regarding how games adhere to the guidelines. Go forth and use these guides in your next broadcast!

In-Game Examples

I was curious to see what other fighting games did with this, so here’s a collection of frame grabs I took, with as many direct grabs as possible. You can see how the information is arranged for each game to make sure it doesn’t get crowded out by overscan. UI designers are still dealing with this even in the age of ubiquitous pixel-oriented displays.

BlazBlue

This is one of the lesser safe designs I saw. Everything necessary is within action safe, but some elements that should probably have at least some portion within title safe (like the health bars) don’t.

Injustice

All of the UI is outside of title safe on Injustice, but it’s all action safe. This is the worst one I have found so far.

Killer Instinct

I thought that perhaps being on Xbox One would mean that the UI would be pushed further out, but for KI, all the health information is within title safe. You could theoretically infer the timer information with only the bottom half of the numbers. The meters at the bottom are just on the edge of action safe and it’s possible that some people might not be able to see them by default.

Marvel vs. Capcom 3

I posted this above with the Evo chrome but thought I would put a clean one here just for reasons. I think the health display is pretty clever as the active main is always in title safe and in action safe you are missing only one team member’s health. The super meter is a different story.

Super Street Fighter 2 Turbo HD Remix

I’m including this mostly for fun, but it’s interesting that the health being title safe and the super meters being action safe appears to be somewhat consistent for Capcom. This one’s very conservative.

Virtua Fighter 5

This is pretty safe. Even if you were way out at 80%, you’d still be able to see the health bars somewhat.

Ultra Street Fighter IV

This one’s interesting because there are two separate defaults in the game options. There is one that is the default default, and a setting for “arcade” default. This is the standard default:

Super-safe. Everything necessary is within the title safe area. I really appreciate the design thought that went in to this because it’s literally just the basic information. Any UI that could be trimmed at title safe is.

Here’s the arcade default setting:

This pushes everything out to action safe. I’m assuming this is because arcade operators would have more control over the display panels that are used in the machines and would have to worry about overscan much less than Capcom apparently needs to worry about to keep the game in cert.