Unity Pixel Art Tips 2018

Are you working on a Unity project, but your Pixel Art sprites look blurry and distorted? Don’t worry, follow this little tutorial and those pixels will look BEAUTIFUL!



(Reblog to save a dev life)

(This is based on a Twitter thread I did some months ago)

Turn off Antialiasing

After creating your 2D project, go to

Edit -> Project Settings -> Quality

and then:

Anti Aliasing -> Disabled

(If you have more than one Quality Level (Low, High, Ultra…), make sure to disable it on each one)

Sprite Import Settings

Go to each of your sprites, and change these settings:

Filter Mode -> Point (no filter)

Compression -> None



Pixels Per Unit (PPU)

You can use the PPU that you want, but for Pixel Art games it’s often recommended to use your tile size in pixels (from Design point of view). On this example, we will use a PPU of 16.

So for each sprite settings:

Pixel Per Unit -> 16



Camera Orthographic Size

One sprite pixel needs to equal one screen pixel. To achieve this, change the Orthographic Size of your camera:

Ortho size = Vertical Screen Resolution / PPU / 2

In this example, our resolution is 480x270 and our PPU 16:

270 / 16 / 2 = 8.4375



Snapping to Pixel Grid

Now your game is looking good on you base resolution. But when it is opened on larger resolutions, sub-pixel positions appear!

To prevent this, all you need to do is snapping your individually sprites to the pixel grid. You can do this by using a child object that contains the sprite renderer and attaching a script that rounds its position on LateUpdate():

position.x = (Mathf.Round(parent.position.x * PPU) / PPU) - parent.position.x;

position.y = (Mathf.Round(parent.position.y * PPU) / PPU) - parent.position.y;



Snapping Alternatives

Previous solution is good for starters, but if you’re working on a big project, it’s better to use a more advanced technique.

· Sprite Shader: Snapping your pixels to the grid using a shader. Here you have a very nice example about how to do it by Talecrafter :

https://twitter.com/talecrafter/status/783193807982628864

· Render Texture: This is a great solution for both snapping your pixels and supporting different screen resolutions. Spennerino did an amazing job implementing it and sharing the result:

https://twitter.com/Spennerino/status/703715469862113281



And that’s all. Hope you find it useful!

<More works> <Ask me anything>

