Dev Blog #6 – Pixel Art, Screen Resolution, and Zooming

One of the joys of a good construction/management game is being able to zoom in and out to marvel at your creation at varying levels of detail and activity.

One of the joys of good Pixel Art is the crisp, pixel-perfect lines and details.

These two things do not go well together.

To understand why, you have to understand one of the fundamental constraints of working with Pixel Art in games:

You can’t ever, EVER, cram more than one pixel of art into a single pixel of screen.

If you try, you’ll see odd visual effects as the game engine tries to decide which one of the two (or more) possible pixels to display in the single screen pixel available. It’s especially noticeable with sprites that feature grid-type patterns.

Above, the solar panel on the left is using the correct pixel density for the screen. The panel on the right is only out by 2.5%, but the difference is obvious.

So how can you overcome this problem? Especially when you don’t know the resolution of the screen your players will be using?

With MATHS, of course!

Luckily for us there’s a handy, tried and tested formula for figuring out the orthographic size (kind of like the zoom-factor for a 2D camera) that your game camera should use. It looks a little something like this:

Orthographic Size = ( (Height of screen in pixels) / ( (Zoom Factor) * (Pixels-per-unit) ) ) / 2

Most game engines will allow you to get the screen height fairly easily. In Unity it’s as simple as “Screen.height“. Pixels-per-unit refers to the number of pixels being rendered for each game-unit. Think of game-units as a measure of distance, so one game-unit could be equal to one metre in your game. A pixels-per-unit setting of 32 would therefore mean you’re fitting 32 pixels of sprite into every one metre of distance. This number will vary based on how you’re handling size/distance scaling in your game.

The Zoom Factor can be used for zooming in (making the sprites bigger), but not for zooming out (making the sprites smaller). A Zoom Factor of 1 gives you a one-to-one mapping of art-pixels to screen-pixels. You can increase the Zoom Factor, but only by powers of two CORRECTION: the Zoom Factor can in fact be any integer (whole number). I got this mixed up with the below section about shrinking sprites. Thanks to Reddit user /u/logibutt for pointing out my mistake! A Zoom Factor of 2 will double each art-pixel onto a 2*2 grid of screen-pixels. A Zoom Factor of 4 will quadruple each art-pixel onto a 4*4 grid of screen-pixels, and so on.

Pixels can easily be doubled without loss of information.
Pixels can easily be doubled without loss of information.
But shrinking images with single-pixel details will result in losses.
But shrinking images with single-pixel details will result in losses.

This means that when working with Pixel Art, there is an inescapable Minimum Zoom Level that corresponds directly to the resolution of your sprites. The more pixels contained within your sprites, the less you can allow your player to zoom out. The only way to get around this is to create half-resolution versions of all your sprites, and swap them in when the player zooms to half the true size of your sprites. A half-resolution sprite will allow you to use a Zoom Factor of 0.5, quarter-resolution 0.25, and so on. This works well but involves a lot of extra artwork, so if you’re going to go this route make sure the extra zoom level is really important enough to justify the effort/expense.

So if you’re going to have zooming in your game, make sure to design your Pixel Art with these limits in mind. Higher resolution sprites may allow you to include more detail, but they’re going to take more screen space.

And that’s the other joy of working with Pixel Art:

Less is very often more

Leave a Reply