7 ms·

Subpixel Snake [video]

271 points by codetrotter 2y ago

mempko 2y ago
The color space portion was interesting. Learned something new!
lukevp 2y ago
Very interesting! Learned a lot about color space and how it applies to subpixels, glad I watched this! Gameplay wise, I think it should be a bigger game board and there should be accounting for the speed of the snake through each subpixel (when traveling left to right, going from R to G is less horizontal movement than going from B to R, and traveling vertically, each step is massive compared to the horizontal movement.) This should be pretty easy to do by ratio’ing and changing the speed of each animation step based on where in the spectrum it is. That would make it feel a lot more polished I think.
mrandish 2y ago
As an obsessive arcade retro-gamer who custom built a high-end emulation cabinet with a 27-inch quad-sync analog RGB CRT - I approve of this video! As soon as he described running into the green pixels problem, I knew he was going to learn something interesting. Sub-pixel structure, phosphor chromaticity, etc are such a fun rabbit hole to dive down. And it's still highly relevant in today's OLED, QLED, etc displays. Also, a tip for when you play classic arcade or console retro games from the 80s and 90s: they will look much better (and be more authentic) if you play on a CRT - or, if playing via emulation, just turn on a CRT emulation pixel shader (CRT Royale is good). These pixels are art which the original devs and artists intentionally hand-crafted to use the way CRTs blend colors and scanlines anti-alias naturally. You deserve to see them as they were intended to be seen. Just look at what you've been missing: https://i.redd.it/9fmozdvt6vya1.jpg https://i.redd.it/9fmozdvt6vya1.jpg
- gwbas1c 2y ago
  I'm pretty sure those are similar, but different, images. Having grown up with CRTs, very few games look "better" on them; mostly games that used interlacing to create flashing effects. (Edit: Forgot that light guns need CRTs due to timing.) Otherwise, CRTs are like vinyl: Some people will invent all kinds of reasons why they are better, but in practice, they aren't.
  - pdpi 2y ago
    The argument isn’t “CRTs are better”. You’re right — they’re not. The argument is that pixel art from that era was designed around the specific limitations of CRTs, and takes advantage of the specific way that CRTs would mess with the pixels. This is similar to what happened with electric guitars — you can make cheap amps with barely any distortion these days, but that sucks horribly for playing music composed around the presence of distortion. E.g. amp distortion tends to add a bunch of harmonic content that makes major/minor triads sound pretty bad, which is why power chords are popular. On the other hand, power chords sound pretty terrible without distortion, because they need that extra harmonic content to sound good!
    - sim7c00 2y ago
      nice points. the parallel with guitar really made it click for me thx =) makes total sense!
  - mrandish 2y ago
    I agree with you about vinyl but I think you're misunderstanding my point about CRTs. I'm not claiming CRTs are inherently "better" either technically or aesthetically. In general, they're not. I'm not like some audiophiles who argue vinyl, tube amplification and "magic copper" cables are better - denying both signal theory (Nyquist et al) and objective data (double blind A/B/X tests). Modern digital formats and devices are almost always better overall. The cases where they aren't are rare, very specific and, even then, 'better-ness' is only in certain ways and not others. My background is in video engineering and the point I'm making here is very specific. It only applies to hand-crafted retro game pixel art created in the CRT era. And my point isn't even about CRTs! It's about how the RS-170A composite video standard that CRTs used encodes color. The "A" in RS-170A added color to the existing black and white television standard while remaining compatible with old B&W TVs. It was sort of a clever analog-era compression hack. I'll skip the technical details and history here (but both are fascinating) and simplify the takeaway. Broadly speaking, in digital representations of composite video color encoding, the correct color of a pixel can only be known relative to the current phase of the pixel clock and the pixels adjacent to it. Sometimes it's a fairly subtle difference but other times it can change a pixel from blue to red. To be clear, this wasn't "better" in any way (other than allowing optional color). The "hack" of encoding chroma information at half the frequency of luma and only in relation to a sub-carrier frequency came with trade-offs like chroma fringing on high frequency edges, ringing and other spurious artifacts. However, it was the only video we had and video game creators of the 80s & 90s used the tech they had to create the best images they could. For example, we would put a pixel of a certain color next to a pixel of another color to intentionally change the color of the second pixel (and NOT just due to blurring the two together, it literally decoded to a different third color). I did this myself in the 1980s, intentionally positioning a white pixel next to a black pixel on an even numbered column so they would show as a single red pixel on the screen. Using this encoding technique, I could display 9 different colors from a computer that only had two bits per pixel. That's why just displaying a naive RGB output of the game isn't properly decoding a signal that was hand-encoded to have more and different data than what's in the naive RGB. So I recommend using a CRT shader not because it emulates a glass tube with phosphors but because it includes the decoding logic to correctly display the original encoded content. Personally, I never use the shaders that add noise, blurring, cross-talk or other degradation. That would be as dumb as adding the pops and click of a dirty vinyl LP to a pristine signal. That would make it less accurate. My goal as an engineer is to be more accurate. It's fine if adding spurious crap tickles somebody's nostalgia bone from when they were a kid - but I'd never do that. I want to to see the original pixels and colors the artists saw and intended their audiences to see. That requires properly decoding the signal. And the example I posted demonstrates just how different an image can appear when properly decoded.
