This is something I've been wondering about for a while - are there any algorithms out there to scale pixel art down?
I'm sure we all know about the upscale versions on the Wikipedia page on Image Scaling.
I would have thought something like nearest neighbour resampling to get the colour pattern right, and then redrawing the outline, or high-contrast areas, over the top. Is there anything out there or am I going to have to learn how to do this myself?
Thanks!
This process is known as "downscaling". There are many algorithms for this. Which is appropriate will depend on many factors, such as performance requirements and the nature of the images you are scaling.
See e.g. https://stackoverflow.com/questions/875856/interpolation-algorithms-when-downscaling for further information.
While you can use Supersampling to downsize, you'll quickly notice that you receive "averaged grey stuff". Human perception is based on edge contrasts and patterns and exactly those are lost with naiive "averaging".
Perfect downsampling would need "semantic" knowledge of the object properties. In other words: which properties are important to "attenuate" in down-sampled image to preserve perception of the object. Artists do this intuitively!
Amongst lower-tech methods you could try: Lanczos filter or B-splines. These filters preserve some of the sharpness. But there are tons of other filters that may work depending on type and relative sizes of the features in your images.
This is really towards the realm of non-photorealistic rendering (NPR). I think it's awesome -- it would have been so great if I had such a software many years ago.
But I used to do pixel art ages ago, and I don't think you can actually get this kind of pixel art look with any ordinary downsampling algorithm. It's often going to end up looking like that mipmap example from the same wiki page:
You might be able to get a sharper image, reduce the colors, get a slightly toonish look. But it's really hard to make it look like it was actually designed for that resolution through downsampling alone. That can apply even if you have a cartoony graphic with fat outlines.
It's funnily much, much easier to scale up than scale down with pixel art, since pixel-art tends to be carefully drawn for the low-res style (the artist isn't simply rendering smaller, he's changing the way he approaches the line art, e.g.).
Vector Graphics
If you're doing this to generate lower-res pixel content that looks hand-drawn rather than trying to do this in a realtime setting, what I recommend instead if you have a high-res image is look into algorithms that convert the higher-res artwork into vector graphics, detecting outline paths and broad regions of flat color and things of that sort.
https://en.wikipedia.org/wiki/Image_tracing
I really think that gives you the ideal starting point, plus it's also potentially the most flexible since it gives you the ability to rasterize and play with different styles. Downsampling wants to focus on crunching pixels down no matter how elaborate, while capturing to vector graphics gives you something to work with which resembles like a "list of things to draw".
Then you can rasterize the vectorized shapes/paths at a lower resolution with a crisp line and curve style similar to how pixel artists draw.
We generally want deliberately aliased line rasterization in this case with crisp, 1-pixel stroke outlines.
For example, if we tried to scale this wrestler guy down to half the size, the lines actually won't get thinner. The artist would still use crisp, aliased, perfectly-coordinated 1-pixel outline strokes if he was to draw this guy at half the size. The actual style of the artwork would change and get more cartoony when drawn at half the scale, and primarily because the stroke thickness won't change. That's why I recommend the vector graphic approach, since down-sampling will want to use a sub-pixel outline if you tried to shrink this. The line art is the most critical part of all.
Always Crisp, Aliased, 1-Pixel Strokes Independent of Resolution
You might have noticed this phenomena playing old video games which were ported from a more capable graphics hardware to a less capable hardware (ex: arcade to nintendo), where the artists had to use lower resolution graphics. The way they drew the graphics for the less capable hardware would actually change in style to take on a more cartoonish look, and that's because the artists were sticking to that crisp, aliased 1-pixel stroke style which dominates pixel art (since the thickness of the line is absolute and unchanging even with the lower-res artwork, the lower-res artwork looks more cartoonish). The feeling of the overall piece changes based on the resolution it's drawn, which might make it seem hopeless to automate the process, but I actually think you can do a very nice job (better than any tools out there) if you can capture the strokes as paths through a vector graphic first.
Shading is actually the easiest part because there you can potentially just downsample and get a good result, since it's all just soft, fuzzy edges.
It's the crisp edges/outlines that are hard to preserve. It's not so much about sharpness as artistic intent and how the artist would communicate such an intent at this low-resolution scale. If you have a reasonable vector graphics source, I think you have the best chance since you're rasterizing the low-res result instead of trying to downsample the high-res result.
So this is kind of deviating from your original course, but I'd recommend looking at it this way. If you try this, maybe your first major goal is just trace the outline into an vector graphic and then try to rasterize the vector at a really low resolution with crisp, aliased lines/curves. If you can start doing that line work part reasonably, it's already ground-breaking and the next step can be to capture some flat color. Finally, shading will be quite easy in comparison, and there you might just downsample and composite/blend.
