Tiled palette quantization tool

Discussion of hardware and software development for Super NES and Super Famicom. See the SNESdev wiki for more information.

Moderator: Moderators

Forum rules
  • For making cartridges of your Super NES games, see Reproduction.
Post Reply
Rilden
Posts: 21
Joined: Wed Jun 22, 2022 5:34 am

Tiled palette quantization tool

Post by Rilden »

I made a new tool that converts images to 8 palettes with 4bpp. You can try it out here: https://rilden.github.io/tiledpalettequant/. For snes select 16 colors per palette, and shared color zero. Drag an image over the webpage and press Quantize. You can click on the generated images to save them.
tepples
Posts: 22708
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Tiled palette quantization tool

Post by tepples »

I recall you posted some sample output images to the Discord server. I imagine that if you post them here, other readers of this forum may have a better idea of what the tool is for.
Rilden
Posts: 21
Joined: Wed Jun 22, 2022 5:34 am

Re: Tiled palette quantization tool

Post by Rilden »

Here are some generated images:
bunny-8x8-8p16c-s.png
bunny-8x8-8p16c-s.png (35 KiB) Viewed 8270 times
buzzlook-8x8-8p16c-s.png
buzzlook-8x8-8p16c-s.png (22.39 KiB) Viewed 8270 times
FullImage-8x8-8p16c-s.png
FullImage-8x8-8p16c-s.png (52.25 KiB) Viewed 8270 times
monarch-256-8x8-8p16c-s.png
monarch-256-8x8-8p16c-s.png (40.23 KiB) Viewed 8270 times
nightcity-8x8-8p16c-s.png
nightcity-8x8-8p16c-s.png (47.82 KiB) Viewed 8270 times
These are all 8 palette, 4bpp images, not 8bpp.

What is this tool used for?
  • If the image looks good at 4bpp then you can use it instead of an 8bpp version, saving vram and cartridge space.
  • You can convert an image to 4bpp or 2bpp and use it as a background layer.
  • If a tileset has too many colors, you can convert it to fit the snes's restrictions.
  • You can also convert sprites if you arrange them on a 16x16 grid.
  • Give it an image and use the generated palette for your own art, the palette colors are sorted by similarity.
Last edited by Rilden on Sun Sep 04, 2022 3:54 pm, edited 1 time in total.
MSonage
Posts: 22
Joined: Fri May 06, 2022 4:34 pm

Re: Tiled palette quantization tool

Post by MSonage »

Daamnn, I couldn't even notice at first that the plushies photo is already converted.
Really good
tepples
Posts: 22708
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Tiled palette quantization tool

Post by tepples »

Great job so far. Adding a small amount of ordered dither could help reduce banding even further.

Do you plan to add a license to the source code repository?
Rilden
Posts: 21
Joined: Wed Jun 22, 2022 5:34 am

Re: Tiled palette quantization tool

Post by Rilden »

I added a license, but the js files found there are generated by the typescript compiler. I will refactor the source code and will publish it in a new repository.
turboxray
Posts: 348
Joined: Thu Oct 31, 2019 12:56 am

Re: Tiled palette quantization tool

Post by turboxray »

Sorry.. not specifically SNES images, but I did use it on some difficult PCE images (16 colors, 16 palettes, shared color, 3bit RGB elements):

http://www.turboxraypce.org/projects/co ... of98_1.png
http://www.turboxraypce.org/projects/co ... of98_2.png
http://www.turboxraypce.org/projects/co ... of98_3.png
http://www.turboxraypce.org/projects/co ... of98_4.png
http://www.turboxraypce.org/projects/co ... of98_5.png
http://www.turboxraypce.org/projects/co ... of98_6.png
http://www.turboxraypce.org/projects/co ... of98_7.png

Amazing job! I need to update me conversion/pre-prepping app for SNES 15bit RGB range and try this out!
Last edited by turboxray on Mon Sep 05, 2022 5:13 pm, edited 1 time in total.
User avatar
TmEE
Posts: 960
Joined: Wed Feb 13, 2008 9:10 am
Location: Norway (50 and 60Hz compatible :P)
Contact:

Re: Tiled palette quantization tool

Post by TmEE »

These results are really good, only minor manual work needed to make them perfect afterwards ~
Very awesome !
turboxray
Posts: 348
Joined: Thu Oct 31, 2019 12:56 am

Re: Tiled palette quantization tool

Post by turboxray »

Okay I prepped a snes image:
http://www.turboxraypce.org/projects/co ... c_5rgb.png
I have it set to 8x4 tiles, but that just means you need two 32x32 tilemaps (with hDMA) for a 8x4 palette association.
Stef
Posts: 263
Joined: Mon Jul 01, 2013 11:25 am

Re: Tiled palette quantization tool

