I’m Santiago Zapata, better known online as slashie, a Software Engineer and Independent Game Developer and from Medellín, Colombia.

You are in the devlog, a chronological collection of updates on my projects, alongside articles about software and game development. Subscribe to get these directly into your inbox.

nesifier – convert images to NES visuals

Published by

on

Just for fun, I created a small node.js cli tool to convert any image into strict NES visual constraints (more specifically, a NES background that could actually be displayed on a console). It’s on npm now.

Some Recipes

If you want to try it out, this is all you need to do!

# Make a ROM you can open in an emulator or put on a flash cart
npx nesifier photo.jpg -r photo.nes
# Preview it the way a CRT TV showed it
npx nesifier photo.jpg -s 3 --aspect 4:3 --scanlines
# Keep proportions right on a TV (the NES stretches pixels horizontally)
npx nesifier photo.jpg --warp 4:3 --aspect 4:3 -s 3
# Dither for smoother gradients
npx nesifier photo.jpg -d fs
# Punch up a soft photo before converting
npx nesifier photo.jpg --saturation 1.5
# Pixel art: keep hard edges and show the whole image
npx nesifier sprite-sheet.png --resample nearest --fit contain
# Export graphics data for your own NES project
npx nesifier photo.jpg -e out/title # out/title.chr .nam .pal .json
# Leave 32 tiles free for a font or HUD
npx nesifier photo.jpg --max-tiles 224 -e out/title
# Check whether an image already follows the NES rules
npx nesifier check image.png

The rules

256×240 pixels in 8×8 tiles (a 32×30 map), at most 256 unique tile patterns with no flipping, and 4 palettes of 4 colors sharing one background color (13 colors max). Each 16×16 area picks one palette, and every color comes from a 52-color NTSC approximation of the NES palette.

How a conversion works

  1. Fit the image to 256×240 (cover, contain or stretch).
  2. Pick palettes. For each candidate background color, group the 240 areas into 4 palettes, and find each palette’s 3 other colors by trying all 20,825 combinations. The background color with the smallest error wins.
  3. Map each pixel to its area’s 4 colors, with optional ordered or Floyd–Steinberg dithering that stays inside the palette.
  4. Reduce tiles. Photos usually start with 550–710 unique tiles, so similar tiles are merged down to 256. Error is judged through each tile’s own palette, so one pattern can serve areas with different colors.
  5. Rebuild the preview from tile map → patterns → palettes, the way the console does, and run a separate checker over the result.

As an output, it creates a PNG preview, a .NES ROM file, as well as intermediate files representing the NES graphics (a pattern table, and a tile map)

Making it look right on a TV

As mention above, one thing I added was aspect ratio warping and stretching, so that the images wouldn’t look distorted on a real (or emulated) TV; I also added some simple scanlines just for fun.

Then I made the real right step which was outputting to a NES .rom, hence being able to load into any emulator and use the already broad selection of CRT shaders and emulators.

I’m planning to use this in the upcoming NES faux-port of Monte del Diablo.

Leave a Reply

Discover more from Slashie's Gamedev Adventures

Subscribe now to keep reading and get access to the full archive.

Continue reading