UI Image distortion

Unity Engine
1

I have a 256x256 vector graphics image saved as a PNG. It looks nice and crisp outside of Unity.
However, as soon as it is imported into Unity it looks horribly distorted.

See this screenshot for comparison:

1823975--116800--Unity3d - UI Image problem.png
1823975--116800--Unity3d - UI Image problem.png422×1004 67.1 KB

Things I have tried:

  • Changing Filter Modes (tried all options)
  • Changing Max Size (tried all options)
  • Changing Format (tried all options)
  • Changing the Pixel Perfect setting on the parent canvas
  • Adding an empty parent object in between the canvas and the UI image
  • Changing the Texture Type to Texture
  • Increasing the resolution of the image (while staying at power-of-two intervals)
  • Adding a reference resolution component to the parent canvas

None of them had any positive effects, while a few of them just made it worse.
Any ideas on how I can make the UI image look the same within Unity as outside it?

2

Is this occurring in the scene, or only in the preview window? The preview window isn’t the best and shouldn’t be taken as the canon import.

3

It’s in the preview, the scene, and the game.

4

Could you post the image?

5

Sure. Here’s the 512x512 version:

1826069--116985--Plate.png
1826069--116985--Plate.png512×512 20.4 KB

6

Maybe you can explain more of what you mean by “distortion”? What I see are compression artifacts, which are to be expected when you have a format set to “compressed”. Did you try changing it to “automatic truecolor”?

7

Well I thought it was pretty clear from the image I posted.
I don’t know what the correct term might be, but it clearly doesn’t look like the source :slight_smile:

And yes, as I posted I have tried all available formats - including true color.

8

I wouldn’t call the image you posted “horribly distorted”. However, I dropped your image in and looks fine to me. The only thing I did different from your screenshot was made the preview window bigger so the image was getting scaled down when rendered.

9

That looks fine indeed!

For some reason it cannot do that on my machine.
Like I said, it’s not just the preview but also the scene and game – it looks terrible.

10

By “distortion” do you mean the breaking lines as seen in your screenshot? Try changing filter mode to Bilinear and hitting Apply.

11

I appreciate the replies, guys!
But I did list what I had already tried in my original post… :slight_smile:

12

As you said you have problem in game too this looks to me that ur picture originally is too large and scaled down for that reason. My suggest: recreate ur picture in smaller res maybe 1xx x 1xx or smaller and use sliced mode if u need bigger reslut. This is important that image should be small in original stage

Edit u played with pixelsperunit setting for sprite/ui element ? This may help too but i doubt.