Post by Stef »

Very useful tool that can be used for many systems ! I linked it in the SGDK readme if you don't mind :)
It would be awesome to have a dithering option, 2x2 mesh at least (larger grid ordered could be useful too but error diffusion not so much as it would eat VRAM quickly). What is the pixel fraction parameter ?
Rilden
Posts: 21
Joined: Wed Jun 22, 2022 5:34 am

Re: Tiled palette quantization tool

Post by Rilden »

Thank you for linking my tool, I appreciate it.
Pixel fraction controls how many pixels are processed per step. With a smaller number the conversion is faster, but the result has a lower quality.
Last edited by Rilden on Tue Sep 06, 2022 7:21 am, edited 1 time in total.
Stef
Posts: 263
Joined: Mon Jul 01, 2013 11:25 am

Re: Tiled palette quantization tool

Post by Stef »

Ok, thanks for the information !
none
Posts: 117
Joined: Thu Sep 03, 2020 1:09 am

Re: Tiled palette quantization tool

Post by none »

It's nice, what kind of algorithm are you using?

And I don't want to sound overly critical of it, (I guess I cant do better myself, image quantization is hard to do in itself and juggling with multiple palettes makes it worse)... but I don't like the jpeg-like square artifacts it produces. Also sometimes it chooses slightly different shades for different palettes which somehow looks odd.

I think the palettes it chooses aren't really optimal, e.g. with the carina nebula image, i'd expect for example that there would be one palette with lots of yellow, one with lots of blue, and one half blue / half yellow for the features around the edge.

I've investigated a little into quantization algorithms and there's one I like called "neuquant", unfortunately its original website seems to be lost but there's a js implementation on github. Here's your test image quantized into 16 bit color with that one.
carina-nebula-nq8.png
carina-nebula-nq8.png (22.29 KiB) Viewed 7873 times
Even though it only uses one palette I think it still looks better...

Maybe if you could do something like force it in neighbouring cells, or overall, to use a few shared palette entries, that would improve the result.
Or try changing the underlying quantization algo itself (don't know how well it can be separated from the palette switching part)

Also when I make more detailed / big pixel art for SNES, i sometimes use multiple layers stacked on top of each other, this would work pretty well with your image, for example, have the yellow part on one layer and the blue one on another. This would be a great additional feature, to automate this would require the algo to somehow detect large scale features though.
Rilden
Posts: 21
Joined: Wed Jun 22, 2022 5:34 am

Re: Tiled palette quantization tool

Post by Rilden »

Can you post my tool's output image you used for comparison? How many palettes and colors per palette did you use? I want to look into this.
Last edited by Rilden on Tue Sep 06, 2022 7:24 pm, edited 1 time in total.
turboxray
Posts: 348
Joined: Thu Oct 31, 2019 12:56 am

Re: Tiled palette quantization tool

Post by turboxray »

none wrote: Tue Sep 06, 2022 6:30 pm It's nice, what kind of algorithm are you using?

And I don't want to sound overly critical of it, (I guess I cant do better myself, image quantization is hard to do in itself and juggling with multiple palettes makes it worse)... but I don't like the jpeg-like square artifacts it produces. Also sometimes it chooses slightly different shades for different palettes which somehow looks odd.

I think the palettes it chooses aren't really optimal, e.g. with the carina nebula image, i'd expect for example that there would be one palette with lots of yellow, one with lots of blue, and one half blue / half yellow for the features around the edge.

I've investigated a little into quantization algorithms and there's one I like called "neuquant", unfortunately its original website seems to be lost but there's a js implementation on github. Here's your test image quantized into 16 bit color with that one.

carina-nebula-nq8.png

Even though it only uses one palette I think it still looks better...

Maybe if you could do something like force it in neighbouring cells, or overall, to use a few shared palette entries, that would improve the result.
Or try changing the underlying quantization algo itself (don't know how well it can be separated from the palette switching part)

Also when I make more detailed / big pixel art for SNES, i sometimes use multiple layers stacked on top of each other, this would work pretty well with your image, for example, have the yellow part on one layer and the blue one on another. This would be a great additional feature, to automate this would require the algo to somehow detect large scale features though.
I take it you have no experience in this kind of stuff. It's not trivial in the least. I've written my own, refined it over the years, and I gave up on trying to make it "perfect". The best it does is get really close, and then lets the artist finish it off with manual touch ups. This is bar far THEE most impressive attempt I've seen yet - maybe only matched by Nitro Character Studio for GBA development that does this (and good luck finding that official app from Nintendo). If you want to use two layers, simply write your own app that splits ALL colors in tiles by half (regardless of the amount), and running the "upper" and "lower" through this app. If you want to look at how the app is running, just look at the repo. All the source is right there.
Post Reply