graphics - How do I scale down pixel art?

There are plenty of algorithms to scale up pixel art. (I prefer hqx, personally.) But are there any notable algorithms to scale it down? My game is designed to run at a resolution of 1280x720, but if it is played at a lower resolution I still want it to look good.

Most pixel art discussions center around 320x200 or 640x480 and upscaling for use in console emulators, but I wonder how modern 2D games like the Monkey Island Remake could look good on lower resolutions?

Of course ignoring the option of having multiple versions of assets (i.e. mipmapping).

Answer

I'm currently making a game that has to run on a wide variety of display sizes and aspect ratios, and it hasn't been a very easy process. In addition, if you're making things in pixel art, and you want to keep the pixel art feeling while supporting many resolutions, you're walking into a world of pain, so be prepared.

In my opinion, there are several things you can do (some are exclusive, but others are not)

1. 
   

   Define a minimum resolution, and only upscale (everything) in integer terms with nearest neighbor. That way you can keep the pixel art feeling. I don't think downscaling is a good idea, as you will lose detail, and the entire purpose of using carefully crafted pixel art will be defeated. If your minimum supported resolution is too small for your sprites, either change your minimum supported resolution, or redraw all assets to support this minimum resolution.

   
   


2. 
   

   When you encounter a resolution, or aspect ratio that is not enough to cover the entire screen, extend your game (show more tiles), while keeping the assets intact. You should make your game so it is still playable with the minimum resolution/aspect ratio though.

   
   
   


3. 
   

   If extending the game is not possible, fill the non-game sections of the screen with black; either stripes at the top and bottom, left and right, or a black frame. This is what the iPad does when running iPhone apps in magnified mode. This is also widely used in emulators.

   
   


4. 
   

   Give up on keeping true to the pixel grid. But you then have to stop using pixel arty assets with sharp corners. Then upscale/downscale using bilinear (or optimally bicubic, if your platform supports it) filtering. This is the best choice for maximizing screen usage, while keeping the user experience similar across all supported resolutions.

   
   

For my game, I ended up doing option number 4, and I'm quite surprised at how good it looks on devices ranging from 320 pixels on the vertical (an old Android 2.3) up to 1536 pixels on the vertical (a 2012 iPad with retina display). The original assets are meant for 600 pixels on the vertical (originally for 800x600 display on a Windows PC). Although for subsequent games, I think that a better logical vertical resolution is 720 pixels.

The game uses a virtual 600-pixel high virtual resolution, scaled to the device native resolution with bilinear filtering. This means that all in-code Y-coordinates go from 0 (top of the screen) to 600 (bottom of the screen).

For the horizontal size, I suppose the maximum width is 1080 pixels, which is more than enough to cover even the widest 16:9 aspect ratios. My x-coordinates are centered, so x=0 is the center of the screen, and x-coordinates go from -540 on the left to 540 on the right. I make sure everything fits between -400 and 400 to support the narrowest displays (4:3)

However, if I had to keep the pixel art feeling, I'd certainly use options 1 and 2. Meaning that I'd only scale in integer terms to keep the blocky feeling of pixel art, and design the game so the amount of visible tiles is not fixed and can adapt to any screen resolution/aspect ratio.

So, in order to (not) answer your question. I think that downscaling pixel art is a very bad idea, so you should not do it. There are other ways to support different screen resolutions that will provide better results than simply butchering your carefully created art.