{ datagubbe }

datagubbe.se » the effect of crts on pixel art

The Effect of CRTs on Pixel Art

On Cathode Ray Tubes, nostalgia and anachronisms.

Summer 2024

(Pro tip: All images below are clickable.)

There's a recurring argument made about how modern pixel art often doesn't look right. For example, TikTok user "mylifeisanrpg" has made a popular video in which he explains how pixel artists used to work with the innate physical properties of Cathode Ray Tubes (CRTs). In short, he describes how the fuzziness of a CRT smoothed out the rough edges of low resolution pixels and made things look much less blocky than if viewed on a modern flatscreen display.

This is correct. I also agree that modern, blocky pixel art often is a kind of misdirected, anachronistic nostalgia. However, there's a lot more going on with both pixel art and old gaming hardware than mere CRT fuzziness.

In the above screenshots from mylifeisanrpg's video, we can see an illustration of the "raw" visual data of a Nintendo sprite (to the left) and a rendition of the same image on a CRT screen. I don't know if the CRT version is taken from an actual CRT, but I doubt it - I actually think it looks too fuzzy. I may be wrong - it could be an effect of a close-up photo scaled up - but it's more likely a CRT approximation generated by a software filter on a modern machine. Such software filters are often available in modern software emulating old hardware. While the intention is amicable, I've never seen a filter that can properly convey the peculiarities of a real world CRT. I personally use old CRTs regularly (as in, at least weekly) and when I use an emulator on a modern system, I always disable CRT filters.

2024-08-02: It's been brought to my attention that the above image is indeed a photo of a CRT. Mea culpa! For reference, a less out-of-focus close-up of a CRT will better reveal scanlines, the shadow mask and RGB cells.

Above is another example, from Twitter user KaelanRamos. It's hard to reproduce the true CRT feeling on anything but an actual CRT: the picture on the right is much too dark and fuzzy to give an accurate sense of what CRTs look like.

Both examples makes it appear as if individual pixels were almost undetectable on CRT screens, which - as will be demonstrated below - simply isn't the case. But while they might be exaggerated, they do illustrate that a certain type of CRT will significantly change the pixel art viewing experience compared to a modern flatscreen.

La Technique

Like with any artistic medium, CRTs and old hardware have their particular quirks, drawbacks and advantages. On early 8-bit systems, such as the C64 and NES, strict hardware limitations dictated what could be done by way of graphics. The above screenshot is from the Commodore 64 game Maniac Mansion, released in 1987. The original resolution is 160x200 pixels. It would take a tremendously fuzzy CRT to smooth out that kind of blockiness.

Above is a photo of my C64 connected to one of my Commodore 1084S monitors. Despite the poor photo quality, jagged pixel edges are clearly visible, demonstrating that a CRT isn't a catch-all solution for blocky 8-bit graphics.

With time, artists and programmers learned more about these 8-bit systems. Various programming tricks and artistic techniques were developed to produce better quality graphics on the exact same hardware. Below is a screenshot from Mayhem in Monsterland, also on the C64 but released in 1993, six years after Maniac Mansion.

Even on the flatscreen you're most likely reading this on, the graphics above is clearly leagues ahead of Maniac Mansion. Apart from painstakingly utilizing the C64's fixed 16 color palette to construct a coherent game aesthetic, Mayhem in Monsterland makes use of anti-aliasing and dithering to simulate a higher resolution and color depth. (It also uses sprite overlays to achieve this in certain places, which takes some rather finicky programming to get right.) These techniques work with the properties of a CRT - slight fuzziness, scanlines, subtle color bleeding - and against the limitations of the machine - low resolution, limited color selection, very little RAM.

Dithering means using arbitrary pixel patterns such as lines, dots or noise in order to simulate new color values. It's similar to cross-hatching in ink drawings and old engravings.

Anti-aliasing or AA for short, is the concept of using pixels with intermediary color values to smooth sharp edges and simulate a higher resolution.


