Blog

Pixel Art Scaling

April 17, 2014

If you've ever tried making a game with pixel art, you have likely come across the dilemma of how to display your graphics nicely at various resolutions. Suppose you are using OpenGL. Drawing a pixel image at 100%, 200%, 300%, etc. is easy to do well since you can just use nearest filtering. However, what if you need to draw your image at, say, 160% or 240%? Using nearest filtering will result in chunky-looking images, since some parts of the image are expanded more than others. On the other hand, using linear filtering will result in blurry images.

So how do people deal with this problem? It seems like many people have given up on allowing abnormal resolutions and require the scaling to be a multiple of 100%. If you look up "pixel art scaling algorithms," you can find a variety of sophisticated algorithms for scaling pixel art, mostly for use with emulators. If you're using OpenGL 2.x, you could probably design a shader to do one of these. However, if you only have access to OpenGL 1.x (e.g. if you are developing for older Android devices) or you don't want to learn how to write a shader, then this will not help you much.

But fear not! If you have memory to spare, I have discovered a simple solution to this problem. I call this "hybrid" filtering, since it is a mixture of nearest and linear filtering. All you have to do is

  1. Open your images in your drawing program of choice, scale them to 200% using nearest filtering, and save.
  2. When you draw your images in-game (e.g. with OpenGL), use linear filtering (for both min and mag filters) and scale to 50% of the scale you would normally use.

(ship scaling)

It's that simple! As you can see from the graphic, using this hybrid approach looks pretty good at any resolution. If you want, you could probably implement a shader in OpenGL 2.x to do this and avoid storing the larger images in memory.