Style guides for NES graphics

Are there any style guides that describe what you have to pay attention to when you create graphics for the NES?

Of course, I'm not talking about the technical limitations like the limited palettes and the fact that each 16x16 background section has to share the same palette etc. That one is easy since it's objective facts.

I'm talking about stuff that tells you what you have to do when you want the image to look good on a TV.

The background graphics for my game look good in an emulator. But certain details look strange on a real TV or with the NTSC filter in Nestopia and we will have to tweak some stuff. Sometimes it only looks strange with certain color combinations. For example a cyan object on a red background.

So, is there a general list of good practice tips that help me with graphics design for a console game that is supposed to run on a CRT TV?

A few notes about how it will look on an NTSC TV:

1. Aspect ratio has nonsquare pixels. Expect it to be a little wider looking.

2. Horizontal detail gets blurred slightly, and colours bleed over each other. It helps to make text or other important visual details at least 2 pixels wide.

3. Scanlines have underlying patterns that produce colours unevenly across the screen, which means that things like 50% dither ("checkerboard" arrangement of pixels) will take on ripple artifacts (example). This also causes detailed background to "shimmer" under smooth scrolling conditions (discussion).

The pixel aspect ratio of the 2C02 PPU or any other TMS9918-rate NTSC picture generator is 8:7 (about 1:143.1). This means that a rectangle with the same width and height in pixels will look 14% wider than it is tall. The pixels are far wider than the pixels of a Commodore 64 in hi-res mode or Apple IIGS in super hi-res mode (both 3:4 or 0.750:1) but narrower than C64 multicolor pixels (3:2 or 1.500:1). (See calculations at Overscan and Dot clock rates.)

A 1-pixel-wide black vertical line on white will be blurred less than a 1-pixel white vertical line on black for various reasons including NMOS.[1] Dark strokes appear thicker by a fraction of a pixel, and white strokes appear thinner. As far as I can tell, this is why the 1-pixel-wide black text on a light background in most of RHDE: Furniture Fight, the Action 53 menu, and my port of the 240p test suite looks better than the 1-pixel-wide light text on a black background in the title screens of RHDE and Action 53 and throughout my port of robotfindskitten.

There are six usable brightness levels on the NES PPU:

• Black (0%): $0F or $1D
• Dark (20%): $01-$0C
• Medium (40%): $11-$1C and $00
• Light (70%): $21-$2C and $10
• Pale (85%): $31-$3C
• White (100%): $20

Different colors of the same brightness will bleed into each other and cause artifacts, as well as being almost impossible to distinguish on black-and-white TVs, many of which were still around in the era you target (1986). And especially don't try using opposite hues (such as 16 with 1C) or nearly opposite hues (such as 16 with 1B or 11) adjacent to one another. The demo shipping with blargg's snes_ntsc library can be used to check a sample screenshot before you put it in a ROM and run it in Nestopia. It comes as source code; if you want a Windows binary, rainwarrior has compiled one.

Later NES artists developed the technique of outlining to separate different colors with black or a dark color. Later Super Mario Bros. games on the NES, for example, outline Mario's face, hat, and arms with dark blue or black. This takes advantage of the fact that black is wider and keeps similarly bright colors from bleeding into each other, especially sky blue with Caucasian and Asian skin colors.

In another post, you said you want to eventually port your game to an arcade machine. The Nintendo Vs. System is based on the NES architecture and will have far less color artifacting, though it has the same pixel aspect ratio and black-widening characteristics as the NES.


[1] Black widening is the combination of several factors. The NES chipset is made with NMOS logic, which has an easier time pulling signals down to a low voltage than letting them float back up to a high voltage. This means alternating black and white pixels will have the left side of the white parts blurred. In addition, various elements in the video signal chain act as a low-pass filter, which adds a small amount of gray to any signal level transition. And the gamma characteristic of analog video is nonlinear, meaning 50 percent gray will produce less light than half black and half white. Light power is roughly proportional to the signal value squared, which mirrors the electrical formula (P = V²/R).

Thanks for the guidelines so far. I'll check the colors of my game against your suggestions.


That was just a joke based on the idea that I pretend that it's 1986 and I believe that the home console market won't have a longer future. I'm not actually planning to port the game to an arcade machine. There will be only one version of this game. (I even included dynamic NTSC/PAL detection, so that I don't have two ROM versions flying around. The sound will be the only thing that's adjusted to PAL, though.)

I didn't know about black pixels comming out wider than white pixels. Do other systems have that "helpful glitch."

I didn't know that about white pixels vs black pixels either, but it makes sense when you think about it.

Curiously opposing this is the "CRT bloom" effect on some TVs, where the picture increases in size when the overall content is brighter. That one isn't about individual pixels, though, kind of a whole-screen effect.

That was always weird, you'd think that if the gun's voltage was too high, the horizontal motion of the gun would slow, making the picture shrink there.

Seems more like electrons pushing against each other?

Much of this "blooming" is cheap monitors with cheap power supplies. High beam power means less power to accelerate the electrons. This gives the sweep coils more time to act on the beam, and the beam is pulled farther to the side. The effect is not as pronounced in grille CRTs (e.g. Trinitron) as it is in shadow mask CRTs because they don't need quite as much beam power to illuminate the phosphors. Really bad power supplies will go out of regulation so quickly that horizontal strips of white will bend anything vertical next to them.