An example of cross-hatching in an etching by Albrecht Dürer.


Sample dithering and anti-aliasing created in Deluxe Paint II running on MS-DOS.

Because of the extreme hardware limitations of old 8-bit systems, dithering and AA are rare sights when it comes to in-game graphics on such machines. Still images - loading screens - were less constricted than moving graphics and were often more elaborate. Another limiting factor was the development process. While cross-development solutions existed for many platforms, they were expensive and home computer developers often worked on the target machine. Graphics programs for the C64 suffered from the same hardware limitations as games. Mice for the C64 were made, but they were fairly uncommon. Plenty of artists had to use the keyboard or a joystick for drawing.

An abundance of colors

I'm sure many 8-bit aficionados will disagree, but I think the 16-bit era is the true golden age of pixel art: The Amiga 500, SNES, Atari ST and SEGA Mega Drive. Hardware was still restricted, but the extreme limitations of 8-bit memory addressing were gone. The Amiga could display a 32-color screen and shuffle around huge chunks of graphics without breaking a sweat. Resolutions were still low, though - on average somewhere around 320x240 pixels. Similarly, 32 freely selectable colors from a total of 4,096 was a marvel compared to the fixed 16-color palettes of 8-bit machines, but nowhere close to 24-bit color space we're used to today.

The gradual progression in skill and technical ingenuity that occurred on the 8-bit systems applies to the 16-bit world as well. The rule of thumb, as someone wise once put it, is that "a technology is always at its best right before it's obsolete". Amiga game graphics certainly improved over time, but started at a higher level than the C64. Better hardware meant that conversions of coin-op games - pioneers in lush pixel art - were possible. Silkworm, pictured above in its 1989 Amiga 500 release, may not look quite as stunning as on the original 1988 arcade cabinet, but it's very close. Both anti-aliasing and dithering is used for the in-game graphics.

The title screen from Ruff'n'Tumble above is also taken from the Amiga 500. Released in 1994, it's a fine example of how far pixel art had progressed by then. The palette is constructed using complementary colors, with just a few shades of blue to offset the otherwise red hues and make them "pop". Dithering is prevalent but subtle, and the AA is taken so far that the image looks curiously smooth even on a modern flatscreen. The use of large white highlights, such as in the muzzle fire and on the boy's hair and face, means that a limited number of hues surrounding them will create an illusion of more colors. Furthermore, shadows tend toward an all-black, effectively creating contrast and volume but also allowing the re-use of darker hues for both skin, hair, clothes, fire and the logo text.

Signals and Noise

So, what role does a CRT play in pixel art? The short answer is "It depends". All CRTs, especially old cheap ones, have artefacts such as visually discernible scanlines (thin black lines between lines of pixels) and color bleeding (an effect of the RGB phosphors and shadow mask or equivalent). These are direct effects of how CRTs work, and both affect how a picture generated by the video hardware is displayed on screen.

Another aspect of old computer displays is signal quality. The best quality on analog displays is always achieved by using separate signals for each color value. This is usually called RGB, after the Red, Green and Blue values making up such a video signal. A lot of old 8- and 16-bit machines were connected to a cheap TV set using either Radio Frequency (RF) modulation or composite video. RF modulation generates a signal usable through the antenna jack on the TV. The result is so poor it might even serve to fuzzify the Maniac Mansion graphics above. Composite is, in comparison, much better. The next step up is S-Video, followed by the king of hooking a computer to a television - RGB separated SCART. The latter was never available in the US of A (an apparently poor and technologically backwards nation), which means Americans will simply have to take my word when I say that RGB SCART on a good TV is nearly as sharp as an actual RGB computer monitor - but just nearly.

