Graphics Challenge: Color-reduce this parrot

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

Moderator: Moderators

User avatar
dougeff
Posts: 2598
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Graphics Challenge: Color-reduce this parrot

Post by dougeff » Wed Feb 03, 2016 11:25 am

It irks me a little that the Wikipedia page on Game Palettes says (for NES and Sega Master System)...

Because of the constraints mentioned above, there are no current simulated screen images available for the NES.

https://en.wikipedia.org/wiki/List_of_v ... e_palettes

So, I challenge any of you out there, CAN IT BE DONE? To render their little Parrot picture in NES (or SMS) graphics.
nesdoug.com -- blog/tutorial on programming for the NES

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

Re: Graphics Challenge

Post by tokumaru » Wed Feb 03, 2016 11:37 am

The Master System one is easier:

1- resize (smoothly) to 32x24;
2- convert to 2 colors to find out which tiles can be represented with the same palettes;
3- resize (nearest-neighbor) to 256x192;
4- separate the original image in 2 layers using the 2 areas created before as masks;
5- convert each layer to 16 colors (from the SMS master palette) separately;

On the NES, things can get complicated if you want to automatically select the best value for color 0, but if you assume it to be black, the same process works just fine:

1- resize (smoothly) to 16x15;
2- convert to 4 colors to find out which 16x16-pixel blocks can be represented with the same palettes;
3- resize (nearest-neighbor) to 256x240;
4- separate the original image in 4 layers using the 4 areas created before as masks;
5- convert each layer to 4 colors separately (from the NES master palette), forcing black as one of the colors;

tepples
Posts: 21707
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Graphics Challenge

Post by tepples » Wed Feb 03, 2016 11:53 am

In the past, I've written a PC program that takes an image and a 32-character palette string and produces a file containing CHR and NAM data. Perhaps someone should write a batch PC program that does that in real time, letting the user adjust each of the 13 relevant color values up or down.

  1. Wait for the user to adjust a color or change dithering mode
  2. Convert the image with each of the four subpalettes
  3. Find which subpalette's converted image best represents each 16x16 area
  4. Show the image, as well as which colors ended up being used seldom if at all

User avatar
BioMechanical Dude
Formerly AlienX
Posts: 137
Joined: Fri Apr 18, 2014 7:41 am
Location: Bulgaria

Re: Graphics Challenge

Post by BioMechanical Dude » Wed Feb 03, 2016 1:07 pm

Well, I did some stuff in Photoshop, following tokumaru's advice and these are the results:

Sega Master System
Image

Although doesn't the Sega Master System have one palette for sprites and palette for backgrounds, each with 16 colors.
Considering the 8 sprites per scanline limit, they can't really be used to fill up the picture like that. Or can the backgrounds use both palettes? I made a 16-color version of the picture, just in case.
Image

NES
Image

The NES version turned out way uglier, than I thought. I guess that's what happens, when you don't have choice over the colors in the palettes.

By the way, thanks, tokumaru for sharing this technique. I was wondering how you can do this sort of thing without editing individual tiles, even though it's not very recommended to use this, when making NES-style images.
Greetings! I'm That Bio Mechanical Dude and I like creating various stuff like movies, games and of course chiptunes!
You can check out my YouTube Channel.
You can also follow me on Twitter.

User avatar
dougeff
Posts: 2598
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: Graphics Challenge

Post by dougeff » Wed Feb 03, 2016 1:26 pm

That was fast. Is this what it looks like in Photoshop, or in an NES emulator?

Any chance you can share the nametable and palette data...if you layered sprites on top, it could be improved a bit.
nesdoug.com -- blog/tutorial on programming for the NES

lidnariq
Posts: 8690
Joined: Sun Apr 13, 2008 11:12 am
Location: Seattle

Re: Graphics Challenge

Post by lidnariq » Wed Feb 03, 2016 1:37 pm

Because of the constraints mentioned above, there are no current simulated screen images available for the NES.
'twas I who added that, when some other random wikipedia editor didn't understand that the quantized image didn't count.

tokumaru wrote:1- resize (smoothly) to 16x15;
2- convert to 4 colors to find out which 16x16-pixel blocks can be represented with the same palettes;
That's going to produce highly-visible attribute clash, as visible in AlienX's results. It'd be better to use an algorithm like Khaz's quantomatic.

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

Re: Graphics Challenge

Post by tokumaru » Wed Feb 03, 2016 1:45 pm

AlienX wrote:Although doesn't the Sega Master System have one palette for sprites and palette for backgrounds, each with 16 colors.
Considering the 8 sprites per scanline limit, they can't really be used to fill up the picture like that. Or can the backgrounds use both palettes?

Yes, each background tile can select which of the 2 palettes to use, and each palette has a unique color 0. Tile maps on the master system have 2 bytes per tile, so there are enough bits not only to index patterns (which takes 9 bits), but also to select a palette, flip the pattern vertically and horizontally and select a priority relative to the sprites.

The NES version turned out way uglier, than I thought. I guess that's what happens, when you don't have choice over the colors in the palettes.