- crazygringo 2y ago
  > You deserve to see them as they were intended to be seen. I've never bought that argument, and I grew up playing games on CRT's. The reality is that different CRT's had wildly different characteristics in terms of sharpness, color, and other artifacts -- and it also varied tremendously depending on the type of video output/input. Were you hooked up to a TV? A cheap monitor? An expensive monitor? About the only thing you can say for sure is that CRT's were blurrier. And the comparison image you provide is completely misleading because the brightnesses are totally different, which suggests that the LCD/LED version isn't using correct gamma. If you used a random CRT her skin tone also had a good chance of turning greenish or whatever because that's just what CRT's did -- the color artifacts could be atrocious. I definitely appreciate wanting to blur the image in an emulator to remove the jaggies, and the retro CRT effects are a cool novelty. But I just don't buy the argument that it's "how the games were intended to be seen", because there was just way too much variation and the screen quality was so low. It's like only listening to music from the 90's on cheap speakers over the roar of the road because it's how the music was "intended to be heard". No it wasn't. It's just the best you had at the time.
  - amiga386 2y ago
    > I just don't buy the argument that it's "how the games were intended to be seen" I do, though. At its most extreme, compare how this CGA imagery looks like on an NTSC television, with the crisp, clean signals that generated it. The demo makers here absolutely intend you to see this via NTSC, it will look like complete trash if you don't. https://int10h.org/blog/img/1k16_flowergirl_cga_1024_colors.png https://int10h.org/blog/img/1k16_flowergirl_cga_1024_colors.... (from https://int10h.org/blog/2015/04/cga-in-1024-colors-new-mode-illustrated/ https://int10h.org/blog/2015/04/cga-in-1024-colors-new-mode-...) This article gives you more examples: https://www.datagubbe.se/crt/ https://www.datagubbe.se/crt/ And it links to this video with yet more examples: https://www.tiktok.com/@mylifeisanrpg/video/7164193246401383726 https://www.tiktok.com/@mylifeisanrpg/video/7164193246401383... There's no mistaking it. The artists on those 80s/90s games worked with the expectation of how it looked on display hardware of the time. The actual pixels, in complete precision on a vastly higher resolution display, look like shit. Or they look "retro".
- playa1 2y ago
  I’m a fan of authentic retro hardware. That sounds like an awesome cabinet, I would love to spend hours and pockets full of quarters playing on it. This post caused me to go down a rabbit hole about CRT simulation. Looks like it is a thing. https://github.com/blurbusters/crt-beam-simulator https://github.com/blurbusters/crt-beam-simulator
  - mrandish 2y ago
    > That sounds like an awesome cabinet Why, yes! Yes it is. :-) If it sounds good, you should consider one of your own. My goal was not the retro nostalgia of my recreating my parent's shitty 1970s living room TV but instead creating a cabinet that would allow me to explore these games each in their authentically correct resolution and frame rate and at the maximum quality and fidelity possible. That's why I chose an analog RGB monitor and the last, fastest GPU ever made with a native analog RGB signal path (R9 380X). I run a special version of the MAME emulator called GroovyMAME made just enable technically correct native display via analog signals on a CRT. http://forum.arcadecontrols.com/index.php/board,52.0.html http://forum.arcadecontrols.com/index.php/board,52.0.html I created this cabinet over ten years ago, before emulation pixel shaders were a thing. If you don't want to go to the effort, expense and time of acquiring and calibrating a high-end CRT, good pixel shaders can now get you >98% of the way there much easier and cheaper.
  - mrandish 2y ago
    Someone else asked for more info, so I wrote a much more detailed post here: https://news.ycombinator.com/item?id=42823507 https://news.ycombinator.com/item?id=42823507
- starfezzy 2y ago
  Not a fan of the blurry LCD look - it's like someone hacked a .ini to set antialiasing 4x higher than its limit then placed a screen door in front of the monitor. I gamed during the transition from CRTs to LCDs. Nobody was preferring the "graphics" of a CRT. The real downgrade was when gaming shifted from PC to console and killed dedicated servers. We used to pick servers with 10ms latency. Now people think 60-100ms+ is fine.
