Game Development Stack Exchange is a question and answer site for professional and independent game developers. It only takes a minute to sign up.
Sign up to join this community
How do I keep the sprites in my game nicely pixelated on screens of all sizes and resolutions? I use nearest-neighbor texture filtering when resizing pixels, but this works well only at really high magnifications, otherwise the pixels get distorted and uneven.
I understand the limits of nearest-neighbor scaling and I wouldn't be asking this except there are so many games that use pixel art without this problem, so I figure there is some trick I don't know about.
For one, nearest-neighbor will result in pixel perfect scaling only if it's used to upscale in integer multiples. Apart from that, you should not be conducting any scaling operations on your view/projection matrices. If you set your view to match the dimensions of the screen, and your projection matrix to be orthographic with dimensions that match the viewport, your "world" coordinates will be true on-screen pixels. Your viewport can resize to fit different screens, but it shouldn't actually impart a scale factor, you should just show more or less of the game world. Further, you should probably disable AA, and remember that in OpenGL the center of each pixel is located at (.5, .5), not (0, 0).
Take a look at these related questions:
https://stackoverflow.com/questions/10040961/opengl-pixel-perfect-2d-drawing
https://stackoverflow.com/questions/16511374/pixel-perfect-projection-matrix-in-opengl
You need to average the sprite pixels which are visible beneath each screen pixel. The sprite pixels can be sampled "nearest", but to move smoothly in subpixel increments on the display, you need some kind of oversampling.
If you're using OpenGL, you can do this in your shader by averaging 4, or 9 or more sprite samples offset near each fragment (calculated to be within a screen pixel). Alternatively, render your scene at 4 or 9 or more times the screen size, and then reduce with averaging. (This may be available directly on your platform, or implemented as a shader, but run just once at the end instead of per sprite.)
Which one is more performant depends on the scene, number of sprites &c.
-- EDIT: One more approach -- Make your sprites pre-magnified, pixelated but nice and big, and use linear interpolation. That way when a (big) "pixel edge" is under a fragment, you'll get a blend.
All of these methods run risk of washed-out strobing, if sprite pixels are close in size to screen pixels, or if they match but offset fractionally. I think the a good rule would be, if sprite and screen pixels match exactly and are aligned: Looks good. Else, sprites should be scaled at least 2.0+ and fractionally averaged, to guarantee at least one fully-colored screen pixel per sprite pixel.
You'll want to look into pixel-art upscaling filtering algorithms (http://en.wikipedia.org/wiki/Image_scaling). These have been specifically designed to upscale pixel art, having the properties of (1) retaining the original color palette (aka. no blurring) and (2) removing jaggies (aliasing that occurs due to nearest neightbour sampling).
Some names of algorithms are: Eagle, 2XSAI, Super Eagle, Super 2XSAI, Scale2X, Scale3X, HQ2X, HQ3X, HQ4X, 2XBR, 3XBR, 4XBRZ. They are more or less ordered from simple to complex, with 4XBRZ being my favorite in appearance.
They all work with integer magnification factors (2, 3 and 4). The usual approach for obtaining non-integer magnifications is to take the nearest integer larger than the desired magnification factor and downscale the resulting image (using either nearest neightbour or linear interpolation). An alternative is to take the nearest integer smaller than your desired magnification and add borders around the image. The choice between these two approaches comes down to the style of your pixel art and personal preference.
Edit: I ran your image through an implementation of Eagle, Scale2X and Scale3X I made a while ago. Here are the results in order (magnified by x2 so you can better see what the algorithm does to the pixels). Scale3X is the most complex algorithm, and it also looks best in my opinion. There are way more complex algorithms in the list I mentioned above though, so you'll want to experiment with more of them.
You need to apply a low pass filter before the down-sampling (down-scaling) occurs on the low resolution screens.
I have used simple gaussian blur (convolution transform) with good results:
This was done with a blur radius of 1 pixel.