Anti-aliasing and dithering does a lot of work when it comes to giving pixel art a smooth appearance. Displaying such techniques on a CRT surely helps - especially those built for PAL or NTSC video. Above is Deluxe Paint IV on Amiga, showing a picture by yours truly on a 1084S monitor. In the zoomed in part of the screen, to the right, AA and dithering is clearly visible. In the normal view to the left, the inherent fuzziness of the CRT blends and smooths both the dithering and AA into something greater than the sum of its parts.

Above we can see a detail from an Atari STe intro called Riverside, by Dead Hackers Society. The edges of the leaves aren't anti-aliased and despite my crappy camera work, pixels are clearly visible when the machine is hooked up to a 14" Philips CRT TV via RGB SCART (on the right hand side of the picture). It would of course be impractical to apply anti-alias here: the swirly water effect behind the leaves constantly changes color, alternating between dark and bright. Applying anti-alias towards a dark color would look extremely grating when the background shifts to bright, and vice versa.

A CRT is indeed much more forgiving than a modern flatscreen, even without anti-aliasing. But in plenty of cases, both dithering and AA were obvious to the end user. Despite this, using them was often a better choice than not: The human brain has a knack for being visually fooled, and a fantastic ability of filling in the gaps.

Dithering and anti-aliasing are both techniques that will improve a pixel art image regardless of what type of screen they're viewed on. They're designed to counteract the low graphics resolution of old hardware - it just so happens that a CRT will make them look even better. Even though a composite signal will make things look fuzzier on a TV set than for example S-Video, the better signal quality is always preferable when dealing with old systems. If there's too much noise, detail will be lost and colors will look off. If available, an RGB connection is always the best choice.

One exception to this rule about signal quality is CGA color blending on old IBM PCs. This uses artefacts of the NTSC composite video signal - not the screen - to display more colors than normally available via the RGB signal on the same system. CGA color blending is described in greater detail on this eminent page, from where I also brazenly stole the illustration above. To the left is the combination of RGB colors and patterns that will produce the NTSC color on the right. This can only be achieved using composite video and has nothing to do with the CRT itself. On a CRT capable of displaying both a composite and RGB signal, the effect will only appear when selecting the composite input.

Note that this CGA trick isn't the same as dithering, even if dithering - when using the right type of screen and colors - can give the illusion of new colors. It's perhaps not as striking as with CGA blending, and can often be identified with a bit of squinting and close examination. This, however, is indeed linked to the use of a proper CRT - as opposed to video signal shenanigans.

Advancements in Tech

So far, we've covered PAL and NTSC displays. These were the first home computer screens available, sometimes in the form of crisp RGB monitors, but more often as an old hand-me-down TV set. They share certain characteristics: a relatively low refresh rate (Just 50 Hz on PAL systems!) and a sparse dot pitch. When it comes to computer screens, there are always two resolutions involved: the one produced by the computer, such as 320x200, and the dot pitch of the screen proper. The dot pitch describes the density of RGB cells on the screen, which determines with what precision the screen can reproduce the desired computer image.

In other words: with better quality components and a better dot pitch, the screen will reproduce the computer image with greater fidelity - reducing the CRT artefacts associated with pixel art trickery. Most old TV sets had a sparse dot pitch. Proper RGB monitors from the same era had a somewhat denser one, and they were in turn surpassed by VGA screens.

Above is a detail from the game Duke Nukem 3D (taken from this video by LGR). It's being displayed on a standard, consumer-grade CRT VGA screen from 1995. The game is running in a low resolution, most likely 320x200. It's a 3D first person shooter, but the status bar at the bottom is still traditional pixel art. Despite heavy use of dithering and anti-aliasing, individual pixels, even with very low contrast, are very clearly discernible. VGA monitors still had the CRT characteristics of their predecessors - they were just of much higher quality and less prone to artefacting. Even so, pixel art techniques were far from pointless - just above the status bar we can see how jagged the hand pushing a new clip into the gun looks without anti-aliasing.

Here's another detail from the same LGR video. It depicts the same monitor, now displaying a 640x480 mode. Individual pixels are still clearly discernible, despite the much higher resolution.