- azinman2 2y ago
  I’d love to hear more about your setup. Do you have a blog or anything documenting it?
  - mrandish 2y ago
    I probably should put a permanent post up somewhere but I'll just give you a recap of info that may matter if you're interested in having your own emulation arcade cabinet. I highly recommend this forum to deep dive because it has sub-forums for controls, monitors, cabinets, etc. http://forum.arcadecontrols.com/ http://forum.arcadecontrols.com/ First, you need to understand your goal in creating a cabinet. Unlike some people, my goal was NOT recreating long-ago nostalgia like playing console games on my parent's living room TV. There's nothing wrong with that but as someone who wrote games professionally back in the 80s and later became a video engineer, I wanted to play these games in their original native resolutions, aspect ratios and frame rates. But my goal went beyond original authenticity to ideal authenticity. Even back in the day, an arcade cabinet's monitor would be left on 100 hours a week in an arcade and after five years be pretty thrashed. The joystick mechanisms would be worn and imprecise. Sometimes arcade manufacturers would cut corners by sourcing an inferior button instead of the top of the line. I had no interest in recreating that. I wanted to create the experience of playing the originals in their most ideal form. How they looked (or would have looked) with a brand new top of the line, period correct monitor perfectly calibrated, and pristine high-quality controls. What the manufacturer would have made in the 80s or 90s with no cost corners cut. My cab is based around a 27" Wells Gardner D9200 quad-sync analog RGB CRT. Wells Gardner made high-quality industrial CRTs specifically to go in arcade cabinets (Atari, Sega, Namco, etc). The D9200 is one of the last and best monitors they made and I bought it new from them shortly before they went out of business. It's very flexible as it scans four ranges of frequencies 15khz, 24khz, 31.5khz and 38khz. This covers very nearly all of the resolutions and frequencies of any CRT raster-based arcade machines ever made by global arcade manufacturers. 38khz supports resolutions up to 800x600 non-interlaced which is what I run my game selection interface in. Scanning to higher frequencies is also nice for running games from some later consoles like Dreamcast which were capable of displaying 480p natively. This lets me run all the classic arcade games in the native resolution, frame rates and frequencies. No scaling, averaging or interpolation. For my CRT to switch between all these frequencies on the fly it must be sent a properly formatted signal. Doing this natively is tricky and requires using a GPU with native analog RGB output. I use the last, fastest native analog RGB GPU - the Radeon R9 380x. The real magic however is using special display drivers and a special version of the MAME emulator called GroovyMAME to generate precisely correct horizontal and vertical frequencies matching the game code written for each arcade cabinet's original display hardware. GroovyMAME and the community around it have done remarkable work crucial to accurate historical preservation through precise emulation. Much of their work has now been mainstreamed into MAME, making it more accurate than ever. Dive into that rabbit hole here: http://forum.arcadecontrols.com/index.php/board,52.0.html http://forum.arcadecontrols.com/index.php/board,52.0.html To be clear, my high-end monitor and highly-tuned signal chain probably allow most of these games to look better than the original monitor in the original cabinet. While perfectly authentic, they aren't exactly 'historically accurate' because an average cabinet in an average arcade in the 1980s probably looked worse due to age, use and abuse. However, intentionally degrading original content to look worse to match some historical average jank, seems wrong to me. It's true some of the original monitors were connected with composite video, not component. Some of the cabinets had cheap, poorly shielded cables while mine has a double shielded broadcast studio cable with ferrite cores at both ends to eliminate cross-talk and noise. So I'm playing the original game code but presented as the people who made these games would have wanted their own personal cabinet - if they could take one home. However, I draw the line at modern revisionism like AI upscaling or frame gen. Because that's no longer the original pixels and frames in their most ideal form. Next is choosing your controls. Fortunately, many of the manufacturers of original arcade cabinet controls are still around like Happ (buttons), Wico (joysticks), etc. My cabinet has controls for two players as well as a trackball for games like Marble Madness and a counter-weighted spinner for games like Tempest. These are all interfaced to the emulation PC in the cabinet through USB control boards made by companies like Ultimarc. Each of the buttons is also backlit by an RGB LED and the colors of each button change to the button color that was on the original cabinet, for example, when playing Joust player 1 is yellow and player 2 is blue. This also indicates which controls are active in each game. Selecting games is done via a joystick driven menu. Software to do this is called a frontend and there are a variety ranging from open source to commercial. I use a commercial one called Launchbox because it handles calling various emulators, interfacing with control boards, organizing and maintaining the game library of thousands of titles across a dozen platforms very well. I actually use the BigBox mode of Launchbox which is made for dedicated emulation cabinets. Another nice touch is integrating various databases arcade historians have created. While browsing the game library it's fascinating to read the history of how the game was made, see the original arcade cabinet and the launch advertisement along with the usual game logo, title screen and gameplay video. Linked data like this allows you to follow the evolution of various game types, companies and franchises over time from their origin to their end point. CONCLUSION: All of the above is, admittedly, pretty obsessive. If you want a terrific arcade/console emulation cabinet you DO NOT need to do what I did (or even half of it). However, I recommend not just buying a cheap mini cabinet from Costco. To be fair, while the worst cheapies are awful, the best of that class isn't that bad. But you can do much better with just a little more money, thought and care. Things like authentic arcade controls, and rolling your own cheap, used PC will allow you to run a frontend you can add other platforms and games to - and - MOST IMPORTANTLY run a CRT emulation pixel shader on the output. I recently upgraded the PC in my cabinet and bought a used corporate PC on eBay for less than $100 delivered. It's more than fast enough to emulate everything up to PS2 perfectly and I have no interest in emulating later consoles on a CRT cabinet because that's when games started being written for flat screens. I love my CRT but I'm not a purist. CRTs are expensive, hard to maintain and finnicky analog gear. As a video engineer I have to admit recent versions of the best CRT emulation shaders like CRT Royal running on a high-end flat screen are very impressive. If I was building my cabinet today, I might go with a very carefully selected, high-end flat screen instead of a CRT. Frankly, the kind of flat screen I'd want might cost more than a very good used CRT but it would provide some flexibility to do things a CRT can't. And there would be some trade-offs vs my best-ever-made CRT but engineering is all about trade-offs and there's nothing that's ever going to be perfectly ideal on every dimension someone like me cares about.
