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. : All this tutorial is based on several sources but mainly on . 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. Disclaimer this great twitter thread 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 and set Edit -> Project Settings -> Quality 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 and change their Anti Aliasing setting to Disabled . click on each of them 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 to Point (no filter) and turn off (change it to None as in the image). Again, this needs to be done you have in the game. Filter Mode Compression for every sprite Pixels Per Unit (PPU) You can find this setting also in Sprite Import Settings. It is 100 by default. Change it to (for example in our case we have 19x19 tiles). your tile size in pixels 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 object, and put that value in the Size setting: Main Camera 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 and add that script also there. move your sprite renderer to a child object 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.
Share Your Thoughts