A simple way to scale pixel art games
November 27th, 2024
A little horizontal blur doesn’t hurt.
Previously in How to present MS-DOS screenshots, I encouraged readers to take the original pixel aspect ratio into account when showing pictures of old games. There’s also a subtler issue to consider: the blur analog display systems had.
In the context of modern pixel art games, video game historian and preservationist Frank Cifaldi proposes in a 2023 tweet (screenshot) that one should do vertical and horizontal scaling separately and differently:
Whole integer nearest neighbor scaling on the vertical axis, bilinear scaling on horizontal. The slight blur is consistent with what a CRT does and is not perceptible unless you glue your face to the screen.
In other words,
- first, vertical nearest neighbor integer scaling, followed by
- horizontal linear scaling.
So effectively this is the same as a nearest neighbor upscale followed by a small horizontal blur. See the center pane below.
It’s a subtle difference. In the horizontally blurred case (center), the dithering on the rocks is less pronounced and Jazz’s facial expression is now easier to read. The pixel art crispiness is still there, unlike in the blurry bilinear case.
See how the face reads differently when you’ve got some blur:
Seems like it works!
Who blurred it and why?
In the original tweet, Cifaldi’s reasoning was that the slight blur is “consistent with what a CRT does.” My understanding is that this is definitely true for most TVs, especially when connected to game consoles via composite video. So if you want your game to look like a 90’s console game, his advice seems solid. Source is this excellent 2023 blog post.
To give you an idea what composite video can look like at its worst, here’s the same screenshot as above:
Some people go as far as emulating this look with shaders!
For PC monitors the situation is not as clear since they were of higher quality and connected with VGA cables. VGA doesn’t exhibit composite-like color smearing, because the colors don’t need to be separated from the black & white signal with filters. Each of the RGB components has its own wire.
The Jazz Jackrabbit 2 screenshot I used earlier is from a 1998 PC game, so it was experienced on a computer monitor not on a TV. Is the slight horizontal blur still “period correct”? Assuming the CRT was very high quality, blurring still can come from the graphics card or a cheap VGA cable. Luckily this is something we can test!
VGA experiment
Let’s do an experiment to make the VGA signal horizontal blur visible. I plugged my laptop to an LCD monitor with both HDMI and VGA cables and compared the results. This basically simulates a high quality CRT display and low quality VGA cable. I don’t expect the VGA output of my old ThinkPad X240 to be exceptionally good either.
This is what I got.
I apologize for the exposure differences between photos. Still it should be clear that the VGA image in the center is blurrier than the digital HDMI image, but only horizontally.
Before taking the photos I configured the monitor for a pixel-perfect image. I also set the “sharpness” value of the display settings so that the picture was stable in a one-pixel-thin test pattern. The result on the right shows what low “sharpness” looks like.
And here’s the same with more detail:
As a conclusion, I’d say the small horizontal blurring created by a linear filter when scaling from 640x480 to 1280x960 is consistent with the look of a mediocre VGA signal. In this case, the blur caused by VGA was perhaps even slightly larger.
If you’re making your own pixel art game and showing it at 2x magnification, the approach recommended in the tweet appears to be a simple and effective choice. Assuming you want it to look retro, of course :)
Larger magnification
Many MS-DOS games ran at a 320x200 resolution. This is an interesting case because it’s “line doubled” to 320x400 by the graphics card. The picture is effectively nearest neighbor scaled vertically in hardware already, so the proposed method seems like a good fit.
Let’s try scaling up a screenshot of Cold Dreams, a shareware game from 1995:
The results seem OK here as well. The value gradients on the character are smoother, which perhaps makes it easier to see the silhouette. The blur is probably larger than what a VGA cable alone would cause, but it does look pretty nice!
More readings
- Exploring the appearance of CRT televisions and monitors. The excellent blog post by nyanpasu64 mentioned earlier.
The Jazz Jackrabbit 2 screenshot I took from the Italian Wikipedia. The Cold Dreams image is from MobyGames. Thanks to the Bluesky user Sonneveld for letting me know about this technique. Thanks to everyone who participated in discussion after I presented earlier results on Nov 23.