- deleted 2y ago
  [deleted]
Sohcahtoa82 2y ago
The linked Subpixel Zoo article taught me that Pentile is still actually incredibly popular. My first Pentile screen was on my Motorola Droid 4 phone, and it was awful. Small text was often impossible to read depending on the color of the text and its background. The massive gaps between colors made solid red, green, or blue areas of the screen look like a checkerboard. It basically had a screen-door effect before VR became mainstream and made "screen-door effect" a household term. So it hit me as a surprise to know that Pentile is still popular and used today. I guess it's just gotten better? Smaller gaps between the subpixels? Maybe higher resolutions and pixel densities hide the weaknesses shown in my Droid 4?
- wffurr 2y ago
  >> Maybe higher resolutions and pixel densities hide the weaknesses shown in my Droid 4? That's exactly it. Droid 4 resolution was low enough that the subpixel arrangement was clearly visible. Newer displays are dense enough that subpixels aren't visible at all.
- mdasen 2y ago
  Early PenTile displays often had a different arrangement: https://en.wikipedia.org/wiki/PenTile_matrix_family#/media/File:Nexus_one_screen_microscope.jpg https://en.wikipedia.org/wiki/PenTile_matrix_family#/media/F... You can see that it's Blue, Green, Red, Green on the horizontal/vertical axis so each red sub pixel is separated by two green and one blue sub pixels. Modern PenTile displays usually use a triangular layout: https://static1.xdaimages.com/wordpress/wp-content/uploads/wm/2022/11/ip14pm_vs_s22u_subpixels-1.png https://static1.xdaimages.com/wordpress/wp-content/uploads/w... I'm not an expert at text rendering, but it seems like you'd be able to get an RGB sub pixel combination a lot closer together with this triangular layout than the linear one. But also, the Droid 4 was simply lower resolution. Apple moved to 330 pixels per inch in 2010 and the Droid 4 was 275 PPI in 2012. So the Droid 4 was poor resolution even for its time and the PenTile layout would make it even worse by removing a third of the sub pixels. Today, the Galaxy S25 has 416 PPI and the iPhone 16 460 PPI so it is dramatically more pixels. Pixel density would have the largest impact, but I think that the triangular layout that modern displays use probably also helps. You talk about the screen door effect and I feel like the triangular layout wouldn't have as much of that issue (but I'm not an expert on sub pixel rendering).
bawolff 2y ago
For the zooming out to make the css pixel = real pixel, i wonder if you could just use units like 0.25px instead. Or maybe divide by window.devicePixelRatio in js to make it dynamic.
FriedPickles 2y ago
If you're as dumb as me and try to actually play this, note that the "Snake speed" value is inverted.
- hatthew 2y ago
  the speed is ms per frame
  - grayhatter 2y ago
    ms/frame isn't a speed... it's a delay? maybe a rate?
    - hatthew 2y ago
      Yeah frames per second probably would have made more sense. That being said, I think it's fine to colloquially refer to time/distance as speed, e.g. my walking speed is 15 minutes per mile, but it should probably be specified that that's the unit in use. But also this isn't a carefully designed game, it's a small tech demo, so ¯\_(ツ)_/¯
    - kaoD 2y ago
      > it's a delay? maybe a rate? I think period?
  - kbelder 2y ago
    Ah, "Speed of Time"
kiru_io 2y ago
Thank you for this video. Love the style, introduction to color space and the practial use.
tantalor 2y ago
The snake moves weird because the subpixels aren't square. I would increase the snake's horizontal speed (per subpixel) relative to vertical, so speed in either direction is the same from the user's perspective in the actual viewport.
yuvalr1 2y ago
This great video goes into a bit more detail about pixels. It also shows that there is an interesting difference with the color green not only in monitors, but also in camera sensors that detect the color: https://youtu.be/PMIPC78Ybts?list=PLplnkTzzqsZTfYh4UbhLGpI5kGd5oW_Hh&t=796 https://youtu.be/PMIPC78Ybts?list=PLplnkTzzqsZTfYh4UbhLGpI5k... I can recommend it, and all the other videos of Cem Yuksel. He is really great at presenting!
htk 2y ago
Who's old enough to remember the joys of tweaking ClearType on Windows XP? It was a great workaround for rendering smoother text on low dpi LCD displays.
- shmeeed 2y ago
  You can still do that on Windows 10! It's just not that much fun anymore.
