Pseudo-colors for low resolution graphics

A place for your artistic side. Discuss techniques and tools for pixel art on the NES, GBC, or similar platforms.

Moderator: Moderators

User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Pseudo-colors for low resolution graphics

Post by tokumaru »

We all know that the color capabilities of the NES are fairly limited, and not really suitable for representing photographic images or colorful pictures that are not perfectly aligned to the attribute grid. In one particular project I'm working on, I need to draw a low resolution image using software pixels made from multiple hardware pixels. For several reasons, I'm limited to using a single background palette, AKA 4 colors, but I want to make the most out of this palette by combining the available colors and shading them (via dithering and/or flicker) to create the most versatile set of 16 virtual colors possible. So far, this is the best I could come up with:

nes-pseudo-colors.png
nes-pseudo-colors.png (264 Bytes) Viewed 5897 times

The idea is to use 3 base colors (which can be changed dynamically as the player moves through the levels) with 3 shades each, and 3 secondary colors made from combinations of the base colors, each with 2 shades. All shading is done using black, which's a constant color. This looks reasonably colorful to me, and considering that the colors can be changed dynamically, I think that the levels will look varied enough. I'm not 100% satisfied with the dithering patterns, though... I considered blending things more using flicker, which would look kinda like this (not that GIFs are any good for testing flicker, but you get the idea):

color-flicker-test-02.gif
color-flicker-test-02.gif (1.41 KiB) Viewed 5897 times

Color flickering comes with a lot of complications, though... it doesn't look the same on all TVs, it looks terrible in emulators when frames are skipped, it can cause eye strain and, in the worst possible case, even seizures... so I'm probably not gonna be pursuing that any further.

I was wondering if anyone here had other ideas on how to combine a base set of 4 colors to create a wider palette that would look good on the NES... can anyone think of anything?
lidnariq
Posts: 11429
Joined: Sun Apr 13, 2008 11:12 am

Re: Pseudo-colors for low resolution graphics

Post by lidnariq »

You could try to tickle some NTSC artifact colors... if you leave rendering on during the scanline with the missing dot.

PAL consoles let you abuse vertical chroma subsampling instead.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: Pseudo-colors for low resolution graphics

Post by Bregalad »

Is this palette really made with 4 colours only ? Amazing.

Flickering will likely look flickering on an actual CRT TV (cf. introduction from Batman, which looks awful on real hardware with a real CRT TV). Probably the best it'd look is on a modern LCD screen, however, that's not the screen the NES was supposed to be attached to. The only cases I've found flickering not noticeable on a CRT TV is by flickering between neighbouring hues of the same luminosity (for example flickering between $07 and $08), but that leads to very little advantage in terms of what colours can be shown. I'd stick to dithering whenever possible.
I was wondering if anyone here had other ideas on how to combine a base set of 4 colors to create a wider palette that would look good on the NES... can anyone think of anything?
And idea that comes to mind (perhaps a bad one) is to use palettes to your advantage so that you can have a base set of one more colour; that is black background and 4 other colours I'll call "A, B, C and D" :
  • Black, A, B, C
  • Black, A, B, D
  • Black, A, C, D
  • Black, B, C, D
Then with dithering you can come up with a lot of secondary colours. For example to have purple, you dither red and blue; you get the idea.
Useless, lumbering half-wits don't scare us.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Pseudo-colors for low resolution graphics

Post by tokumaru »

lidnariq wrote: Thu Aug 27, 2020 11:15 pmYou could try to tickle some NTSC artifact colors... if you leave rendering on during the scanline with the missing dot.
I've been reading about artifact colors, but it looks like they're hard to pull off consistently on the NES.
PAL consoles let you abuse vertical chroma subsampling instead.
Do you mean blending colors vertically?
Bregalad wrote: Fri Aug 28, 2020 12:59 amIs this palette really made with 4 colours only ? Amazing.
It looks much more convincing in high resolution than when the pixels are as big as your nose, but maybe it's enough to create interesting environments.
Flickering will likely look flickering on an actual CRT TV (cf. introduction from Batman, which looks awful on real hardware with a real CRT TV).
Yeah, that's been my experience too.
The only cases I've found flickering not noticeable on a CRT TV is by flickering between neighbouring hues of the same luminosity (for example flickering between $07 and $08), but that leads to very little advantage in terms of what colours can be shown.
True.
I'd stick to dithering whenever possible.
One advantage of dithering is that it looks like detail, when it's really not. With perfectly flat pixels, their blockiness is completely evident, while the sharp pixels used in dithering patterns end up connecting with neighbor pixels in interesting ways and looking like intentional detail.
And idea that comes to mind (perhaps a bad one) is to use palettes to your advantage so that you can have a base set of one more colour; that is black background and 4 other colours I'll call "A, B, C and D" :
  • Black, A, B, C
  • Black, A, B, D
  • Black, A, C, D
  • Black, B, C, D
