Another quality problem with .png GUI graphics

Questions & Answers
1

Hi, guys:

I’ve seen a lot of questions like this, but none of them actually resolve me problem. I have drawn some buttons on Inkscape in png but when i use them in unity they look terrible, specially when the device has a small screen (mobile).

I’m using:

Texture Type: GUI
Filter Mode: Trilinear

Override for Android checked
Max Size 1024
Format: True Color.

The result is this:

This is the original png, quite smooth, as you can see:

[22484-button+original.png|22484]

And this is the look it has in unity:

[22485-button+real.png|22485]

As you can see the black borders look like hell.

Do you know how to solve this? I’ve seen unity apps running on android with smooth looking gui buttons. I just dont know what else to try.

Any help is really appreciated.

2

This is because the GUI setting disables Mipmaps. Mipmaps are a fast way of resampling images to make them smaller in real time, while retaining quality. The way they work is by pre-computing various sizes of the image, and then indexing the appropriate scale.

When you disable these, however, Unity defaults to Nearest Neighbour sampling. This means that, when the size changes, it just uses the colour of the centre-most pixel in that area. This means that thin areas, like outlines, often end up missing pixels in some places, and being double-thickness in others. This produces artefacts like the ones you’re seeing. The upside to nearest neighbour is that, if you’re not changing the size by much, it doesn’t blur the image in the same way bilinear sampling does.

What you’ll need to do is one of the following:

  1. Make the source image the size you want to display it at. This will give the best results, but is suboptimal if you plan to run this on screens of various resolution.
  2. Set the texture type to “Texture” instead of “GUI”. This will get rid of the problem, but your image may appear blurry if you’re resizing it too much.
  3. Create a custom texture format that uses Bilinear sampling instead of Point (nearest neighbour) sampling, but with mipmaps still disabled. I’m not sure entirely how well this will work, so it might be worth a try, though it may not work at all.

I recommend you look up some of the terminology I’ve used in this answer, and hopefully it will help you to understand what the problem is.