Title Safe

Standard

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:

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:

safe-area-overlay-background

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:

srkevo1-safe

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:

capcomfighters-safe

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

blazblue-safe

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

injustice-safe

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

killer-instinct-safe

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

mvc3-safe

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

ssft2hd-safe

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

vf5-safe

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:

ultra-standard-safe

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:

ultra-arcade-safe

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.

 

 

Vacation

Standard

Working at Automattic is pretty much the gig of a lifetime. It’s the future of work: you can build your schedule as needs dictate, you get to work from anywhere, you can take time off as you need to attend to various needs and life events (for instance: I take all family birthdays off and that’s not seen as bad, but a cool thing to do), and you get to work with the greatest people.

And with that schedule freedom, it’s often tempting to not take an extended vacation. The type of self-starter who is attracted to the open work culture we have defined tends to not want to take extended time off. When you can schedule a day here and there to take care of needs, why would you disconnect for a week or two weeks at a time?

(Yes, I know what I am about to say is the way I see things and not everyone works this way.)

Taking extended time away from the day-to-day is important.

For the last few weeks, I’ve been feeling ragged, distracted, almost out-of-it on some days. I wrangled a week where I had multiple projects converge on the same moment in time, and that week I worked several late nights and through meals during the day. I did this voluntarily—if anything, I always want to be dedicated to making sure the things I start are finished and are done right.

I even took a three-day weekend after doing this to give myself room to breathe, but in the end I had exhausted my body and mind and those things needed some extended time to think about other things and have other priorities.

I’m so fortunate to work at a company that gives me more freedom than I’ve ever had working anywhere else. The amount of time that I get to invest in being a husband and father as well as an Automattician is much greater than it would be just about anywhere else.

But for the next two weeks, I get to just be that husband. I get to focus on being Dad.1 It’s refreshing and clears the mind so it can come back and attend to the daily routine with a renewed focus and energy, which is good for everyone.

I have plans: we’re going to drive around St. Louis a lot and work on our family project of seeing all of the Cakeway to the West locations. Two of my children are finalists in a LEGO competition that is being held by the Botanical Garden. I’m taking care of things here for a few days so Amanda can go to an educational conference she wants to attend. I’m going to sit around and watch as much of Evo as I can with my kids and feel really bad about my Street Fighter IV skills for a weekend.

Last night, I started off my yearly fundraising for Extra Life with a 12-hour game marathon (that ended up being just 9 hours) that raised the first $30 for the year. I went to bed tired and exhausted, and slept in a bit longer than I would have normally.

I opened my eyes this morning to see my two-year-old daughter’s face about two inches from mine as she was climbing onto my bed. She exclaimed, “Hi, Daddy!” and then proceeded to make herself comfortable and give me hugs. She doesn’t know I’m taking two weeks off to spend more time with her.

But it was the kickoff to two weeks of recharge, and what a way to start.

No matter where you work, take the time to take time. Spend time with your family. Spend time with some books or some movies. Go somewhere you haven’t; do something you’ve never done. Grab your pack and hike into the woods or the mountains for a few days to commune with nature. Take a week or more and just spend that time being the you that you are when you aren’t working.

You’ll come back better for having done it. :)


  1. Obligatory mention that I work somewhere I feel perfectly safe leaving for two weeks; I know my teammates will take care of things and I’ll have plenty to do when I get back. 

Markel Retro Week: Why You Should Wire Your House

Standard

In my previous post today, I talked about how I’d seen some network performance issues with my wireless connections. I wanted to bring that up in more detail and show the problems I’ve had with my home networking.

In the end, if you like playing games online or do anything similarly latency-dependent, you should have anything you play on connected with wires as far as I’m concerned. Let’s take a look.

Topography

I have three basic connection nodes in my home:

  1. a wired network that is comprised of a wired router, an 8-port switch in one room, and a four-port switch in another
  2. an Asus RT-AC66U wireless router that has been placed in access point mode (and was the prime suspect in my internet woes)
  3. an older Netgear (I don’t remember the model number and I’m lazy) that has been placed in what they call access point mode, which doesn’t really resemble how an access point works (not important why)

The “Dark Knight”

The Asus router is the “Dark Knight” of internet fame. I’ve been largely happy with it since I bought it, but in recent days, I’ve seen some bad performance out of it in some applications. I tried to wire as much as I could through it and only use wireless if I had to.

The router supports 802.11ac, and so does one of my laptops. The throughput on it is amazing; I can get my full internet connection speed through wifi on it, which is about 105 mbps. BUT:

Shepard:~ ryanmarkel$ ping -c 100 google.com
PING google.com (74.125.224.164): 56 data bytes
[…]
--- google.com ping statistics ---
100 packets transmitted, 100 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 67.185/86.720/407.895/45.314 ms

Whoa, what? That’s a pretty big range there, and the standard deviation for the connection is nuts. That’s from about five feet away from the router in its new location on the main floor of my house.

I wondered if it was just the transport, so I tried a different 5 GHz connection.

The Old Standby

Here’s a result from the Netgear dual-band router I have in WAP mode in the other room (still on the main floor) of my house. This is from across the house itself, almost all the way on the diagonal:

