Pixel Art Distortion in game window

Hey everyone,

I'm hoping someone has some experience with this. I've done a good amount of research online and there seems to be a lot of confusion regarding the topic.
I'm trying to build a game with pixel art. For a while now I've been having some issues in which the sprites can get distorted based on certain settings. These include the GAME window resolution and some canvas settings. I'll try to be a through and detailed as possible. If something is unclear I'll be happy to clarify as best as I can.

Canvas settings for the following images are seen on Canvas_Settings_1.png. The settings I'm messing with in particular are in the Canvas Scaler. The UI Scale Mode is set to Scale With Screen Size.



Note in Ex_1.png some pixels have been distorted causing the sword to look jagged and gross. This is an image on the GAME window zoomed in all the way. Ex_2.png is the same sword sprite but zoomed out all the way in the GAME window. Once again the image is jagged and the overall shape is distorted.







I thought I found a solution when I changed the settings on the canvas as seen on Canvas_Settings_2.png. In the Canvas SCaler settings, I changed the UI Scale Mode to Constant Pixel Size



In Ex_3.png the sword looks as it should. This image is the sword all the way zoomed in all the way in the GAME window to show that the sprite is intact. In Ex_4.png the image is on the GAME window zoomed out all the way, and even zoomed out all the way the image maintains it's shape.







So, all is great with the settings on Canvas_Settings_2.png the visual side. The issue that comes out because of the new settings is that now I can't work with multiple screen sizes in mind. It seems that the sprite will stay in place regardless of the screen dimensions. as seen on the following examples.


Ex_5.png shows the sword on the edge of the camera on a fixed resolution of 1080x1920. If I then change it to an aspect ratio of 9:18 as seen on Ex_6.png. (Which I belive is the screen ratio of some of the bigger phones.) the sword remains in place instead of moving along with the screen. This is causing an issue where the UI gets cut off, however, this won't happen if the Canvas Scaler UI Scale Mode is set to Scale With Screen Size.








If anyone has any insight on the matter that would be greatly appreciated.

 

Bumping this, since I'm having almost the same issue. How does one create pixel-perfect UI elements?

 

First make sure your game window is 1x or maybe try on executable.

I believe there is a 'Set To Native Size' button in the Image component.

 

i have also the problem when i made red triangles. they all look like someone had chopped off some pieces of them. even in the editor they look like this when zoomed out, but when i zoom in in the editor they look fine

 

Hi! I have the same problem. I wanted to achive a pixel perfect UI. My approch was to set the Canvas mode to Screen Space - Camera and having on the camera (that will render the canvas) attached the pixel perfect camera component. Then, I set the pixel perfect camera and the canvas scaler (Scale with Screen Size) reference resolution to a 16:9 ratio. In your canvas scaler reference resolution you've set a resolution too big. Try to set a resolution like 320x180 or 240x135 (I'm using this resolution). This method kinda work, however, at some scale, the images may be stretched.

I've find this nice article: https://ocias.com/blog/unity-pixel-art-camera/

In this article talks a bit about pixel perfect art in games and also there is a unity package with an example scene. I've tried this package on the UI and it worked. At any scale the canvas was pixel perfect without any type of distortion. Maybe a problem (small) are the sub-pixels between pixel, but from far aren't so visible.

At the end, this package is the solution to achive some kind of scaled pixel perfect UI.
Hope this helps.

 

For the people with this problem, i've found a solution that works sometimes, if you're viewing the game in free aspect change it to full hd