On my twitter page (follow me if you haven’t yet!) I’ve been creating a few very quick tutorials to help people understand what NES graphics mean. I see a lot of people doing pixel art and just calling it “8-bit” or “NES style”, but a lot of the time it misses the target by a fair margin. Hopefully these will help clarify why. You can click on any image to see the original tweet.

Tutorial 1: Background palette

Tutorial 2: Background tiles

Tiles are a big reason why NES games are what they are. If you don’t think with tiles, chances are you won’t get the right feel. Use a tile based pixel editor like NAW, yy-chr, NEXXT or PyxelEdit.

Tutorial 3: Attributes

So the screen is 256×240 and is made of tiles, and there are four sub palettes of 3 colors each, +1 background color. And this is how all of it comes together. I used black for the bg here.

Tutorial 4: Animated tiles!

The NES has no problem changing the entire tiles table every frame. There’s technically no limit to this other than cost of hardware memory inside the cartridge. Go wild.

Tutorial 5: Parallax

This one is all about that sweet parallax effect. If you want the true NES feel this is important! There are techniques to fake bg layering, but they are very technical and limited. This is the real deal.

Tutorial 6: Introduction to sprites

Sprites are a very extensive topic. There are 8×8 and 8×16 modes, flickering, flipping, clipping… Phew! Keep in mind that ALL sprites in the screen will have to use one of the 4 subpals you choose!

Tutorial 7: Sprite manipulation

Sprites have the advantage of not being aligned to a grid like the background tiles, so you can position them at any coordinate on the screen. But they have a few extra features!

Tutorial 8: Scanline limit

Let’s get technical. The NES can display up to 64 sprites on the screen, but only 8 can appear on each scanline! Some games will change sprite priority every frame so more can be seen, resulting in sprite flickering.

Bonus: I’ve made a simple NES flicker / sprite limit test rom. Useful to demonstrate the sprite limit and how sprite flickering can be programmed to mitigate the issues it brings. Notice how without flickering programmed in, one character is completely invisible unless you jump. And the other two seem to hide behind the sky when approaching the ground. Press select to toggle flickering. Gif captured in 50 fps. 

• Download NES Flicker test ROM
• Download NES Flicker tester Ca65 project files

Tutorial 9: 8×16 Sprite Mode

There isn’t a “best” sprite mode, but I feel like 8×16 is often overlooked. Here you can see one of the biggest reasons to use it. The 8 sprites/scanline limit has been respected in this example.
Same as a with the 8×8 sprite, a whole 8×16 sprite can have only 1 subpal. Also, since the sprite is twice as tall in this mode there will be a higher tendency for scanline sprite limit to occur. So either embrace flickering or design the game very well so it doesn’t happen often!

Tutorial 10: Palette rundown

Putting together the transparency (background color), the nametable subpalettes (4 sets of 3 colors) and the sprite subpalettes (4 sets of 3 colors) we can draw our screen! Think in layers as shown in tutorial #7: first comes the transparency color, then the back sprites, then the nametable and finally the front sprites. All subpalette colors can easily be changed every frame for the famous palette cycle effect!