blibble 2y ago
qbasic nibbles did the same using the ansi box drawing characters there was a text character with half the vertical "cell" in use this, along with clever use of foreground/background colours allowed double the vertical resolution (in text mode!)
leeoniya 2y ago
the easiest way to see a subpixel is to put a drop of water on the display. you probably get 100x magnification this way :)
modeless 2y ago
This is awesome. I was able to play it with a headband magnifier[1] on a 1440p monitor, slowed down 10x. Anything higher density would probably need an actual microscope. [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magnifying/dp/B01ENBCE82 https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...
llimani 2y ago
[flagged]
kbelder 2y ago
People who did it: We did it this way. People who didn't do it: You couldn't have done it that way.

271 points by codetrotter 2y ago

The color space portion was interesting. Learned something new!

Very interesting! Learned a lot about color space and how it applies to subpixels, glad I watched this! Gameplay wise, I think it should be a bigger game board and there should be accounting for the speed of the snake through each subpixel (when traveling left to right, going from R to G is less horizontal movement than going from B to R, and traveling vertically, each step is massive compared to the horizontal movement.) This should be pretty easy to do by ratio’ing and changing the speed of each animation step based on where in the spectrum it is. That would make it feel a lot more polished I think.

mrandish 2y ago

As an obsessive arcade retro-gamer who custom built a high-end emulation cabinet with a 27-inch quad-sync analog RGB CRT - I approve of this video! As soon as he described running into the green pixels problem, I knew he was going to learn something interesting. Sub-pixel structure, phosphor chromaticity, etc are such a fun rabbit hole to dive down. And it's still highly relevant in today's OLED, QLED, etc displays. Also, a tip for when you play classic arcade or console retro games from the 80s and 90s: they will look much better (and be more authentic) if you play on a CRT - or, if playing via emulation, just turn on a CRT emulation pixel shader (CRT Royale is good). These pixels are art which the original devs and artists intentionally hand-crafted to use the way CRTs blend colors and scanlines anti-alias naturally. You deserve to see them as they were intended to be seen. Just look at what you've been missing: https://i.redd.it/9fmozdvt6vya1.jpg https://i.redd.it/9fmozdvt6vya1.jpg

gwbas1c 2y ago
I'm pretty sure those are similar, but different, images. Having grown up with CRTs, very few games look "better" on them; mostly games that used interlacing to create flashing effects. (Edit: Forgot that light guns need CRTs due to timing.) Otherwise, CRTs are like vinyl: Some people will invent all kinds of reasons why they are better, but in practice, they aren't.
- pdpi 2y ago
  The argument isn’t “CRTs are better”. You’re right — they’re not. The argument is that pixel art from that era was designed around the specific limitations of CRTs, and takes advantage of the specific way that CRTs would mess with the pixels. This is similar to what happened with electric guitars — you can make cheap amps with barely any distortion these days, but that sucks horribly for playing music composed around the presence of distortion. E.g. amp distortion tends to add a bunch of harmonic content that makes major/minor triads sound pretty bad, which is why power chords are popular. On the other hand, power chords sound pretty terrible without distortion, because they need that extra harmonic content to sound good!
  - sim7c00 2y ago
    nice points. the parallel with guitar really made it click for me thx =) makes total sense!
- mrandish 2y ago
  I agree with you about vinyl but I think you're misunderstanding my point about CRTs. I'm not claiming CRTs are inherently "better" either technically or aesthetically. In general, they're not. I'm not like some audiophiles who argue vinyl, tube amplification and "magic copper" cables are better - denying both signal theory (Nyquist et al) and objective data (double blind A/B/X tests). Modern digital formats and devices are almost always better overall. The cases where they aren't are rare, very specific and, even then, 'better-ness' is only in certain ways and not others. My background is in video engineering and the point I'm making here is very specific. It only applies to hand-crafted retro game pixel art created in the CRT era. And my point isn't even about CRTs! It's about how the RS-170A composite video standard that CRTs used encodes color. The "A" in RS-170A added color to the existing black and white television standard while remaining compatible with old B&W TVs. It was sort of a clever analog-era compression hack. I'll skip the technical details and history here (but both are fascinating) and simplify the takeaway. Broadly speaking, in digital representations of composite video color encoding, the correct color of a pixel can only be known relative to the current phase of the pixel clock and the pixels adjacent to it. Sometimes it's a fairly subtle difference but other times it can change a pixel from blue to red. To be clear, this wasn't "better" in any way (other than allowing optional color). The "hack" of encoding chroma information at half the frequency of luma and only in relation to a sub-carrier frequency came with trade-offs like chroma fringing on high frequency edges, ringing and other spurious artifacts. However, it was the only video we had and video game creators of the 80s & 90s used the tech they had to create the best images they could. For example, we would put a pixel of a certain color next to a pixel of another color to intentionally change the color of the second pixel (and NOT just due to blurring the two together, it literally decoded to a different third color). I did this myself in the 1980s, intentionally positioning a white pixel next to a black pixel on an even numbered column so they would show as a single red pixel on the screen. Using this encoding technique, I could display 9 different colors from a computer that only had two bits per pixel. That's why just displaying a naive RGB output of the game isn't properly decoding a signal that was hand-encoded to have more and different data than what's in the naive RGB. So I recommend using a CRT shader not because it emulates a glass tube with phosphors but because it includes the decoding logic to correctly display the original encoded content. Personally, I never use the shaders that add noise, blurring, cross-talk or other degradation. That would be as dumb as adding the pops and click of a dirty vinyl LP to a pristine signal. That would make it less accurate. My goal as an engineer is to be more accurate. It's fine if adding spurious crap tickles somebody's nostalgia bone from when they were a kid - but I'd never do that. I want to to see the original pixels and colors the artists saw and intended their audiences to see. That requires properly decoding the signal. And the example I posted demonstrates just how different an image can appear when properly decoded.
