Pixel Perfect Canvas (or lack thereof)

I have been struggling for months to try and figure out a way to get pixel perfect graphics in my Unity 2020.3 2D game. While using the pixel perfect camera (along with the Cinemachine Pixel Perfect extension) works just great to achieve pixel perfect graphics for my sprites in-game, I have yet to find a way to achieve pixel perfect UI elements.

Currently I have my canvas set up with a Canvas Scaler object set to “Scale With Screen Size”, with a reference resolution of 480x270, a screen match mode of “Expand”, and a reference pixels per unit of 32.

My Pixel Perfect Camera asset on the camera is using the same reference resolution and PPU.

The results I get do not change if I switch the Canvas’ render mode between “Screen Space - Overlay” and “Screen Space - Camera”. The results don’t change if I create a new ‘UI Camera’ and adjust the culling masks of the two cameras so that I have a dedicated camera for my canvas.

The target resolution is 1920x1080, which is a perfect multiple of the reference resolution, and just to eliminate it as a variable I even set the Canvas Scaler to “Constant Pixel Size” and made the scale factor 4, but got exactly the same results. (Note that this project will always run in resolutions that are a perfect multiple of my reference resolution, so there will never be a need for one reference pixel to equal a fractional number of actual pixels)

Everything looks perfectly fine in the scene view, so I know it’s an issue with how the canvases are being rendered in the game view. Again, this issue is only with the UI elements, scene sprites render just perfectly.

Scene View (perfect square pixels):
https://imgur.com/hiX0xRt

Game View (notice the distorted, rectangular pixels in places):
__Imgur: The magic of the Internet

I’m not one to typically post on a forum asking for help, but I feel like I have tried dozens of “solutions” that I’ve found online, and I have dedicated dozens of hours towards trying everything I can possibly think of to just solve this seemingly simple issue.

1 Like

Not sure which UI element you are referring to, please check the UI forum here.
Seen 2D forum is not related to UI.
hope it help

What’s with the yellow line at the bottom of chicken head which appears in game view screenshot? Is the thing you showing consisting of multiple layers? No matter how wrong the scaling settings are it should be impossible for gap like that to appear between pixels of single image.

Yes, the spots are a second image on top of the base chicken. Both are distorted but are distorted in slightly different ways

cc @MaxwellTan
In the Unity Editor, Pixel Perfect Camera and UI Canvas rendered to the pixel perfect camera don’t match resolutions, this is a long standing issue that hasn’t been addressed by Unity.
However, if you build your game (to iOS for example) they will match up.

ref Feb 2021: https://discussions.unity.com/t/763520/10

1 Like

Hi hawken, thanks for the help that is very informative.

Cheers. It’s an old thread but the closest I’ve found to an answer to my issue . On build to android the problem is the same one, canvas only takes up a portion of the screen and there was no progress using the custom scaler script. Did you happen to find a solution in this past year? thanks!

I noticed this also. iOS is OK, Android has the same issue as the unity editor.

1 Like