Broadcast Graphics Example: The ESPN BottomLine

Since I have been thinking a bunch recently about broadcast graphics and best practices, I decided that it might be a good idea to take a look at some examples of television broadcasts and what they have established.

I’d written about this before, but it’s often the case that Twitch broadcasts don’t pay much attention to “broadcast safe” areas even though it’s true that many people now watch Twitch streams on televisions. TVs have to deal with the rather annoying but real matter of overscan. (I may write more about this later.)

Something specific that I use on my stream and I’d love to see more of on event streams—specifically fighting game tournament streams—is a ticker across the bottom of the screen. (I’m actively researching and hoping to build one.) ESPN has been using one for a long time. Here’s what I found when I took a look at it:

Screen Shot 2016-12-26 at 8.19.21 PM

I had to match them up by eye, and the screen capture isn’t an exact science, but I’m pretty sure they reserve the bottom 100 pixels of a 1080p signal for the ticker. The bottom 50 pixels receives absolutely no information; it’s just a grey stripe. This is “blank” because many televisions will not display this information at all due to overscan. The ticker information is placed within the next 50 pixels, and there’s even a bit more margin before the text baseline.

You can also see that there is a bounding line to the left, where they do not place any text information. That line is 84 pixels from the left of the frame.

It’s clear that if you want a fighting game to be broadcast safe, you will have to adjust at least the UI elements of the scene, if not the output of the console itself. As I mentioned in a tweet recently:

(There is even more information available in that thread talking about this, including the fact that Mortal Kombat’s meters are pushed way to the edge of the frame.)

As was pointed out to me on Twitter by @logichole, who has had some pretty great back-and-forths with me on this subject:

Is this something streamers should concern themselves with? Do we care if our broadcasts are being shown on televisions with overscan? Toss me a tweet reply or write up a post and let me know what you think.

 

How to Replace a Balltop

A super-quick, cheap, and easy-to-install method for adding some personalization to your fightstick is to replace the stock balltop with a different one, maybe of a different color or from a different manufacturer.

Parts Used in This How To

For this how to, we’re using a MadCatz TE2, which comes with a Sanwa JLF-TP-8YT lever as a stock part. Those levers come with an LB-35 balltop.

  • Sanwa LB-35 Balltop (35mm, yellow)
  • Seimitsu LB-39 Balltop (35mm, blue)

Any 35mm balltop will work when following this tutorial. This includes stock balltops from Sanwa and Seimitsu, as well as the stock balltop on the Hori Hayabusa lever, and many custom balltop replacements. (The vast majority of balltops you can buy are 35mm.)

Tools Used in This How To

  • Flathead screwdriver (the tool included with the TE2 counts)

How To Replace the Balltop

OK, first, open up your stick or otherwise get it to the point where you can get at the underside of the mounting panel. On the TE2, use the catch button at the front of the stick and swing the panel up.

IMG_0952

Turn the stick so you can access either side of the mounting panel at the same time.

With one hand (I’m left-handed), grab the balltop that’s currently installed.

IMG_0954

With your other hand, take the flathead screwdriver and insert it into the screwhead on the bottom side of the joystick lever. Hold the screwdriver head there so you can apply torque to the joystic shaft without it rotating entirely. (If you want to see what that looks like, just rotate the balltop without having the screwdriver in place.)

IMG_0955

Using one hand on the balltop and the other hand on the screwdriver handle, rotate the two so the balltop starts separating from the shaft. After a few rotations, it should look like this:

IMG_0956

Once you have removed the balltop, set it aside. To stop it from rolling around on your work surface, set it down with the screw mount flat on the surface.

Grab the new balltop you want to install, and reverse the process you used to remove the previous one. With one hand on the balltop and the other on the screwdriver handle, rotate the two so the new balltop tightens on the lever.

IMG_0959

Slowly but firmly continue to screw the balltop onto the mount until you feel resistance. Give it one last gentle tighten and you’re done. Remove the screwdriver from the bottom of the lever assembly and check to make sure the new balltop is flush with either the shaft itself or the shaft cover if your stick has one.

IMG_0960

You’re done! Close the stick up and give it a test. It should freely rotate in your hand without coming away from the shaft.

Reference Images for FGC Broadcast Graphics

I was messing around with doing some (very early) work with NodeCG tonight.

(It’s not going well so far, but that’s because I’m generally clueless.)

While doing this, I considered the idea of fighting game overlays that could be used with a “toggle” for whatever game is being played (or even key off an external API like Challonge). I then realized that it is really useful to have static reference images for various games to make sure you are not putting overlay images in bad places.

This has a lot of utility even for setting up OBS or Xsplit, because you can add the image as a background and then maneuver your layout stuff as you need to make sure you are not obscuring any screen items, especially meters.

I’ll put this behind a more link just so casual visitors to my site don’t get hit with OMG WALL OF IMAGES. If there is a game that is not represented here that you would like to see, or I have made a mistake, please drop me a note and let me know which one. I’ll see if I have it and can whip up some images for you.

All HUD elements are in default locations.

Click on any image to view as full-size.

You can also download a ZIP archive of all current screens. If you stream large events with regularity, please contact me and I can give you access to a Dropbox share of these images. If you want to know when I update the screens, you should follow me on Twitter.

Use the images to do cool things with your streams. :) If you find them helpful or useful, please consider dropping me a tip or just following my Twitch channel where I play games poorly.

Continue reading

Extra Life 2016: Another Good Year

This year’s Extra Life marathon was another great time. I spent some time playing games with my kids, had a great co-op session with my best friend, and generally enjoyed the 25 hours of video games (with some breaks!) while fundraising for St. Louis-area children’s hospitals.

To date, you have helped me raise just over $700 for this cause.

For that, I thank you all. Your support every year when I do this crazy thing means a ton to me and it’s good to know you are interested in helping with this cause.

And know that it’s not too late! You can still donate to this year’s campaign by going to this page and giving what you are able or moved to do:

http://www.extra-life.org/index.cfm?fuseaction=donordrive.participant&participantID=196644

I fell short of my goal, but that’s OK. It’s the effort and your assistance that counts. :)

I’ll be working on some additional stream stuff and a different kind of donation goal starting later this month. I’ll be posting about that soon. :)

Stranded at O’Hare: The Liveblog

Welp.

I arrived at Chicago O’Hare airport this morning as my layover only to find that my flight home to St. Louis was cancelled. So instead, I’ll be sitting here trying to fly standby on every flight for the rest of the day. (The first guaranteed seat I have isn’t until tomorrow morning.)

So let’s test Liveblog!

Want to ask me a question about basically whatever? WordPress? WordPress imports? Life? Work? Fighting games? Other games? Send me a tweet or a comment on my Facebook post and I’ll try to answer your question here.

Otherwise, you get whatever I want to talk about. Good luck.

WordCamp US Presentation: Code Review

Howdy! I just finished giving this presentation at WordCamp US 2016 about code review: about why and how you should do code review on your projects.

The Presentation

Here’s a SlideShare embed of the presentation deck:

And you can download the source Keynote presentation file here.

References

I referenced a bunch of things in my talk and mentioned that you could find those sources in this post, so here’s the list in the order you’ll run across it in the presentation:

Have any questions?

If you have any questions, comments, corrections, or whatever, please contact me. I’ll be happy to hear from you.