crazygringo 2y ago
> You deserve to see them as they were intended to be seen. I've never bought that argument, and I grew up playing games on CRT's. The reality is that different CRT's had wildly different characteristics in terms of sharpness, color, and other artifacts -- and it also varied tremendously depending on the type of video output/input. Were you hooked up to a TV? A cheap monitor? An expensive monitor? About the only thing you can say for sure is that CRT's were blurrier. And the comparison image you provide is completely misleading because the brightnesses are totally different, which suggests that the LCD/LED version isn't using correct gamma. If you used a random CRT her skin tone also had a good chance of turning greenish or whatever because that's just what CRT's did -- the color artifacts could be atrocious. I definitely appreciate wanting to blur the image in an emulator to remove the jaggies, and the retro CRT effects are a cool novelty. But I just don't buy the argument that it's "how the games were intended to be seen", because there was just way too much variation and the screen quality was so low. It's like only listening to music from the 90's on cheap speakers over the roar of the road because it's how the music was "intended to be heard". No it wasn't. It's just the best you had at the time.
- amiga386 2y ago
  > I just don't buy the argument that it's "how the games were intended to be seen" I do, though. At its most extreme, compare how this CGA imagery looks like on an NTSC television, with the crisp, clean signals that generated it. The demo makers here absolutely intend you to see this via NTSC, it will look like complete trash if you don't. https://int10h.org/blog/img/1k16_flowergirl_cga_1024_colors.png https://int10h.org/blog/img/1k16_flowergirl_cga_1024_colors.... (from https://int10h.org/blog/2015/04/cga-in-1024-colors-new-mode-illustrated/ https://int10h.org/blog/2015/04/cga-in-1024-colors-new-mode-...) This article gives you more examples: https://www.datagubbe.se/crt/ https://www.datagubbe.se/crt/ And it links to this video with yet more examples: https://www.tiktok.com/@mylifeisanrpg/video/7164193246401383726 https://www.tiktok.com/@mylifeisanrpg/video/7164193246401383... There's no mistaking it. The artists on those 80s/90s games worked with the expectation of how it looked on display hardware of the time. The actual pixels, in complete precision on a vastly higher resolution display, look like shit. Or they look "retro".
playa1 2y ago
I’m a fan of authentic retro hardware. That sounds like an awesome cabinet, I would love to spend hours and pockets full of quarters playing on it. This post caused me to go down a rabbit hole about CRT simulation. Looks like it is a thing. https://github.com/blurbusters/crt-beam-simulator https://github.com/blurbusters/crt-beam-simulator
- mrandish 2y ago
  > That sounds like an awesome cabinet Why, yes! Yes it is. :-) If it sounds good, you should consider one of your own. My goal was not the retro nostalgia of my recreating my parent's shitty 1970s living room TV but instead creating a cabinet that would allow me to explore these games each in their authentically correct resolution and frame rate and at the maximum quality and fidelity possible. That's why I chose an analog RGB monitor and the last, fastest GPU ever made with a native analog RGB signal path (R9 380X). I run a special version of the MAME emulator called GroovyMAME made just enable technically correct native display via analog signals on a CRT. http://forum.arcadecontrols.com/index.php/board,52.0.html http://forum.arcadecontrols.com/index.php/board,52.0.html I created this cabinet over ten years ago, before emulation pixel shaders were a thing. If you don't want to go to the effort, expense and time of acquiring and calibrating a high-end CRT, good pixel shaders can now get you >98% of the way there much easier and cheaper.
- mrandish 2y ago
  Someone else asked for more info, so I wrote a much more detailed post here: https://news.ycombinator.com/item?id=42823507 https://news.ycombinator.com/item?id=42823507
