Pixelated PNG Images

Fundata

Hi,

I'm currently working on a point & click with AC in Unity and facing a few problems with image quality. I was wondering if I could get some help here.

I need to make a WebGL game, size: 640x480. I imported all art work in PNG format. The images have a pretty high resolution, and look crisp when I open them outside of Unity. However, after importing in Unity, it looks pixelated in the mac build, the WebGL as well as when I test play inside of Unity.

I unchecked 'Compress Assets on Import' in the Unity Preferences. I tried to go in the QualitySettings in Unity: Quality is set to Fantastic & Texture Quality is on Full Res.

I also tried going in the settings of the individual images. I tried changing Pixels per Unit, setting Filter Mode to 'Point', I changed the MaxSize... Nothing worked so far. I even tried importing the PNG images in different sizes. It still comes out kind of pixelated. Especially the black outlines of the images look pixelated. 

Something weird though: when I change the game size to Free Aspect., the images seem already less pixelated during testplay. But I need the game in 640x480 :-/

Any help would be really appreciated I've been stuck on this since hours 

Thank you

ChrisIceBox

Generally this is a question for Unity, not AC - but you haven't said where or how these images are used.  Are all graphics low quality, or just a certain type?  What are your version numbers of both AC and Unity, too?

Fundata

Hi,

@zebbi:

Thanks for your comment. I'm not sure which one is RGBA 16. There is RGB 16 Bit, but that did not work. Please see screenshots attached, to see the compression formats available.

The imported PNG images are not blurry, just pixelated. The black outlines are not smooth. 

@ChrisIceBox

Thanks for your reply. All imported PNG's appear pixelated in my 640x480 game.(background image, UI Buttons, Inventory items etc.) 

The inventory images are 107x108 (pixels), the arrows to move around the room are 120x71. The background images are 3438x 2504, but I reduced the size of background images to 640x480 to fit the screen (& All of the imported PNG's have a 300 resolution). 

..Usually reducing the size of  a PNG in Unity, should not create any issue for the quality, I thought?

I tried with differently sized images and I did not get a different result, which is odd.

I don't think it's a problem with the PNG images themselves, because I tried importing a photo downloaded from the web into my scene yesterday (without resizing it), and it appeared equally pixelated at play-testing.

Any ideas?

Sorry-I know this is more of a Unity question. But I thought about trying my luck here. I spent 4 hours on this issue yesterday, visited about 40 forums, tried all kinds of different things and cannot figure this one out. I'm stuck

Fundata

Hi,

Yeah, I've tried building the game as Mac Build and WebGL. It appears as pixelated as seen in Unity. I just tried creating a build again after changing it to RGB 16bit, but same result unfortunately.

I open the builds always in 640x480 and the game size is set to 640x480 in Unity next to the display (see screenshot please). 'Low Resolution Aspect Ratios' is checked off too. 

Please see an example in the screenshots below for the outlines. the first one is the way it appears when opening the PNG, the second one is the pixelated version of Unity. Any suggestions?

Fundata

Here is a Screenshot of the Main Camera Inspector. I did read in a forum that the camera settings could be the reason for the images to be bad quality, but I was still not able to fix it

Fundata

ChrisIceBox 

Sorry, I forgot to add this to my response:

Unity Version: 2017.1.1f

AC Version: 1.59

ChrisIceBox

The camera looks fine.  You can check by creating a new scene with a regular Unity camera (nothing AC in there) and placing your graphics in the scene.

It does look like your default quality settings for WebGL are are on good though - I think green means default.

Have you tried no compression at all?

Fundata

Hi

Thanks for your input. I finally solved it. Yes, one of the things I had to do is set the Compression to 'None'. And Filter Mode set to Point & importing PSD files instead of PNG

And I changed the size of the camera, after making the following calculation:

* Orthographic size = ((Vert Resolution)/(PPUScale * PPU)) * 0.5

Article on this:

https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/