An Important Lesson in HUD Design - CRT cutoff

DraculaTreeForest

New member
1736950054828.png

Pictured above are four screenshots: two from a game I'm working on (Swampmaster), and two from NES classics Zelda 1 and 2.

I started doing more extensive design to my HUD elements this week, and it occurred to me that despite knowing that part of the HUD gets cut off on CRT screens, which Joe mentions in development videos, I'd never tested the game on a CRT or looked any further into how much actually gets cut off. I was surprised to find out that substantially more of the top of the screen gets cut off than I expected.

I took screenshots from classic NES games and lined them up with shots of my own game, then drew a yellow line where the HUD gets cut off. As you can see, it goes straight through the HUD elements on version 1 of my game on the far left, and even after lowering the HUD it slightly in the 3rd image, it still cuts through some. While you'd be able to see everything on an emulator, CRT players would miss out on seeing this critical HUD info. Anything above the yellow line would likely be cut, depending on their exact model of TV.

Lesson learned. Now I need to go back and chop all my screens down by one block, which will be a necessitate a moderate structural redesign for every screen. Passing this along so that others can get this set correctly up-front and not have to go back to fix things later!
 
Last edited:

Zikifer

New member
This surprised me as well. When playing on actual NES hardware with a modern TV I lost the top 8 pixels and the bottom 8 pixels. The bottom 8 is fine but the top 8 is the top row of the HUD. But a CRT TV can cut off the top 16 pixels, which is like half the HUD (by default). I definitely had to redesign things to work around this.

Oh, some emulators can emulate this loss of pixels, if you want to see how your HUD looks without flashing to cart and running on the NES.
 

DraculaTreeForest

New member
Oh damn, yeah it's even worse if you consider 16 pixels being cut on the bottom, left and right sides. That's an entire NES maker grid block.

MESEN has the option to do overscan emulation if you go to Options > Video > Overscan, then you can set the number of overscan pixels:

1736958241877.png
 
Last edited:

TheRetroBro

Active member
yeah its pretty substantial in fact that reminds me i need to move my hud down slightly. it also depends on the crt. a good rule of thumb i use is first top and bottom tiles are dead zones for this exact reason.
 
Top Bottom