It's not a bad idea, but the huge attribute areas of the NES can make it hard to put together the colors you need. Also, like I said, I only have one palette. Not only does that make the rendering code simpler (no need to dynamically allocate colors), but I get to use the attribute table for extra name table rows, which I very much need.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: Pseudo-colors for low resolution graphics

Post by Bregalad »

but I get to use the attribute table for extra name table rows, which I very much need.
Oh I was going to suggest exactly that. It's a very clever trick !

And I had to download the PNG file and zoom to see how orange and purple are created. That's very clever, without zooming in like crazy I wouldn't have noticed, you can see there's a pattern going on but you could never tell it's made of vertical yellow&red stripes, etc...

I see no reason why 3 shades for them too wouldn't be possible, although the dithering pattern might look like less convincing with the darker shades.
Useless, lumbering half-wits don't scare us.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Pseudo-colors for low resolution graphics

Post by tokumaru »

Bregalad wrote: Fri Aug 28, 2020 5:38 am
but I get to use the attribute table for extra name table rows, which I very much need.
Oh I was going to suggest exactly that. It's a very clever trick !
I didn't have much choice... I had used up all the name table space when I decided not to use the 4-screen layout anymore, and the only way I could squeeze a status bar in was to use the attribute tables for it!
I wouldn't have noticed, you can see there's a pattern going on but you could never tell it's made of vertical yellow&red stripes, etc...
Thankfully, those vertical stripes blend very well in NTSC, so that's not a big problem even when the colors are very different, as is the case of yellow+blue.
I see no reason why 3 shades for them too wouldn't be possible, although the dithering pattern might look like less convincing with the darker shades.
Yeah, I considered mixing 3 colors instead of adding a 3rd shade to the base colors, but couldn't think of any pattern to mix 3 colors in an even number of pixels (4x2 pixels, which's the size of each software pixel). In this case I'd probably create 3 new colors and not shade them with black at all, if the result was good.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Pseudo-colors for low resolution graphics

Post by tokumaru »

As for the shading/dithering patterns, these two were the ones that worked best in NTSC for me, and they interact with each other without creating weird patterns at the boundaries where they meet.

The 50% one works much better than a typical checkerboard does on a real NES (we've all seen those diagonal artifacts!), and the 25% one looks somewhat irregular without being irregular, so it doesn't feel repetitive. I wasn't sure which of the two patterns to use on the secondary colors... The 50% one was too dark, making the mixed colors harder to identify, so I went with the 25% one. It looks a bit weird with sharp pixels, but with the color blending of NTSC it looks great.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: Pseudo-colors for low resolution graphics

Post by Bregalad »

OK to show what I meant, there's nothing preventing you from having 3 shades of every colour, including the combined ones.
nes-pseudo-colors.png
nes-pseudo-colors.png (1.16 KiB) Viewed 5782 times
I think it would also be interesting to have one shade darker than 50%, such as 25% or 33%. Everything could look too bright otherwise.

Even if you have only 3 shades of each colour, 25%, 50% and 100% might turn to look better than 50%, 75% and 100%. Even if ideally you'd have 33%, 66%, 100% but that doesn't divide evenly.

EDIT : Oh I understand you had to simulate a 16-colour palette so that each pseudo-pixel fits in 4 bits. Well... that doesn't play even with 3 shades :(
Useless, lumbering half-wits don't scare us.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: Pseudo-colors for low resolution graphics

Post by Bregalad »

Now imagine having this super 25-colour palette featuring 4 shades of 6 colours; it's crazy to think it's made of only 4 basic colours (including black).
Too bad it doesn't play nice with an even-bit representation of said colours.
Attachments
nes-pseudo-colors.png
nes-pseudo-colors.png (1.57 KiB) Viewed 5769 times
Useless, lumbering half-wits don't scare us.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Pseudo-colors for low resolution graphics

Post by tokumaru »

Bregalad wrote: Fri Aug 28, 2020 7:40 amnes-pseudo-colors.png
It looks cool like that, but I only have 16 slots...
I think it would also be interesting to have one shade darker than 50%, such as 25% or 33%. Everything could look too bright otherwise.
You think 50% is too bright? I actually thought it was too dark, which's why I went with the 75% brightness (25% black) for the secondary colors. I think everything looks darker in NTSC, too.
Oh I understand you had to simulate a 16-colour palette so that each pseudo-pixel fits in 4 bits.
Yes, it has to fit in 4 bits... I'm pre-rendering these in pairs, and being limited to 256 tiles means I can only have 16x16 combinations.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: Pseudo-colors for low resolution graphics

Post by Bregalad »

It looks cool like that, but I only have 16 slots...
Sucks :(

So yeah, either you need that "black background" colour and we have 3 shades of 5 colours :
nes-pseudo-colors_16_b.png
nes-pseudo-colors_16_b.png (1012 Bytes) Viewed 5756 times
Or you don't need it and we can have 4 shades of 4 colours :
nes-pseudo-colors_16_a.png
nes-pseudo-colors_16_a.png (1.11 KiB) Viewed 5756 times
I find the idea of having less shades for some colours than others weird; although if it works for you then it's fine.
You think 50% is too bright? I actually thought it was too dark, which's why I went with the 75% brightness (25% black) for the secondary colors. I think everything looks darker in NTSC, too.
To be honnest, without seeing it on the screen it's hard to tell. I think it can go in the category of "implementation detail" at this point.
Useless, lumbering half-wits don't scare us.
User avatar
Controllerhead
Posts: 314
Joined: Tue Nov 13, 2018 4:58 am
Location: $4016
Contact:

Re: Pseudo-colors for low resolution graphics

Post by Controllerhead »

I'm having some success with switching colors every frame and storing 2 palettes: so long as the colors are next to each other and/or on the same row, you can get some nice in-between colors and most combinations don't seem to flash too hard. It looks pretty good on CRT. Lots of emulators just skip drawing a few frames though and it looks terrible! Mixing different rows doesn't seem to work well either.
Image
lidnariq
Posts: 11429
Joined: Sun Apr 13, 2008 11:12 am

Re: Pseudo-colors for low resolution graphics

Post by lidnariq »

tokumaru wrote: Fri Aug 28, 2020 3:18 am I've been reading about artifact colors, but it looks like they're hard to pull off consistently on the NES.
Yeah. As rainwarrior's test here shows, it's pretty easy to choose any one of three different colors... but you'd have to ask the user which was which... or not care! The hue bending will still be close to the original color. It'd change if you ever fail to skip the missing dot, so if you're using extended blanking at the top of the frame, it's hard to use (you have to change patterns every vblank) instead of free (but random).
PAL consoles let you abuse vertical chroma subsampling instead.
Do you mean blending colors vertically?
Yes, exactly that. You may wish to use horizontal patterns instead anyway because of chroma crosstalk. But since PAL (regardless of B,N,M) always relies on averaging only the chroma component across each two scanlines, you can use other patterns to generate other mixes of colors.
lidnariq
Posts: 11429
Joined: Sun Apr 13, 2008 11:12 am

Re: Pseudo-colors for low resolution graphics

Post by lidnariq »

I thought I'd sit down with nes_ntsc and share a few pictures of deliberately using NES chroma artifacts here:

Without any black in the patterns:
nes-pseudo-colors-3.png
nes-pseudo-colors-3.png (310 Bytes) Viewed 5667 times
Filtered, fields merged, missing dot enabled:
(nes_ntsc, maximum gamma, minimum sharpness)
(nes_ntsc, maximum gamma, minimum sharpness)
Each of those columns of three will shuffle amongst themselves each time the NES reboots or the missing dot would have been skipped but isn't.
The bottom row (the sets that're RYB or RBY) will also swap within each group.

The full set of combinations of all four colors in any combination of three:
all-ntsc-diagonals.png
all-ntsc-diagonals.png (610 Bytes) Viewed 5667 times
Same filtering:
all-ntsc-diagonals-filtered-3.jpg
You can notice that the dark blue (2/3 black, 1/3 blue) are all still dark blue, but one's greenish and one's reddish and the last one is bluish. It's also possible to get the colors here shifted by 60°, so instead of RGB tinge it's instead CMY tinge.

The nice thing about this specific dither pattern is that even though there's these weird diagonal lines, there won't be any weird color fringing: the color fringing here is always consistent.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Pseudo-colors for low resolution graphics

Post by tokumaru »

Wow, this is really cool! Thanks for taking the time to experiment with this and report the results.

This is fascinating, really, but I have several reservations regarding the use of these tricks in an actual game. The first one is that with so many hardware combinations out there, from an 80's NES hooked up to a CRT to emulation clones connected to 4K TVs via HDMI, designing all the possible display configurations and coming up with a practical interface for players to set those things up sounds like way too much work.

I guess you could have a screen asking the player to "select the square that contains the picture of a specific object with a specific color", but that's a really weird thing to include in a game, it kinda sounds like one of those Google captchas.
Post Reply