Profile picture
Davitsu 🏮 @Davitsu
, 12 tweets, 5 min read Read on Twitter
⭐️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!

(RT to save a dev life)

#unity #pixelart #gamedev
🔸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;
That's all for now! Hope you find it useful. Let me know if you have any feedback, I will update this thread if I find more tips ☺️
I'm very happy you find this helpful! Don't forget to check comments to find more tips and alternative solutions 😃
Some of you guys are arguing that the Snapping Script solution is good for starters, but if you're working on a big project, it's better to use a more advanced solution. And I think you're right!

Let me share with you a couple methods I found through the internet:
🔸Sprite Shader

You can use a shader to snap your pixels to the grid. Here you have a very nice example about how to do it by @talecrafter. Don't forget to check his work.

🔸Render Texture

This is a great solution for both snapping your pixels and supporting different screen resolutions. @Spennerino did an amazing job implemeting it and sharing the result, check it out here:

Missing some Tweet in this thread?
You can try to force a refresh.

Like this thread? Get email updates or save it to PDF!

Subscribe to Davitsu 🏮
Profile picture

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member and get exclusive features!

Premium member ($3.00/month or $30.00/year)

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!