|CRT emulation for pixel art|
|Written by Stuart|
|Sunday, 17 July 2011 19:41|
[This article is cross-posted on #altdevblogaday].
A good way to get an authentic look for retro-pixel art is to simulate the distortion caused by encoding the image into an NTSC signal, decoding it again (as a TV would), and projecting it onto a virtual CRT. This gives you natural-looking artifacts, like fringing and color bleeding.
It also makes copyrighted hedgehogs look even more dashing.
Console emulators do this sometimes, and if you're old enough to have actually played games on a CRT TV, it really helps with the sense of immersion. This post gives a quick overview of the process, in case you'd like to try it for yourself. All of these steps are texture operations performed by pixel shaders.
Naturally, there are a few problems.
AUGH, TEH MOIRE.
The combination of the scanlines and the phosphor texture make a little bit of moire pretty much unavoidable. Tuning the brightness, contrast, bloom, scaling, or NTSC parameters can produce moire, or move it from one place to another.
The good news is that it looks far worse in screen shots than it does on a running game. (I cranked it up for the screen shot above... it's not that ghastly under normal circumstances).
Crosstalk between chroma and luma is an key part of the effect, so it's a feature, not a bug. The problem is getting it to look bad in a "good" way. A band-stop FIR filter can be used to chop out the chroma signal, but it's tough to find the right balance between soft (filter too wide) and stripy (filter too narrow).
My original goal was to have RGB phosphors visible in the image when you examined it up close. That's really hard, because if you make the phosphors small enough to look realistic, the RGB pattern blurs out and all you can see is a sort of vertical striping. If you don't mipmap or supersample the phosphors, you again get more moire.
These examples have the phosphor texture enlarged and strengthened to exaggerate the problem. I wasn't able to get individual phosphors to look good at 720, and they are only barely tolerable at 1080.
Cranking all these techniques to the max gives you a delightfully bad video signal, which is also no fun to look at for more than 10 seconds. There is also a fair bit of interplay between the parameters: adjusting the scanline gap changes the brightness, and so on. Tuning all this can be a touchy process. Below are the parameters that control the effect. As you can see, there are a lot of ways I can screw things up.
In future posts I'll get into the technical details and show you what the shaders look like. If you're interested, subscribe to the RSS feed!
Copyright © 2011 Pure Energy Games, Inc. All rights reserved.