Some time ago I mentioned that we spent some time making our game pixel perfect. We had to do this in order to have our beautiful 2D pixel art game to look good in any resolution. We also didn’t want objects to move or land on half pixels.
By default Unity doesn’t show Pixel Art perfectly, so we need to change some things here and there and implement a small fix. But don’t worry, it’s not hard to do.
Disclaimer: All this tutorial is based on several sources but mainly on this great twitter thread. I also know there are other ways to do this probably better and more optimal, but this is the one I am using after a lot of research.
Let’s see what are the steps to achieve this Pixel Perfect look.
From blurry (default) to pixel perfect
Turn off Anti Aliasing
Anti aliasing is used in videogames to smooth texture borders. You usually want this to be on so that your texture doesn’t look “too pixely” but instead smooth on screen. Here it’s an example of what the anti aliasing do:
Anti-aliasing example
The bottom line is smoothed and blurry. This will make it look ok if we see it in a smaller resolution than this. We’ll notice the pixelated borders if we don’t activate the anti aliasing.
In our case we precisely want to have the oposite so we need to deactivate the anti aliasing. It is activated by default in Unity.
Go to Edit -> Project Settings -> Quality and set Anti Aliasing to Disabled
Quality settings
Be aware that there could be multiple quality levels. In my picture there are Very Low, Low, Medium, High, Very High and Ultra. You need to click on each of them and change their Anti Aliasing setting to Disabled in all of them.
Sprite Import Settings
When you import an image/texture Unity by default sets up some filters to smoothen it when displaying it in screen. Again this may be a good idea for other kind of games, but not for pixel art ones.
You need to go to each sprite you have in the project and change these settings in the inspector:
Sprite Import Settings to change
Change Filter Mode to Point (no filter) and turn off Compression (change it to None as in the image). Again, this needs to be done for every sprite you have in the game.
Pixels Per Unit (PPU)
You can find this setting also in Sprite Import Settings. It is 100 by default. Change it to your tile size in pixels (for example in our case we have 19x19 tiles).
Pixels Per Unit
This will be relevant also for the next thing we need to change.
Camera Ortographic Size
Now that we have setted up our PPU, we 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 ortographic size = vertical resolution / PPU / 2
Once you have that size click in the Main Camera object, and put that value in the Size setting:
Camera Ortographic Size
In our case we have 180px as vertical resolution and 19px PPU so:
180 / 19 / 2 = 4.73684
Important to mention that in our case we render everything in a tiny resolution and we scale up later. Do not put the desired vertical resolution (in our case 720p) but the one that you are rendering.
Snap To Grid Script
This is the last step to make it look pixel perfect. So far it should not look blurry any more but we still have the problem that your objects can be placed in “half” pixels due to scaling up the resolution.
There are different methods to avoid this like using an specific 2D camera plugin or shaders. They are probably more efficient than what I’m using but I found them way more complex than this method.
The idea is that you put a script that adjusts your object to your “tile grid” in LastUpdate().
To achieve that you need to move your sprite renderer to a child object and add that script also there.
Here is the script I’m using:
It checks the parent position and rounds it to be on the grid. So no more half pixel movement!
With all of these settings your game should look fine by now. I hope this helps somebody else tunning Unity for Pixel Art games.