Unity pixel perfect sprite: How to achieve crispy and sharp images

So I was making a little prototype for my new game when I just came across a little problem.

The sprite that I was loading into Unity was just looking too pixelated and not sharp at all.

So I spent a few days to understand and address this problem until I found the perfect solution that I’ll share with you in this article.

Let’s start with the beginning.

Create the sprite in photoshop.

In my example, I’ve created a simple semi-circle shape:

The resolution of this circle is 512*512 pixel, but now let’s load it into Unity and let’s see what are the adjustments that we have to do to make the sprite look crispy and sharp.

This is the settings that you should use in your project:

Now here are the things to keep in mind:

  1. In my case “Generate Mip Maps” is turned off but in case you are planning to zoom in / out a lot then you should tour it on.
  2. Pixel per units, This setting is good for my project which was using a screen resolution of 750×1334 pixels, but feel free to just this number until will fit perfectly you screen
  3. Be sure that the max size of the sprite is at least the same resolution of the sprite (in my case was 512 so 2048 is ok), but not lower.
  4. Make sure your sprite import compression is not set too low (try None to see if it has an effect).

Unity pixel perfect sprite: Other tips to improve the look if your sprite in Unity

Now, if all the above suggestions didn’t make you sprites look good, we have some other adjustment that we can do, so follow me:

Let’s start with the antialiasing settings:

Go to Edit->Project Settings->Quality-> Anti Aliasing and set it to 4x or 8x, but be careful, this will drag your resources down so keep it as low as possible. In my case 4x was enough to help me achieve a slightly better look on my sprites.

Anti-aliasing has the following effect:

With an Anti-aliased tour on, the pixels will result in more smooth and blurry which is something that I really like, but if you want to achieve ultra-sharp images, then you can consider to tour it off.

The second setting to check on the same screen is the following: Edit->Project Settings->Quality->Texture Quality should be Full Res.

Moving forward, make sure your sprite gameObject has a scale of 1 on x, y and z.

Change the camera orthographic size

Now this is another relevant part

remember before when we have set out Pixel Per Unit (PPU)?

Now you need to tell the camera how big we want it to be based on that PPU so that one pixel on screen corresponds with one pixel on our game.

To get that size we just need to do a simple formula:

Camera orthographic size = vertical resolution / PPU *0.5

Once you have that size click in the Main Camera object, and put that value in the Size setting:

In my case for example:

I have a resolution of 750×1334 and a PPU 600 = 1334 / 600 * 0.5 = 1,11

Ok with these little tips you should be able to have nice looking images and build amazing games.

Thanks

Written By
More from Marco

What is a game made of: Definition of a game

We all play games and we all enjoy the time spent doing...
Read More

Leave a Reply

Your email address will not be published. Required fields are marked *