Hacker News new | past | comments | ask | show | jobs | submit login
Yesterday's Pixels, Today (nas.sr)
184 points by luu 32 days ago | hide | past | favorite | 45 comments



Yesterdays aesthetic wasn't thick chunky pixels with outputs exactly matching the indexed palettes with wide color range. Sure, resolution was low and color choice was limited... but so similarly limited was the way we transmitted and displayed things. These dithered polygon shadings turned into new colors, the blocky details into new smooth shapes, and the colors overall more muted than just popping the RGB value onto a modern screen would suggest.

That's not to say this aesthetic is "bad" (I'm actually quite fond of it and similar styles too) but just that it's absolutely nothing like the emulated Star Fox screenshots being used as the target suggest. If yesterday's pixels is the goal then this is missing the main part of what made those pixels look the way they did.

For those who haven't seen games like this on the typical technology of the era: this is a photo of LCD output using a similar path as taken here, a photo the same with a CRT emulation shader, and a photo of an actual CRT (don't take this one CRT to be gospel of what every CRT output from all of time looked like) https://i.imgur.com/lo8ytRq.jpeg


On home consoles smoothed pixels were common due to CRTs but for the handheld world sharp pixels were the reality. So if you played any 3D DS or GBA games the output would look similar to the results in the article just with a larger color palette.


This is a good point, handhelds were indeed sharp (barring a rabbit hole about temporal smearing on some of the ancient Gameboy era ones). That said, they were actually pretty visually sharp too, not really the chunk-ified aesthetic you see added here. E.g. the GBA was 240x160 in 2.9" so ~100 DPI. To display that in the same aesthetic on the modern web you can just render 1x since it assumes about the same virtualized render density (96 DPI). If you blow it up to have chunky pixels as here it's again not about the original aesthetic and more about creating a cool pixelated render.


All devices with the name Game Boy have some level of temporal smearing. It’s just that the newer devices’ display lag might not be perceived by everyone.


What shader’s that? Tried CRT-Royale[1]?

[1] https://emulation.gametechwiki.com/index.php/CRT-Royale


I was there and I think it's mostly fantasized that pixels were that different than the blocky pixels they were. I have a (still working) real vintage arcade cab from the mid-eighties, with an old, blurry CRT. It's amazing to play on that vintage cab (especially Robotron 2084 [1]) but it's not because of supposedly "blocky pixels not looking blocky".

It's amazing because the joysticks are amazing. Standing is arguably cooler than sitting and then when things gets hectic, you'll physically "move" (or let say "shake") the cab by frantically going left/right/whatever.

In the case of Robotron 2084 it's amazing because nothing today offers the same gameplay: you need two 8-directions joystick, on to move in one of 8 directions and the other joystick to fire in one of 8 directions. They don't make it like that today, unless you play a Robotron clone using actual arcade joystick. And even then: you better have a full-sized cab if you want the experience to be even more fun.

Sure, we had scanlines and whatnots but it was still very close to blocky pixels shown today on a modern flat monitor without any shader (for example without artificially recreating the look of a CRT).

Also the "blockiness" of them pixels back in the days was highly dependent on how old your CRT was.

It's not as if there was "one correct bluriness" induced by CRT. Every CRT brand / age / model had different characteristics.

To me the "supsension of disbelief" was there. For example I remember playing Sundog: The Frozen Legacy on the Atari ST. One of the best game ever made (by FTL, who then created Dungeon Master, which is basically the ancestor of all FPS games). When I was playing Sundog, I was a rogue space trader buying low/selling high, gun fighting in cities, etc. And I remember it as... Very blocky [2].

[1] https://en.wikipedia.org/wiki/Robotron:_2084

[2] https://en.wikipedia.org/wiki/SunDog:_Frozen_Legacy


Another thing that was/is very hard to replicate on common modern setups is that feeling of instant feedback you can get from quality (certainly not all) games at the time. The inputs were polled, there was no room for a 3 frame output buffer even if someone had wanted one, the displays didn't add a bunch of image processing time on top of it. You press fire and things fire, you dodge right and you move right. It wasn't truly instantaneous but it tended to be a lot better than a typical console+TV setup today (even in "game mode" on the TV). Worth noting Star Fox in particular was not one of these games... it was... struggling to do the output 3D at a fast or consistent rate even with the extra chip :). Again, not that all games were like this just it can be hard to replicate the feel of the ones that were with different technologies. Run-ahead is one way to bridge the last bit of that gap on many average systems these days.

