Pixel Perfect rendering in Unity

(This blog post was originally published at Lunar Labs)

It's common to find developers frustrated with pixel art in Unity, at first, it seems so difficult to get the sprites to render as pixel perfect, right?
So I decided to write a very short guide, with all things that you need to setup in order to get this working without using any third-party assets!

First, let's make sure all our sprites in Unity have the proper settings:

What matters here is the following:

Now, attach the following script to your camera:
 

using UnityEngine;
[ExecuteInEditMode]
public class CameraFix : MonoBehaviour {
    [Range(1, 4)]
    public int pixelScale = 1;

    private Camera _camera;

    void Update()
    {
        if (_camera == null)
        {
            _camera = GetComponent<Camera>();
            _camera.orthographic = true;
        }
        _camera.orthographicSize = Screen.height * (0.005f / pixelScale);
    }
}

And that's it!

If you are curious what that's 0.005f means, well, multiplying by this number is the same as diving by 2 (half of the screen) and then diving by 100 (pixels per unit).
So if you need to change the pixels per unit for some reason (I dont recommend it), just change the formula to
 

Screen.height * ((0.5f * pixelsPerUnit) / pixelScale);

PS: As a bonus I added that pixelScale slider, that you can change in the inspector. It's basically just a zoom in the pixel art, you can keep it a 1x for making sure you art appears in the original size.

Still not working?

Check if you did any of the following mistakes:

Pixel perfect rotations

Rotations will always look terrible, especially you are using a scale other than 1x in the CameraFix script.
There is a way get pixel perfect rotations though, it requires a more complex setup:

By doing this setup, the scene is first rendered to a texture at 1 to 1 scale, which guarantees that any rotation is done without breaking the pixel grid (which looks horrible but I've seen tons of indie games doing it...).
After that, we have the whole scene stored in a texture, we can do whatever we want it, and the obvious thing is to output it to the screen, using an UI image.
By the way, if you are fan of screen shake, with this setup you can just offset the UI image a few pixels randomly and you get instant screen shake, without touching the camera at all.

Pixel perfect fonts

Ahaha, it's simple, don't use Unity builtin text.
Well, you can disable smoothing in the font import, make sure you are using a bitmap TTF font, plus make sure you are using a font size that matches the bitmap designed font height.
If you are lucky, then that might be enough.

The best thing here is to make a custom pixel-art font, and render text as sprites. There are free tools like bmfont that can generate a font atlas for you in PNG format, along with a XML file containing the characters position in the atlas. It's perfectly doable if you have any kind of programming experience.
Another free alternative is this site that lets you design a custom font pixel by pixel.

Also, please, never mix pixel art with a pixel size with fonts with a completly different random pixel size, it looks so terrible and yet, I find tons of indie guys doing it!

The aspecto ratio dilemma

By running the game at different resolutions, you will get different view areas for your game levels.
Why, well, because different resolutions will have different aspect ratios.
This can be a problem in multiplayer games if it gives advantages to players with more resolution, and can also be a problem if you are designing a game that has art done at specific fixed resolution / aspect ratio, like a pixel art background.

This one of the biggest hurdles in doing pixel art in Unity, and I've seen many developers quit at this point and just go back to Game Maker or something else that makes 2D easier.

I here will list a couple of solutions:

Subpixel camera scrolling

If you did the render texture setup for better control and a more retro look, you now understand that the camera movement looks terrible when rendering the UI image as 2x or 4x or mostly anything else. Because that scale number now is equivalent to how many pixels the camera skips with every step, ouch!

There is a solution though, take the fractional part of the camera position, multiply that fractional part by the scale (aka number of skips) and you get a pseudo subpixel offset that you can apply to the UI Image, which will fix the pixel skipping. Good luck getting this to work, its not easy!

I hope this tutorial was useful for you, follow me in Twitter for more cool stuff!