starfezzy 2y ago
Not a fan of the blurry LCD look - it's like someone hacked a .ini to set antialiasing 4x higher than its limit then placed a screen door in front of the monitor. I gamed during the transition from CRTs to LCDs. Nobody was preferring the "graphics" of a CRT. The real downgrade was when gaming shifted from PC to console and killed dedicated servers. We used to pick servers with 10ms latency. Now people think 60-100ms+ is fine.
azinman2 2y ago
I’d love to hear more about your setup. Do you have a blog or anything documenting it?
- mrandish 2y ago
  I probably should put a permanent post up somewhere but I'll just give you a recap of info that may matter if you're interested in having your own emulation arcade cabinet. I highly recommend this forum to deep dive because it has sub-forums for controls, monitors, cabinets, etc. http://forum.arcadecontrols.com/ http://forum.arcadecontrols.com/ First, you need to understand your goal in creating a cabinet. Unlike some people, my goal was NOT recreating long-ago nostalgia like playing console games on my parent's living room TV. There's nothing wrong with that but as someone who wrote games professionally back in the 80s and later became a video engineer, I wanted to play these games in their original native resolutions, aspect ratios and frame rates. But my goal went beyond original authenticity to ideal authenticity. Even back in the day, an arcade cabinet's monitor would be left on 100 hours a week in an arcade and after five years be pretty thrashed. The joystick mechanisms would be worn and imprecise. Sometimes arcade manufacturers would cut corners by sourcing an inferior button instead of the top of the line. I had no interest in recreating that. I wanted to create the experience of playing the originals in their most ideal form. How they looked (or would have looked) with a brand new top of the line, period correct monitor perfectly calibrated, and pristine high-quality controls. What the manufacturer would have made in the 80s or 90s with no cost corners cut. My cab is based around a 27" Wells Gardner D9200 quad-sync analog RGB CRT. Wells Gardner made high-quality industrial CRTs specifically to go in arcade cabinets (Atari, Sega, Namco, etc). The D9200 is one of the last and best monitors they made and I bought it new from them shortly before they went out of business. It's very flexible as it scans four ranges of frequencies 15khz, 24khz, 31.5khz and 38khz. This covers very nearly all of the resolutions and frequencies of any CRT raster-based arcade machines ever made by global arcade manufacturers. 38khz supports resolutions up to 800x600 non-interlaced which is what I run my game selection interface in. Scanning to higher frequencies is also nice for running games from some later consoles like Dreamcast which were capable of displaying 480p natively. This lets me run all the classic arcade games in the native resolution, frame rates and frequencies. No scaling, averaging or interpolation. For my CRT to switch between all these frequencies on the fly it must be sent a properly formatted signal. Doing this natively is tricky and requires using a GPU with native analog RGB output. I use the last, fastest native analog RGB GPU - the Radeon R9 380x. The real magic however is using special display drivers and a special version of the MAME emulator called GroovyMAME to generate precisely correct horizontal and vertical frequencies matching the game code written for each arcade cabinet's original display hardware. GroovyMAME and the community around it have done remarkable work crucial to accurate historical preservation through precise emulation. Much of their work has now been mainstreamed into MAME, making it more accurate than ever. Dive into that rabbit hole here: http://forum.arcadecontrols.com/index.php/board,52.0.html http://forum.arcadecontrols.com/index.php/board,52.0.html To be clear, my high-end monitor and highly-tuned signal chain probably allow most of these games to look better than the original monitor in the original cabinet. While perfectly authentic, they aren't exactly 'historically accurate' because an average cabinet in an average arcade in the 1980s probably looked worse due to age, use and abuse. However, intentionally degrading original content to look worse to match some historical average jank, seems wrong to me. It's true some of the original monitors were connected with composite video, not component. Some of the cabinets had cheap, poorly shielded cables while mine has a double shielded broadcast studio cable with ferrite cores at both ends to eliminate cross-talk and noise. So I'm playing the original game code but presented as the people who made these games would have wanted their own personal cabinet - if they could take one home. However, I draw the line at modern revisionism like AI upscaling or frame gen. Because that's no longer the original pixels and frames in their most ideal form. Next is choosing your controls. Fortunately, many of the manufacturers of original arcade cabinet controls are still around like Happ (buttons), Wico (joysticks), etc. My cabinet has controls for two players as well as a trackball for games like Marble Madness and a counter-weighted spinner for games like Tempest. These are all interfaced to the emulation PC in the cabinet through USB control boards made by companies like Ultimarc. Each of the buttons is also backlit by an RGB LED and the colors of each button change to the button color that was on the original cabinet, for example, when playing Joust player 1 is yellow and player 2 is blue. This also indicates which controls are active in each game. Selecting games is done via a joystick driven menu. Software to do this is called a frontend and there are a variety ranging from open source to commercial. I use a commercial one called Launchbox because it handles calling various emulators, interfacing with control boards, organizing and maintaining the game library of thousands of titles across a dozen platforms very well. I actually use the BigBox mode of Launchbox which is made for dedicated emulation cabinets. Another nice touch is integrating various databases arcade historians have created. While browsing the game library it's fascinating to read the history of how the game was made, see the original arcade cabinet and the launch advertisement along with the usual game logo, title screen and gameplay video. Linked data like this allows you to follow the evolution of various game types, companies and franchises over time from their origin to their end point. CONCLUSION: All of the above is, admittedly, pretty obsessive. If you want a terrific arcade/console emulation cabinet you DO NOT need to do what I did (or even half of it). However, I recommend not just buying a cheap mini cabinet from Costco. To be fair, while the worst cheapies are awful, the best of that class isn't that bad. But you can do much better with just a little more money, thought and care. Things like authentic arcade controls, and rolling your own cheap, used PC will allow you to run a frontend you can add other platforms and games to - and - MOST IMPORTANTLY run a CRT emulation pixel shader on the output. I recently upgraded the PC in my cabinet and bought a used corporate PC on eBay for less than $100 delivered. It's more than fast enough to emulate everything up to PS2 perfectly and I have no interest in emulating later consoles on a CRT cabinet because that's when games started being written for flat screens. I love my CRT but I'm not a purist. CRTs are expensive, hard to maintain and finnicky analog gear. As a video engineer I have to admit recent versions of the best CRT emulation shaders like CRT Royal running on a high-end flat screen are very impressive. If I was building my cabinet today, I might go with a very carefully selected, high-end flat screen instead of a CRT. Frankly, the kind of flat screen I'd want might cost more than a very good used CRT but it would provide some flexibility to do things a CRT can't. And there would be some trade-offs vs my best-ever-made CRT but engineering is all about trade-offs and there's nothing that's ever going to be perfectly ideal on every dimension someone like me cares about.