And you're 100% right there is no "correct blurriness" for CRT. When I say "don't take this one CRT to be gospel of what every CRT output from all of time looked like" I mean it - some CRTs, particularly for computer style displays instead of TV style displays, were relatively sharp. And a high end barely used CRT from the late 90s is probably a lot less blurry than a low end and heavily used one from the early 80s, everything else equivalent about them. That said, Star Fox had expectations of both being output on consumer TVs as well as through the SNES video output which wasn't particularly sharp itself anyways.

Another classic example of this in home game consoles is the waterfalls in the Genesis era Sonic games. If you play them on a modern display it looks more like a sharp set of blue and white door bead curtains. If you play it on a typical CRT television it looks more like shimmering water falling (not perfectly but the bright single pixel whites are not so perfectly contrasted and there is some blur between the vertical lines with the background instead of a straight alternation).


> In the case of Robotron 2084 it's amazing because nothing today offers the same gameplay: you need two 8-directions joystick, on to move in one of 8 directions and the other joystick to fire in one of 8 directions. They don't make it like that today, unless you play a Robotron clone using actual arcade joystick.

One could argue they do, these types of games are referred to as twin stick shooters. You can play them on modern PCs with modern gamepad that have two directional joysticks.

Two of my favorites are Enter the Gungeon and Brigador.


>In the case of Robotron 2084 it's amazing because nothing today offers the same gameplay: you need two 8-directions joystick, on to move in one of 8 directions and the other joystick to fire in one of 8 directions

This kind of gameplay is known as a "twin-stick shooter" and is a popular genre even today. Most of the biggest consoles have had two sticks on their controllers for decades that have enabled this style of gameplay


Maybe I have different visual perception than you but playing Super Metroid or Zelda: A Link to the Past, in a emulator with crisp square pixels looks nothing like it did on a CRT.

There are tons of articles on the difference. Here's the first one I found, googling. It gives a good example of the difference

https://wackoid.com/game/10-pictures-that-show-why-crt-tvs-a...

I went to a museum exhibit once where they were showing old consoles connected to LCD displays. It was infuriating to me how they where effectively disrespecting the art but not showing it the way it was at the time. It would be no different than if the Louvre replaced all their paintings with giant LCD displays of the same paintings.


I know, right? It's like those people who listen to Zeppelin on CD or -- ugh -- streaming instead of how they were meant to be listened to: on vinyl.


There's no right or wrong way to enjoy good content but if you're goal is to recreate the original aesthetic then "Hey Siri, play Stairway to Heaven remastered" isn't that.


Meh, the remastered version is what they wish they could have done the first time, and what they would have done if digital audio had been available. People have nostalgia for the limitations of tape and vinyl and radio, but that’s what they were, limitations, not an aesthetic choice.


I tend to prefer "improved" versions myself for the same reasons but I'm not sure I'd agree that just because there are limitations in a medium all of the choices in creating the art cease to be choices of aesthetics. E.g. the Star Fox devs certainly didn't want flatly shaded, low polygon models relying on dithering to increase a limited palette... but all of the choices they made as a result of that certainly led to a great, intentionally crafted, aesthetic - even if it wasn't the ideal aesthetic of the creators. In the same way creating an Unreal Engine 5 remake of Star Fox is probably a lot closer to what the creators would have really liked but would be almost completely unrelated to the aesthetic in place in the original.


Yesterday’s pixels look quite different on today’s screens than they looked on CRTs of the time. In particular, “pixel-perfect lines and points” weren’t a perfectly sharp grid, but mixed up and re-defined by the CRT’s shadow mask and scanlines, making them look more organic and less pixelated.

Look at this for example (CRT left, “perfect” pixels right): https://cdn.xcancel.com/pic/orig/media%2FFQI0t9PacAALT14.jpg

Many more examples here: https://xcancel.com/CRTpixels


The final result looks great, but I found it even more convincing limiting it to about 15 FPS: https://jsfiddle.net/9mksgbe6/1/


I don't know if it was an intentional choice or not but that's pretty much the general performance range of Star Fox too.


I like the trick of rendering in a small resolution and then scaling it back up without anti-aliasing and stuff. I wonder if there's any way to do chunky pixel static websites like that just using CSS in the same way?


Short answer: Not really.

