alt Hacker NewsA simple way to scale pixel art games
Comments
I find it amusing that we now obsess over the missing flaws in our pixel images. This is exactly analogous to the vinyl/digital debate.
One way you can tell this nostalgic quest is a little silly is by the fact that new indie pixel art games are mostly excluded from this nitpicking.
I lived through the CRT > LCD transition and the only downside to LCDs at the time was A) resolution interpolation, and B) motion blur. (Both of these issues have since been addressed.)
When CRTs were the norm we were never satisfied with their crispness. We always yearned for more clarity and a smaller dot pitch. When you saw a game displayed on a sharp monitor the improvement was both obvious and somewhat amazing. But now we've finally got what we want in the form of high-resolution LCDs and OLEDs and we're trying hard to find new faults to be fixed, haha.
I am a bit of a hypocrite: I like a good CRT overlay on my retro games. It invokes a feeling. But I won't say it's objectively better.
The proper way to scale pixel graphics is by using nearest-neighbor (integer scaling) + CRT shader. Some games implement these filters excellently (eg Black Jewel, Hammerwatch (only the very first part), Animal Well), while others do it poorly (eg Skald).
Old consoles can be connected to an LCD monitor using a device called RetroTINK, which can add this effect perfectly. For static images, software like Photoshop, Affinity Photo is sufficient, but the goal should always be a CRT effect rather than generic scaling or fancy blur.
The point is that OBJECTIVELY pixel art looks incomparably better on CRT monitors, which is why this effect is emulated.
Then they go on to try and compare to an composite output but they do this. "Jazz Jackrabbit 2 through an interlaced composite video stream, grabbed with a cheap capture card." That's not really how we experienced it though. Better to try and take a photograph of a CRT - although that's challenging.
On a page like this you should really use the CSS style:
img {
image-rendering: pixelated;
}>> Center: Horizontal linear (proposed)
The image they used is biased toward horizontal.
The ground (and blocks beneath the ground) have strong horizontal lines. As does the fence wall behind the main character, and the main characters gun is horizontally elongated.
"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."
This is so wrong. CRTs have unique properties that can not really be replicated on an LCD monitor. You can get something similar with a really high refresh OLED panel, but that needs to be verified.
But author did nearest neighbor on both axis instead of just vertical as proposed in tweet. Isn't this different?
It's neat hack, but I'm not sure if there is much use for it. Of course this is much faster than doing CRT emulation, but in what context is that performance difference relevant? And I don't know if there are any other major advantages here.
Its unfortunate that the author is using VGA signals on LCD displays as "retro". I remember well my first experience using a LCD monitor for work. It was for my first "Silicon Valley" job in 1999 and it was a 15" 1024x768 one, perhaps a ViewSonic. The CTO of the company I was working for was pushing them as it was the "new thing". I requested a 19 inch Trinitron instead as the text was blurry with the VGA input and hurt my eyes, where as my Sony at home was noticeably sharper. I continued using CRTs up until probably 2005 (including a 21" Sony that weighed > 100lbs), it was at that time I got a graphics card with DVI output. At that point, I switched to a 20" Dell LCD and never looked back.
tldr; VGA always looked like crap on most LCDs, imho they were almost unusable until DVI.
I’ve never seen good CRT physical emulation. But I also suspect it’s been long enough, that I just wouldn’t be able to tell the difference unless I had my old childhood bedroom Sanyo CRT to compare it to.
I’m not sure these come close because there’s some sort of physical element that would be hard to replicate unless you mapped the DPI of a screen to the “DPI” of a CRT.
Otherwise you’re just creating a weird facsimile in the same way that a lot of indie artists don’t produce pixel art that is actually pixel aligned. It’s ugly.
I wonder if this could be implemented in the original OSSC.
I do not like it. The best aesthetic on a modern display to me is integer scaling towards the nearest multiple. That looks nothing like a CRT and breaks with some assumptions artists made back then, but modern pixel art is designed for modern displays. If you want a CRT look there are sophisticated shaders that look decent on a high res screen, but nothing reproduces an actual CRT.
I think this article from 1995 sums it up: http://alvyray.com/Memos/CG/Microsoft/6_pixel.pdf
Summation: A pixel is a "picture element," a sampling of the intent.
On CRTs, the phosphors would sample the electron beams, which in turn sampled the memory. The phosphors, when hit, would diffuse in a perfectly round manner. As the voltage and intensity of the beam increases, the rays become more plentiful and the diffusion dilates; the output brightness becomes non-linear. In modern displays, this non-linearity is corrected for with "gamma."
So we have two changes in modern displays that affect the way the picture is presented to the eyes:
1. Square edges. These don't exist with CRTs, barring double-scan and prescaling.
2. Dilation. Pixels of higher brightness on a CRT occupy more area than that allocated for a pixel on an LCD. Brightness bleeds over into neighboring pixels, (importantly) making dark lines finer.
So, objectively, pixel art originally displayed on CRTs needs to be altered to have the same appearance on a LCD. The worst problem I see personally is that a bilinear-filter is often used, but it does the interpolation in gamma-space instead of linear. This causes dark lines and black areas to become more pronounced and blurry. This, coupled with the lack of dilation completely changes the character of the image.
About artistic intent, I can provide an anecdote as a counterexample: Shigeru Miyamoto said early sprites were first laid out on graph paper--as square blocks. There's photos out there, and the blocks are filled in completely and are very square. This was early on, so I don't know if they went back and adjusted them, or if later artists often used the intended display to model their art or not.