Yes, and it can only go downhill from their version that makes unrestricted use of the NES master palette. Their decision of not using any dithering at all also makes things way worse.

By the way, thanks, tokumaru for sharing this technique. I was wondering how you can do this sort of thing without editing individual tiles, even though it's not very recommended to use this, when making NES-style images.

Yeah, I guess automatically converted images will never look as good as those created with actual artistic interference. The PPU sucks for straightforward display of photographic images anyway, so I can't help feeling like trying to improve this kind of conversion is a waste of time.

Sik
Posts: 1589
Joined: Thu Aug 12, 2010 3:43 am

Re: Graphics Challenge

Post by Sik » Wed Feb 03, 2016 2:54 pm

To be fair, the NES pic would look a lot better if some tiles were changed to use the red palette (I see brown where it doesn't make sense at all, e.g. the shadow of the wing at the left)

User avatar
BioMechanical Dude
Formerly AlienX
Posts: 137
Joined: Fri Apr 18, 2014 7:41 am
Location: Bulgaria

Re: Graphics Challenge

Post by BioMechanical Dude » Wed Feb 03, 2016 4:28 pm

dougeff wrote:That was fast. Is this what it looks like in Photoshop, or in an NES emulator?

Any chance you can share the nametable and palette data...if you layered sprites on top, it could be improved a bit.

This is how it looks like in Photoshop. Converting the graphics into a .chr file, making nametables and palette data, and putting all of that in an engine, that would display it all will take too much time and is pointless.
Also, while sprites could help, you'd have to know where to put them, keeping to the 8 sprites per scanline limitation. And besides, I wouldn't try adding sprites to a picture, that's meant to show what the NES's background graphics could do.

I guess I could make a new version of the NES image, where I'd select which tiles to use which palettes and maybe also select the colors. That will make it look much better.

By the way, how would you go about uploading this to Wikipedia? Do you just edit the article or is permission from the original author required.
Last edited by BioMechanical Dude on Wed Feb 03, 2016 4:35 pm, edited 3 times in total.
Greetings! I'm That Bio Mechanical Dude and I like creating various stuff like movies, games and of course chiptunes!
You can check out my YouTube Channel.
You can also follow me on Twitter.

lidnariq
Posts: 8690
Joined: Sun Apr 13, 2008 11:12 am
Location: Seattle

Re: Graphics Challenge

Post by lidnariq » Wed Feb 03, 2016 4:33 pm

I'd personally really want a better-looking version first, although obviously I won't stop you.

For anything that isn't protected or semi-protected, you just edit it. Usually I make the link while I'm editing the page, upload the images via that UI, and then save the edits to the page.

User avatar
dougeff
Posts: 2598
Joined: Fri May 08, 2015 7:17 pm
Location: DIGDUG
Contact:

Re: Graphics Challenge

Post by dougeff » Wed Feb 03, 2016 4:57 pm

Well, I guess you could 'add sprites' in Photoshop. Thus covering up the harsh attribute table edges.

I don't think its unreasonable to use sprites as BG. Lot's of games have Sprites as various BG elements.
nesdoug.com -- blog/tutorial on programming for the NES

Sik
Posts: 1589
Joined: Thu Aug 12, 2010 3:43 am

Re: Graphics Challenge

Post by Sik » Wed Feb 03, 2016 5:21 pm

Adding sprites would give an excuse for somebody to remove it.

And again, you could probably fix most of it by just changing some of the tiles to the red palette. I mean, one thing is unavoidable attribute clash (like the one next to the forehead), but those are absurdly obviously meant to be mostly red (those that are nearly entirely covering feathers, really).

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

Re: Graphics Challenge

Post by tokumaru » Wed Feb 03, 2016 5:53 pm

dougeff wrote:I don't think its unreasonable to use sprites as BG. Lot's of games have Sprites as various BG elements.

The point of the images is not to show the best possible pictures these systems can produce, they're just meant to show the basic use of the systems' palettes. That's probably why dithering, raster effects, overlays, or any other kind of graphical tricks are not used in any of the images.

User avatar
BioMechanical Dude
Formerly AlienX
Posts: 137
Joined: Fri Apr 18, 2014 7:41 am
Location: Bulgaria

Re: Graphics Challenge

Post by BioMechanical Dude » Thu Feb 04, 2016 7:04 am

I tried making another version for NES. This time I selected the areas myself and picked most of the colors. (Note, the previous image used a more washed out color palette, while this one uses the palette shown in the article)
Image
There's still a lot of attribute clash, but what can you do? Like tokumaru said, the system is not good at displaying photographic imagery. And I don't think tampering with the image itself to improve quality will be the right thing to do in this case.
Greetings! I'm That Bio Mechanical Dude and I like creating various stuff like movies, games and of course chiptunes!
You can check out my YouTube Channel.
You can also follow me on Twitter.

tepples
Posts: 21707
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Graphics Challenge

Post by tepples » Thu Feb 04, 2016 7:36 am

At this point the clash is no more noticeable than it'd be in a Spectrum title screen.

Post Reply