Categories
Games

Looking Good.

Just getting things ready for Saturday. Decided my old streaming scene was a bit boring, so I tried upping my game. So far I like what I’m seeing and probably won’t change it too much.

Screenshot 2014-10-24 01.30.39

There’s a bunch more color and visual interest. Before, I was using a super-sparse background and I thought it best to change it to something that was busier, but dropped the opacity so it wouldn’t dominate.

I kind of dig adding the silhouette of the St. Louis skyline there. I’m raising money specifically for children’s hospitals in the St. Louis metro area, so it feels fitting and gives it some additional personality.

This kept me up way too late but I love giving just a touch more effort to the look of the stream. Hopefully this will catch some eyes in the main Extra Life directory.

I hope you’ll join me on Saturday.

Categories
Games Markel!

Extra Life 2014 – Coming Soon

Last year, I participated in the Extra Life fundraising campaign, and raised over $700 for St. Louis Children’s and Cardinal Glennon Children’s hospitals. (The campaign benefits Children’s Miracle Network hospitals in a given local area.)

This year, I’ve set what I think is a somewhat audacious goal of $2,000 as my marathon stream goal.

I’ll be streaming from 8 a.m. on Saturday the 25th of October until 8 a.m. the next morning, taking only occasional breaks. I’ll be involving my family and hopefully some of my friends in the marathon. (If you want to help, please let me know if you are available and what you want to play.)

Please consider watching! I’ll post more details soon. And if you would be so kind, please consider donating and spreading the word regarding this marathon! I hope you’ll help me provide donations directly to hospitals for children who need medical care. :)

Categories
Games

Title Safe

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.

 

 

Categories
Markel!

PS4 Is Getting Improved Streaming

Speaking of streaming, from a post on the PlayStation Blog:

In addition, this update will add an HDCP off option for capturing gameplay via HDMI, a feature we’ve previously said would come after launch. We recognize that some gamers want to record and share longer clips of their gameplay sessions, and we’re excited to deliver this option with PS4.

HDCP-protected game content was something they never “fixed” with the PS3, though I would like to see them handle that with an update at some point there as well. It makes it quite a bit harder for people to stream games from PlayStation platforms.

When they announced that this was going to happen in a “future update,” I assumed this would be vapor, so I’m happy they are actually going to ship it. But why will it apparently default to on? Having HDCP on for game output has never made any sense.

As part of a separate system software update in the future, we have been working with our partners at Twitch and Ustream, and will also be adding the ability for Twitch broadcasts to be archived – another highly requested feature among PS4 fans who are taking advantage of the SHARE button features. These broadcasts will be also provided with a higher resolution of 720p, so PS4 fans can enjoy live broadcasts with clearer images.

This fixes the other big thing that annoys about the PS4 streaming: the inability to archive the broadcasts on Twitch. And to be honest, I didn’t even know the streams weren’t 720p, I just knew that the Xbox One streaming looked a lot better (which it does).

Either way this shakes out, this is good proof that the console situation this time around is much more competitive. I love seeing these two companies trying to outdo each other with updates and content.

Categories
Games

Polygon: “When Watching Beats Playing”

If you haven’t read this piece on Polygon on the origins and rise of the Twitch streaming service, you owe it to yourself to give it a spin.

Developers are now using Twitch to show their games to the public before they’re completed. Publishers are using Twitch as a marketing tool to speak directly to consumers, and users are creating their own form of entertainment and breathing new life into games that launched years ago.

Twitch is a certified phenomenon, and it’s doing a great job making inroads into allowing just about anyone to broadcast their gameplay. I stream on Twitch sometimes, and you can find my channel here.

It was a great service before, and that’s only being augmented by recent increases in its accessibility.