Long answer: Sorta, with a lot of overbearing caveats.

Normal HTML elements cannot be rendered this way, there's no way to disable AA when drawing and no way to disable bilinear (or similar) filtering when scaling. Things will lose resolution, but they'll blur rather than chunk.

Image elements and canvases CAN be scaled to preserve pixels. Anything you draw to a canvas can be kept chunky, but you'll be writing your own rendering routines because the browser does not know how to lay off the AA.

There's probably some treachery you can pull off through SVG.


Example of some SVG treachery (getting an exact retro style this way would be difficult to say the least) https://codesandbox.io/p/sandbox/pixelate-page-demo-dt6w0


Heads up, Firefox doesn't like SVG filters being applied to the root element, but the body element works just fine.

Pretty impressive effect, seems tricky to tame though. Where's this gingham pattern bubble up from?


Yeah, not sure. Rendering first to an HTML5 Canvas, but how to render CSS, etc. to a Canvas is beyond me. Maybe just a lot of custom CSS/HTML to give the appearance: https://www.vcfmw.org


The terrible, very cheaty way to do it is to screen capture a website from a browser tab, and display it in another browser tab inside a canvas element with some form of pixelize filter applied.

https://scrawl-v8.rikweb.org.uk/demo/dom-019.html


Ex-Zodiac is another Star Fox inspired game that was released on Steam with big chunky pixels. It comes with the option to disable the pixel filter to simply play with a clean low poly aesthetic. I find the big pixels to be extremely tiring after only a few minutes, so I find this option to be a game-changer (pun intended).

Typing this I remembered "A short Hike" similarly had the option to disable it and I also preferred it disabled. It wasn't as important as it is slower paced though.


Just want to thank you for using actual low resolution rendering, and not pixelated-looking objects on a high-res surface. This looks great!

The way smooth parallax and sometimes different pixel sizes (!) show up in “retro” games is a huge pet peeve of mine.


Varying pixel sizes, pixels offset from their natural grid, and even rotated pixels were actually not uncommon in retro games. Take a look at just about any SNES game that did advanced Mode 7 effects, like Pilot Wings or Super Mario Kart, and you'll see examples of pixels being rendered at varying scales outside their native resolution.

It's not the same look as modern games, because the screen resolution was much lower than what we have today, but to me, high resolution rendering of transformed low resolution sprites is a perfectly valid successor aesthetic. It's not the same as what a game would have looked like in the 90s, but as others have pointed out in this thread, neither are crisp full-color pixels rendered as perfect squares. It's all an interpretation.

On the other hand, what I cannot abide are "low poly" models that use polygons other than triangles and convex quads. I will die on this hill.


All of the twitter links are broken for me


They're broken for everyone. It seems that each new internet generation needs to learn the hard way that linking to walled gardens (FB, twitter, reddit, etc) breaks their site.


Seems like the posts were deleted. Sadly don't seem to be in the Wayback Machine either.


And nothing of value was lost. I hope people finally move on from this 'X' shitshow.


> And nothing of value was lost.

Some presumably nice and relevant images were lost.


X being a shitshow is exactly why a lot of value was lost.


@dang - article needs a Oct 22 2019 date

(spotted this because the "unfinished Blender PR" mentioned was merged several years ago)


@mentions don’t do anything. If you want to reach dang, click the contact link at the bottom and send an email.


Going as far as adding lines support to Blender gltf export is quite a flex! And it looks really good on the Ferris wheel.


Very cool style! I wonder if one could further reduce some of the constraints (i.e. # colors on palette), maintain the pixelated style, but improve overall aesthetics.


Looks great, but is there a video??


You can play it: https://nasser.itch.io/restricted-airspace

I did not find any videos.


I don't understand the love for thick pixels. The effect clearly reflects the resource constraints of the platform. Is there anything here beyond nostalgia?


It might have originated from specific technical constraints, but it's a unique art style. Some people will like it, other people won't. Nostalgia might be a factor in its popularity, but people without nostalgia can (and do) fall in love with it.


It's akin to falling in love with brutalist architecture IMO.



Not if you had LCD video games like on a Gameboy.


The Game Boy is a bit of a different story, but its pixels weren’t as chunky because they had significant separating lines, and the long LCD afterglow blurred anything in motion, further supported by its low contrast. It’s still quite difficult to accurately emulate the appearance of the real Game Boy screen on modern displays.


There's also the laziness.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: