0
\$\begingroup\$

So I'm trying to make my pixel-art game handle multiple resolutions. I've stumbled upon this article: https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/ but I don't understand it completely.

Let's base my question on the example from this article.

My base resolution is 1024x768, PPU is 32 and camera ortographic size is 12. How can I calculate the PPU for assets which will handle 1080p resolution?

In the article, the author took a value of 48. But simply I can't understand where did this value come from.

I'd really appreciate if someone would explain this to me.

\$\endgroup\$
2
\$\begingroup\$

At an orthographic size of 12, your camera sees 24 units of the world vertically.

At 32 PPU, each of those units corresponds to 32 sprite texels.

So, putting that together, your screen has \$24 \times 32 = 768\$ sprite texels from top to bottom, the same as the number of rows of pixels on a 1024x768 resolution, helping ensure you get crisp 1:1 rendering.


Now we want to get an analogous look at 1920x1080.

There's a little quirk here, in that they're no longer the same ratio. 1920x1080 is a 16:9 resolution, while 1024x768 is a 4:3 resolution, so you won't achieve an identical layout on both (not without a lot of pillarboxing). So we need to make a judgement call about how much extra world we want to show at the sides, versus how much we want to zoom in vertically.

Let's assume we still want to see exactly 24 units of the world vertically (ie. we don't want to change our camera at all, and we'll just accept that players on wider screens see more to the left & right).

\$1080 \div 24= 45\$, so if we make each unit of the world 45 sprite texels (ie. PPU = 45), then we'll still get an exact 1:1 alignment with the screen's pixel grid.

That's not the same number as the article chose though. So what happens if we pick 48 instead like the article did? \$1080 \div 48 = 22.5\$ so we can't quite fit 24 of these sprite units vertically on the screen anymore. We'd need to zoom in our camera slightly, to an orthographic size of \$22.5 \div 2 = 11.25\$. We can still see 93.75% as much of the height as we could at 1024x768, so the author probably felt this was a pretty good compromise, and let them keep their sprite size a multiple of a power of two (\$48 = 3\times16\$).

With 32-pixel sprites, we can also hit 720p and 1440p (with pixel doubling) at this same 11.25 orthographic size, so it helps us keep a consistent camera framing across a range of popular screen resolutions.

We could pick any PPU we wanted and come up with a corresponding orthographic camera size to keep it in pixel perfect alignment with the screen grid. eg. If we use a PPU of 50, then \$1080 \div 50 = 21.6\$ so we can make this work with an orthographic size of \$21.6 \div 2 = 10.8\$


So you can see there's not just one true PPU to use for a given set of resolutions - it depends what you want to prioritize, and what numbers look nice for the way you're handling your sprites (eg. maybe you always want even numbers so you can do tiling checkerboard patterns)

Whatever number you choose, you just want to ensure that:

$$k \times \left(\text{orthographic size} \times 2\right) \times \text{PPU} = \text{vertical screen resolution}$$

for some integer \$k = 1, 2...\$ - this will ensure you get an integer ratio of pixels per sprite texel so your pixel art stays sharp.

\$\endgroup\$
  • \$\begingroup\$ Again you and again an awesome response! How can I repay? :) I guess I just need to understand all those quirks in the Unity + pixel-art composition and finally create some awesome game. Will that be a satisfying return? :) \$\endgroup\$ – sarneeh Apr 30 '18 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.