--- google.com ping statistics ---
100 packets transmitted, 100 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 66.758/80.619/398.580/46.795 ms

It’s almost as bad. And that’s on the connection type most of my devices are using: 802.11n at 5 GHz.

Apparently, You Can Stop the Signal

At this point, I’m pretty sure it’s an interference problem. I’m seeing it on two different bits of hardware, using two different protocols. And using an old wireless bridge I have upstairs, this is what I see for the neigborhood when I run a check for networks:

Screen Shot 2014-07-02 at 1.06.51 AM

On the main floor of the house, or checking with one of my laptops, it’s even worse. I can find something like two dozen access points if I try. Looks like some people on U-Verse have newer 2-Wire gateways than others, and Charter has people on 802.11n gateways, which isn’t a bad thing, but wireless access points are everywhere now.

And I’m in a pretty medium-density subdivision. I have no idea what it must be like in an urban area.

At least I’m not seeing packet loss. But I know I can do one better.

When in Doubt, Run Copper

From the same laptop that served up the first score, and using the same 802.11ac router, I ran a connection test using the Apple USB gigabit ethernet adapter. Look what we have here:

--- google.com ping statistics ---
100 packets transmitted, 100 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 66.435/68.782/75.167/1.719 ms

Low, consistent, stable. That standard deviation is more along the lines of what I would want if I were doing anything latency-dependent.

I’m happy that my decision to wire the house ended up being the smart choice. I’m going to mess with wireless channels and other things to try and get some better performance out of this, but with a wired connection, I get the best of everything:

  • stable latency
  • faster device-to-device file transfers
  • fewer problems due to wireless ubiquity

As mentioned above, if you plan on playing games on the internet, try as best you can to have a wired connection for doing so. I have a feeling you’ll be much happier with the results.

And if you have any ideas or suggestions for what I could do to increase wireless performance, by all means, leave me a comment or a pingback. (And you can find the raw ping data I got for the tests listed above in this gist.)

Markel Retro Week: Wired Gateway

Standard

It feels a bit like I’ve stepped back in time this week as I have some new home/office stuff coming in that in some ways is a bit of a throwback.

Yesterday was part one, when I installed a wired gateway for my home internet connection.

That’s right; the hardware that connects my home to the internet and does all the router-y things for all the devices I have doesn’t have wireless antennae anymore. It’s wired-only. I got tired of wondering if the “outages” I was experiencing were my wireless connection, the router itself, or the internet connection, so I decided to uncouple some of the factors involved there.

The model router I picked up is the TP-Link TL-R600VPN. It’s a super-simple piece of hardware and so far I’m pretty happy with it. Pretty basic controls, no-nonsense setup, and no limits on reserved DHCP addresses – which is pretty good, because right now that list looks like this and I’ve only set up half the devices in the house:

Screen Shot 2014-07-02 at 12.51.46 AM

It’s only been about a half-day, but already I feel like things are more stable and performance seems better. I ran some numbers on the internet connection that lead me to believe that my router is at fault, and if that’s the case, then I’m kind of disappointed. I’ll talk more about those numbers later today – and tell you why you should do what you can to make sure your home is wired for ethernet.

Android TV: Controller in the Box?

Link

Polygon:

Android TV, Google’s platform designed to deliver entertainment and games on televisions, may ship with an Xbox One-like controller, according to a photo of the alleged peripheral taken by Google I/O 2014 attendee Artem Russakovskii.

According to Russakovskii, the Android TV box will ship with the controller, which sports two thumbsticks, four face buttons, D-pad, home button, two navigation buttons, a line of four LEDs and shoulder buttons.

Android TV (and Razer’s new thing as well) now have the best chances to threaten the traditional console living room space, because the controller is in the box. (Though that hasn’t really helped the Ouya, for whatever reason.)

The Fire TV and Apple TV are never going to challenge the game space because Amazon hasn’t and I believe Apple won’t put a controller in the box with the unit. Ask anyone who has been around the console block for a while: if it’s not in the box, people don’t buy it and they don’t use it.

(Kinect is dead, by the way.)

“A SWAT team blew a hole in my 2-year-old son”

Link

No, not mine. Don’t worry.

Salon:

After our house burned down in Wisconsin a few months ago, my husband and I packed our four young kids and all our belongings into a gold minivan and drove to my sister-in-law’s place, just outside of Atlanta. On the back windshield, we pasted six stick figures: a dad, a mom, three young girls, and one baby boy.

That minivan was sitting in the front driveway of my sister-in-law’s place the night a SWAT team broke in, looking for a small amount of drugs they thought my husband’s nephew had. Some of my kids’ toys were in the front yard, but the officers claimed they had no way of knowing children might be present. Our whole family was sleeping in the same room, one bed for us, one for the girls, and a crib.

After the SWAT team broke down the door, they threw a flashbang grenade inside. It landed in my son’s crib.

Legalize and regulate all the drugs. All of them. The alternative we are doing in this country now is just not worth it. And it’s not right.

Police don’t need flashbang grenades and assault rifles.

r99413

Standard

I won’t lie; this is a proud day for me.

Screen Shot 2014-06-18 at 9.35.06 AM

My first commit to WordPress.com. Hopefully the first of many.

And then the next step is to have my first accepted patch for WordPress itself.