Davitsu 🏮 Profile picture
Jan 25, 2018 12 tweets 5 min read
⭐️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
 

Keep Current with Davitsu 🏮

Davitsu 🏮 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

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 two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(