Pixel art struggles.

I’ve always loved drawing pixel art and I’ve been using 3D unity for a few years, but I’ve never been able to figure out how to use unity for pixel based games. Would someone be willing to help me out with the camera setup? I’ve tried using unity’s pixel perfect package and following a bunch of YouTube tutorials but no matter what I do my pixels always come out distorted, or they twitch as the camera moves across the screen. I think it’s an issue to do with my camera size? Or possibly my screen size? Maybe either of those are not in the right ratio for the pixels or something?

I’ve been trying to fix this for years and keep starting pixel-art projects then giving up on them because I can’t figure it out. I’ll be willing to send anyone $10 over PayPal who would be willing to show me how to do the basic setup.

Thanks

Hey @Seeder !

I’ve been in the process of making my first real 2d unity production for the last year and a half or so. Happy to chime in what I have learned so far, as I’ve run into my fair share of pixel perfect issues (and still do)! There are tons of resources out there, I’m going to try and list out some of the ones that I’ve found most useful with a bit of summary.

Regarding Static Distortion:

You import your sprite into the project, and right of the bat it looks distorted/blurry. This is likely because you import settings are wrong. Definitely make sure you’re importing your sprites with the correct settings:

  • Filter mode changed to ‘Point’

  • Compression Changed to ‘None’

  • Make sure your max size is at least as big as whatever you’re importing (this one gets me often)

See: 2D Pixel Perfect: How to set up your Unity project for retro 8-bit games

Regarding PPU / Camera Size:

Your PPU defines, well, the number of pixels that fit in one unit of your game. So for instance a PPU of 16 means that in one world unit squared, there are 16 x 16 pixels. This of course means that there is a tight relationship between your PPU and the orthographic camera size (and by extension, the resolution you choose to display your game):

  • If you have a PPU setting of 20, and your orthographic camera size is 9 (remember, the orthographic size is half the height of your camera display in world units), then you’re showing 18 world units vertically (9 * 2).
  • Each world unit is 20 x 20 pixels (our PPU), and so 18 world units high means 18 * 20 = 360 pixels vertically.
  • This means that as long as the resolution of your window is some multiple of 360 pixels tall, then each pixel in your sprite will match perfectly with the screen pixel. Make your window some fractional multiple of 360, and you end up with awful awful stretch distortions as your sprite moves across the screen (This is because nearest neighbour sampling will sometimes snap at both the left and right side of your sprite when it shouldnt due to the mismatch in scale).

See these fantastic resources:
https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/
https://stackoverflow.com/questions/35785291/getting-giggly-effect-when-slowly-moving-a-sprite/35829604#35829604
https://gamedev.stackexchange.com/questions/158015/what-ppu-should-i-choose-for-assets-aimed-for-different-resolution

Other Mentions:

Some other settings that can help (although I’m honestly less informed about) are to try turning off anisotropic filtering and anti aliasing.

How your camera moves can also have some unwanted shimmering effects too. Some have suggested using the pixel perfect camera with cinemachine in 2019.3 to help snap cleanly between each pixel (not sure how well it works as I haven’t gotten around to updating my unity yet).

As you can see, I’m still sort out some issues of my own still: 2D Sprite Jitters

But for the most part, the above settings / considerations have helped me out greatly, and hope they’re of use to you too!

5 Likes

Thanks for the reply! I’ve tried adjusting the PPU of everything (all my sprites) but I can’t seem to find a way to set the global PPU. I also made a video to show what I’m talking about in more detail. Could you please check it out and let me know if you see any issues? Thanks heaps for taking the time to help, this has me pretty discouraged.

https://www.youtube.com/watch?v=ore6nYnJ2ZQ

Hi Seeder,

To answer your question about setting global PPU: you will have to make a preset of the texture import settings with all the parameters set to whatever you need (PPU, TextureType, Sprite Mode, etc…) and then if you select that preset in the project and look at the inspector, set it to be the default preset for texture imports. Any assets brought into the project from now on will have those settings. As far as I know, for all existing assets you’ll still have to multi select and do them manually, but I could be wrong. See this:
https://docs.unity3d.com/Manual/class-PresetManager.html

The distortion you’re seeing with some pixels being wider and others being narrower is all too familiar, and seems to me that theres a mismatch in the combination of your Camera Size, Display Resolution and PPU. Have you taken a look at this link I mentioned above? https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/?_ga=2.215740946.481957262.1575307246-154437844.1559762193

This equation is what you’ll be concerned with:
Orthographic size = ((Vert Resolution)/(PPUScale * PPU)) * 0.5

I can already tell that your camera size of 4.06 is probably not right (although Im not sure what PPU you’re using for your sprites). Let’s go through an example together. From your video, I can tell that you’re using a game window display of 1200 x 800. Lets stick with that through our example. I’ll assume you’re using a PPU of 20.

At a vertical resolution of 800, a PPU of 20, and a PPU Scale of 1 (for now), you’ll need an camera orthographic size of :
((800) / (1 * 20)) * 0.5 = 20

So try setting your camera size to 20 and zoom in. Hopefully you should see all pixels/texels of your sprite at equal proportions. You’ll probably find that 20 is a bit too zoomed out though. Simply adjust the PPU scale in that formula to get closer to a camera size you want. For instance, a PPU scale of 4 would result in:
((800) / (4 * 20)) * 0.5 = 5

That should solve your issue with distorted sprites. Hopefully the pixel perfect package helps with the twitching (as show with the hearts in your video). Again, make sure to adjust the example above to whatever PPU you actually have your sprites set to.

4 Likes

@ShervinM Thanks It helped me alot.

1 Like

@ShervinM Hi, this has helped a lot, however I have a question. In the sentence I quoted you state the the Cam size, Display Resolution and PPU have to match. I am currently creating a Platformer and I need a zooming effect. I was hoping to acomplish this by changing the ortographic size. If I undrestand correctly this method wont work. Could you give me any tips on how I may find a work around?

Thanks

1 Like

ShervinM you are my savior

1 Like

Please use the Like button to show appreciation rather than necroing threads for everyone.

Thanks.