Pseudo-colors for low resolution graphics
Moderator: Moderators
Pseudo-colors for low resolution graphics
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:
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 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?
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 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?
Re: Pseudo-colors for low resolution graphics
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.
PAL consoles let you abuse vertical chroma subsampling instead.
Re: Pseudo-colors for low resolution graphics
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.
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.
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" :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?
- Black, A, B, C
- Black, A, B, D
- Black, A, C, D
- Black, B, C, D
Useless, lumbering half-wits don't scare us.
Re: Pseudo-colors for low resolution graphics
I've been reading about artifact colors, but it looks like they're hard to pull off consistently on the NES.
Do you mean blending colors vertically?PAL consoles let you abuse vertical chroma subsampling instead.
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.
Yeah, that's been my experience too.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).
True.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.
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.I'd stick to dithering whenever possible.
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.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
Re: Pseudo-colors for low resolution graphics
Oh I was going to suggest exactly that. It's a very clever trick !but I get to use the attribute table for extra name table rows, which I very much need.
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.
Re: Pseudo-colors for low resolution graphics
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!
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 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...
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.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.
Re: Pseudo-colors for low resolution graphics
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.
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.
Re: Pseudo-colors for low resolution graphics
OK to show what I meant, there's nothing preventing you from having 3 shades of every colour, including the combined ones.
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
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.
Re: Pseudo-colors for low resolution graphics
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.
Too bad it doesn't play nice with an even-bit representation of said colours.
- Attachments
-
- nes-pseudo-colors.png (1.57 KiB) Viewed 5776 times
Useless, lumbering half-wits don't scare us.
Re: Pseudo-colors for low resolution graphics
It looks cool like that, but I only have 16 slots...
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.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.
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.Oh I understand you had to simulate a 16-colour palette so that each pseudo-pixel fits in 4 bits.
Re: Pseudo-colors for low resolution graphics
SucksIt looks cool like that, but I only have 16 slots...
So yeah, either you need that "black background" colour and we have 3 shades of 5 colours : Or you don't need it and we can have 4 shades of 4 colours : I find the idea of having less shades for some colours than others weird; although if it works for you then it's fine.
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.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.
Useless, lumbering half-wits don't scare us.
- Controllerhead
- Posts: 314
- Joined: Tue Nov 13, 2018 4:58 am
- Location: $4016
- Contact:
Re: Pseudo-colors for low resolution graphics
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.
Re: Pseudo-colors for low resolution graphics
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).
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.Do you mean blending colors vertically?PAL consoles let you abuse vertical chroma subsampling instead.
Re: Pseudo-colors for low resolution graphics
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: Filtered, fields merged, missing dot enabled: 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: Same filtering: 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.
Without any black in the patterns: Filtered, fields merged, missing dot enabled: 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: Same filtering: 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.
Re: Pseudo-colors for low resolution graphics
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.
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.