13
\$\begingroup\$

I am struggling to understand the basics behind pixel art in Unity.

I understand what a unit is, and that if I draw my sprite with 16x16 pixels, I should set PPU to 16.

Take stardew valley for example, in the image below you can clearly see that the player is not square. The creator of the game said he made everything in 16x16, but then how is there so much detail in the characters? Surely you do not patch several 16x16 squares together to make a character (as you would with a tilemap)?

enter image description here

What is the "common" way of dealing with things that are not square, like the characters in the image. Do you just make 16x32 sprite and set PPU to 16? Wont that make it look a bit weird next to 16x16 sprites? Do you generally pick one size (i.e 16, 32, 64) And then stick to that for everything in the game?

The visual Issue I've seen is this, where a 32x32 sprite looks very out of place (too sharp) next to a 16x16 sprite.

enter image description here

So I am wondering, how do you mix sizes wihout getting this effect where one image looks much sharper than the other. If I for example wanted a character to be 16x32, or any non-square value, when my tiles are 16x16

\$\endgroup\$
6
  • 3
    \$\begingroup\$ PPU has nothing to do with the texture dimensions of your sprites, it just decides the scale at which they're displayed relative to your world coordinate system. Two sprites with the same PPU will show the same pixel density (ie. the displayed size of each pixel block will be the same from one sprite to the other when viewed straight-on), even if the images have completely different sizes. So I'm not sure what you mean by "won't that make it look a bit weird" — can you elaborate on exactly what visual issue you've observed? \$\endgroup\$
    – DMGregory
    Commented May 25, 2017 at 19:28
  • \$\begingroup\$ @DMGregory Sure, let me upload an image \$\endgroup\$
    – Green_qaue
    Commented May 25, 2017 at 19:29
  • 1
    \$\begingroup\$ The effect shown in your example screenshot will happen if you put two images together with different PPU values (or if one image has its pixels doubled/tripled in the texture itself, or you've applied a scale to one image but not the other). If you stick to one consistent PPU value and don't scale your sprites then you'll keep a consistent pixel density \$\endgroup\$
    – DMGregory
    Commented May 25, 2017 at 19:39
  • \$\begingroup\$ @DMGregory So if my tiles are 16x16, and I want a character with more detail (as you can see the 16x16 character above has very little detail), for example 32x16, I should create a 32x16 sprite, and keep PPU at 16 (same as tiles)?. Or for example if I wanted an elephant, then maybe that would have to be 64x128, would I then set that to 16 PPU as well? \$\endgroup\$
    – Green_qaue
    Commented May 25, 2017 at 19:48
  • 1
    \$\begingroup\$ PPU is how many pixels fit in one world unit. If you always want your pixels the same size, then you should always use one consistent PPU value. (That means a 16x16 shrub and a 64x128 elephant both at 16 PPU will both show the same pixel density, and the elephant will cover 32 times more screen area than the shrub does). Is that all you were wondering about? \$\endgroup\$
    – DMGregory
    Commented May 25, 2017 at 19:52

1 Answer 1

22
\$\begingroup\$

Summarizing the points above, what matters for two pieces of pixel art to match is that their pixel density (texels per screen area / world unit) is the same.

Using some sprites from Stardew Valley as an example, we can see that even though the sprites have different texture dimensions, they match up on a consistent grid because each pixel is drawn the same size.

Example showing two different sized sprites at the same pixel density.

If we think of the size of the plant as one tile / one unit of world space, we can see this unit spans 16 pixels horizontally and vertically. The character, having twice the height of the plant, also covers twice the number of tiles / world units, so the density of pixels stays the same at 16 pixels per world unit.

For Unity specifically, it exposes this for you as a Pixels Per Unit setting in the Sprite import settings inspector. As long as you use one consistent number here for all of your sprites, Unity will automatically handle drawing them at the right size in your world to keep this pixel density — even if they're odd sizes and not power-of-two or exact multiples of your tile size. So in this example, both the shrub and the character, and everything else in the game would use a PPU OF 16.

The exact number you choose isn't a big deal, it's consistency that matters most. If we wanted each tile to span 2 world units, so that when level editing we can easily snap to tile corners (odd numbers) and tile centers (even numbers), then we'd use a PPU of 8 instead for all our sprites.

Just don't turn it down too low. You'll see some articles out there recommending a PPU setting of 1, meaning a 256-pixel sprite will span 256 world units. While this might not sound alarming, systems like physics are tuned assuming most of your gameplay will be happening on scales of tenths to tens of units, and making your scale too large can cause them to behave poorly. Try to choose a number of pixels that's meaningful in your gameplay, like the width of your character or your tile. This will also make your math easier for programming & level design (eg. "I want this character to dash 3 tiles right, so that's x + 3.0f")

Note that scaling a sprite, UI image, or its parents using transform properties will distort them away from this consistent pixel density, so be very careful with scale properties, and keep most or all of your scene at a scale of 1.0 for simplicity.

One last caution is that none of this determines how big your sprites actually end up on your screen - that's determined by the size of your game window / screen, and the size/FoV/angle of your camera. For pixel perfect 2D, you'll also need to ensure that the height of your window is a whole-number multiple of the number of sprite pixels your camera sees (orthographic height of camera x 2 x PPU)

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .