I have a small issue I cannot figure out. My entire game is made up of UI elements. So in the attached image you see a couple of buttons and if you look closely the pixels are distorted (the boxes, you can ignore the text). Here are the (I believe relevant) setting I use:
Imported sprites are set to 16ppu, point (no filter), no compression.
Camera: default settings, I’ve tried using Pixel Perfect Camera with various settings, but doesn’t seem to change anything.
Canvas: Screen Space - Overlay, pixel perfect is checked (but also doesn’t seem to change anything) UI scale mode is set to Scale With Screen Size, reference resolution is set to 512 x 288, reference ppu is set to 16.
Then I have a UI panel anchored to stretch, on which I have my images and buttons etc. The distortion happens on all images when I have the Game View Resolution set to Full HD or 4K UHD, but if I set it to QHD (1440) everything looks good! So I’m pretty sure it’s something to do with resolution scaling, I just don’t know how to get it looking good on every resolution.
EDIT: I also just made a new 2D project, setup the canvas the same way, added an Image, set the sprite to native size (48x48px) and the same distortion happens, so it should be very easy to reproduce this issue.
If anyone has any idea how to fix this, or if you need more information, please let me know!
Overlay canvas isn’t affected by cameras. You can have 0 cameras, or maybe 2 cameras for split screen and the overlay canvas should still work the same.
The pixel perfect option for Canvas has completely different meaning than pixel perfect in the context of pixelart. The canvas pixel perfect setting nudges the drawn GUI components by up to 1 screen pixel. This can help even for high resolution non pixelart UI to ensure everything is aligned to screen and reduce some blurriness, but since it moves only by 1 pixel difference is very subtle. It will not help with getting correct scaling factor for pixelart.
Now simple math:
1920/512 = 3.75, 1080/288=3.75
2560/512=5 1440/288=5
3.75 is not an integer 5 is, that’s why you are getting bad result on FullHD, but good results on 2560x1440 .
Some thing you can do:
Choose a different reference resolution (and possibly redo all your assets, since the size of existing ones will potentially be changed)
calculate the scaling factor yourself and assign it to canvas scaler which is configured in fixed pixel ratio mode, or replace the canvas scaler.
if you are also using pixel perfect camera for non canvas objects, then you can copy the scaling factor calculated by pixelperfect camera and apply it to canvas.
If you choose not to change the reference resolution you still need choose what will happen when resolution isn’t perfect multiple of reference resolution.
Scale the whole → that’s what you are currently getting, not pixel perfect
draw black borders
choose biggest scaling factor which allows fitting a multiple of reference resolution. Your game mechanics and UI needs to be designed so that it can deal with slightly wider are. Worst case 99% bigger than reference, but typically no more than 30-25%.
Thanks Karliss, for the thorough reply. Since my game is 100% UI it wouldnt be a big deal to redo my assets. But I am unsure what a good reference resolution would be. I can go for 1080 for example, but if the resolution of the game would then be set to 1440 for example, the math would again not be an integer so my problem would persist right?