deleted 2y ago
[deleted]

Sohcahtoa82 2y ago

The linked Subpixel Zoo article taught me that Pentile is still actually incredibly popular. My first Pentile screen was on my Motorola Droid 4 phone, and it was awful. Small text was often impossible to read depending on the color of the text and its background. The massive gaps between colors made solid red, green, or blue areas of the screen look like a checkerboard. It basically had a screen-door effect before VR became mainstream and made "screen-door effect" a household term. So it hit me as a surprise to know that Pentile is still popular and used today. I guess it's just gotten better? Smaller gaps between the subpixels? Maybe higher resolutions and pixel densities hide the weaknesses shown in my Droid 4?

wffurr 2y ago
>> Maybe higher resolutions and pixel densities hide the weaknesses shown in my Droid 4? That's exactly it. Droid 4 resolution was low enough that the subpixel arrangement was clearly visible. Newer displays are dense enough that subpixels aren't visible at all.
mdasen 2y ago
Early PenTile displays often had a different arrangement: https://en.wikipedia.org/wiki/PenTile_matrix_family#/media/File:Nexus_one_screen_microscope.jpg https://en.wikipedia.org/wiki/PenTile_matrix_family#/media/F... You can see that it's Blue, Green, Red, Green on the horizontal/vertical axis so each red sub pixel is separated by two green and one blue sub pixels. Modern PenTile displays usually use a triangular layout: https://static1.xdaimages.com/wordpress/wp-content/uploads/wm/2022/11/ip14pm_vs_s22u_subpixels-1.png https://static1.xdaimages.com/wordpress/wp-content/uploads/w... I'm not an expert at text rendering, but it seems like you'd be able to get an RGB sub pixel combination a lot closer together with this triangular layout than the linear one. But also, the Droid 4 was simply lower resolution. Apple moved to 330 pixels per inch in 2010 and the Droid 4 was 275 PPI in 2012. So the Droid 4 was poor resolution even for its time and the PenTile layout would make it even worse by removing a third of the sub pixels. Today, the Galaxy S25 has 416 PPI and the iPhone 16 460 PPI so it is dramatically more pixels. Pixel density would have the largest impact, but I think that the triangular layout that modern displays use probably also helps. You talk about the screen door effect and I feel like the triangular layout wouldn't have as much of that issue (but I'm not an expert on sub pixel rendering).

bawolff 2y ago

For the zooming out to make the css pixel = real pixel, i wonder if you could just use units like 0.25px instead. Or maybe divide by window.devicePixelRatio in js to make it dynamic.

FriedPickles 2y ago

If you're as dumb as me and try to actually play this, note that the "Snake speed" value is inverted.

hatthew 2y ago
the speed is ms per frame
- grayhatter 2y ago
  ms/frame isn't a speed... it's a delay? maybe a rate?
  - hatthew 2y ago
    Yeah frames per second probably would have made more sense. That being said, I think it's fine to colloquially refer to time/distance as speed, e.g. my walking speed is 15 minutes per mile, but it should probably be specified that that's the unit in use. But also this isn't a carefully designed game, it's a small tech demo, so ¯\_(ツ)_/¯
  - kaoD 2y ago
    > it's a delay? maybe a rate? I think period?
- kbelder 2y ago
  Ah, "Speed of Time"

kiru_io 2y ago

Thank you for this video. Love the style, introduction to color space and the practial use.

tantalor 2y ago

The snake moves weird because the subpixels aren't square. I would increase the snake's horizontal speed (per subpixel) relative to vertical, so speed in either direction is the same from the user's perspective in the actual viewport.

yuvalr1 2y ago

This great video goes into a bit more detail about pixels. It also shows that there is an interesting difference with the color green not only in monitors, but also in camera sensors that detect the color: https://youtu.be/PMIPC78Ybts?list=PLplnkTzzqsZTfYh4UbhLGpI5kGd5oW_Hh&t=796 https://youtu.be/PMIPC78Ybts?list=PLplnkTzzqsZTfYh4UbhLGpI5k... I can recommend it, and all the other videos of Cem Yuksel. He is really great at presenting!

htk 2y ago

Who's old enough to remember the joys of tweaking ClearType on Windows XP? It was a great workaround for rendering smoother text on low dpi LCD displays.

shmeeed 2y ago
You can still do that on Windows 10! It's just not that much fun anymore.

blibble 2y ago

qbasic nibbles did the same using the ansi box drawing characters there was a text character with half the vertical "cell" in use this, along with clever use of foreground/background colours allowed double the vertical resolution (in text mode!)

leeoniya 2y ago

the easiest way to see a subpixel is to put a drop of water on the display. you probably get 100x magnification this way :)

modeless 2y ago

This is awesome. I was able to play it with a headband magnifier[1] on a 1440p monitor, slowed down 10x. Anything higher density would probably need an actual microscope. [1] https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magnifying/dp/B01ENBCE82 https://www.amazon.com/ProsKit-MA-016-Personal-Headband-Magn...

llimani 2y ago

[flagged]

kbelder 2y ago

People who did it: We did it this way. People who didn't do it: You couldn't have done it that way.