Here's a detail from a monochrome NeXT MegaPixel Display, connected to a NeXT Cube. It's a professional, high quality "paper white" 17 inch screen with an 1120x832 pixel resolution, released in 1990. Despite the high resolution, individual pixels are still visible (which is more evident if you click the image and view it at full resolution).

If you look closely and squint, individual pixels are often discernible even on modern flatscreens. We just don't think about them as much. In part, of course, because they're very small - but also because the image material we typically view has a lot in common with old pixel art trickery: zoom in on a digital photo and you'll see plenty of anti-aliasing. Computers today are also fast enough to apply such pixel art techniques on the fly: font smoothing is just another way to say "real-time anti-aliasing of text".

In fact, the excellent picture quality of late stage CRTs - those made in the late 1990s or early 2000s - will make any old 320x200 pixel art game look basically as crisp and blocky as they do on a modern flatscreen. It wasn't CRT technology itself that made pixel art look better - it was the blatant artefacts of cheap, low dot pitch PAL and NTSC consumer electronics that coincided to create just the right amount of fuzz. Considering this, plenty of properly credentialed retro gamers may have different memories of what pixel art "should" look like depending on whether they were DOS (VGA), Amiga (RGB) or 8-bit console (composite) aficionados.

Ratioed

If exploring old, authentic pixel art using a modern screen, you'll eventually come across something like this:

Governor Elaine Marley (from the legendary LucasArts point-and-click adventure Monkey Island) looks all squashed, despite her 256 color VGA glory!

This is an artefact of 1:1 conversion of old pixel art. Modern flatscreens all have fixed resolutions and purely digital interfaces, ensuring a fixed aspect (width-to-height) ratio and completely square pixels.

CRTs, on the other hand, can display a number of various resolutions. VGA, for example, includes the gaming standard 320x200 pixels in 256 colors and the business-oriented 640x480 in 16 colors. These two resolutions have very different aspect ratios. A VGA monitor still had to be able to display both of them, thus approximating the aspect ratio of 640x480 rather than that of 320x200. Hence, if you wanted the abundance of 320x200 games available to fill the entire height of your screen, you had to adjust it so that the pixels weren't square.

If we increase the height of the above image just a little bit, so that it better matches a 640x480 aspect ratio, we end up with this:

Ahh, that's a lot better. Variable aspect ratios and resolutions with non-square pixels is an oft-forgotten quirk of CRT screens. It was also never taken into account when porting PC games to PAL Amigas running a 320x256 resolution. This means I grew up with the oblong version of Governor Marley, forever affecting my preference in women.

Modern Art

When it comes to pixel art, I'm something of a purist. I've grown up with 16-bit systems and still use them actively in the context of the demo scene. I even dabble in pixel art myself. Plenty of pixel art is still produced for and on old platforms, most of it much better than my own attempts. These works all follow the core tenets of what I consider pixel art:

Taking some artistic liberties with resolution and color palettes in a modern "pixel art" game is fine by me. My main gripe is with sloppy technique. A lot - not all, but a lot - of modern pixel art is purposely made to look overly blocky. Dithering and anti-aliasing just isn't utilized, which makes it look even chunkier than actual old game art does on a modern screen. It seems to me as if the artists are worried that classic pixel art techniques would make things look too good, though I personally believe the opposite applies.

Conclusion

CRTs played a large role in the pixel art experience of yesteryear - especially cheap TV sets and consumer-level RGB monitors intended for PAL or NTSC signals. Equally important, however, were techniques such as palette selection, dithering, anti-aliasing and color blending. Pure programming trickery also helped produce better quality pixel art, especially on 8-bit systems.

Modern pixel art suffers from two ailments: artists afraid of using traditional techniques because things may not look blocky enough, and rosy nostalgia that unfairly depicts CRT screens as a much more forgiving medium than they actually were.

C'est la vie, as they say.