Weird pixel artifacts/displacements with UI sprite

Hello! So I’ve got this sprite (attached below) and it has weird artifacts (also attached below) (its in red because I changed the color in the editor). I use it in a UI, in an image component.

I’ve tried using the Pixel Perfect camera, Ticking the Generate Mipmaps option.

I’ve also had to recently upgrade the project’s version form Unity 2021.3.5f1 to 2022.1.7f1 due to the editor just randomly refusing to open.

Rendering pipeline: Universal RP 13.1.8
Unity Version: 2022.1.7f1

Import Settings:

Any help would be greatly appreciated :smile:

8249730--1079442--x.png
8249730--1079445--upload_2022-7-3_1-29-54.png

Hi @EliasVal , it would be best to send us the zipped up Project file so that we can investigate the issue. You could send us the file by reporting this in the Editor; but I’ll check with the dev as well.

Hello! I have the project on Github.
https://github.com/EliasVal/BULLETFEST

1 Like

After a bit of fiddling around (I also managed to make Unity 2021.3.5f1 open, so I reverted the upgrade), I enabled the pixel perfect option on the canvas and the jaggedness only happens with SOME window sizes
Maxed window:
8251410--1079802--upload_2022-7-4_0-3-39.png

Resized window:
8251410--1079805--upload_2022-7-4_0-3-56.png

@EliasVal what kind of canvas scaling settings are you using? How are you positioning and scaling the image? Camera settings have no impact on Overlay canvas. You need to setup the scaling for canvas separately if you want to achieve pixel perfect result.

8252988--1080081--upload_2022-7-4_17-48-48.png
Those are the canvas settings

Hi @EliasVal , you can take a look at this sample scene, where we provide a Custom Canvas Scaler to help scale UI elements on the canvas when using the pixel perfect camera.

If you just set your reference resolution to 1920x1080 then it means that almost all resolutions except (3840x2160) you will not get perfect pixel scaling. With match mode set to just expand or shrink you might get a few more resolutions with different aspect ratio where one of dimensions matches with reference one. But still far from robust solution across all resolutions.

Some of different approaches I have used:

  • set canvas scaler to constant pixel size and copy scale factor from the value reported perfect pixel camera, this helps matching scale factor of camera and reduces amount of place you have to modify if you decide to change reference resolution
  • calculate the closest integer scale factor yourself based on display size. In case you want the visuals in UI to be more or less dense than game world sprites.
  • Have reference resolution at 640x360, this will give you perfect integer scale at most common 16:9 resolutions 1280x720(2x), 1920x1080(3x), 2560x1440(4x), 3200x1800(5x), 3840x2160(6x). In combination with expand also a few more non 16:9 resolutions. Downside is that you have no way to tweak the scaling factor in case you want slightly bigger pixels.

I don’t see how the sample linked by kenny_ would work with pixel perfect stuff since it doesn’t contain any rounding of scale factor to nearest integer. But maybe I missed something. It also wouldn’t be hard to add if necessary. As an example it’s still useful. It will help me simplify some of my current canvas scaler scripts. For now I sticked to composition and modifying normal canvas scaler settings from separate component instead of inheriting from canvas scaler. Using the approach based on linked example migth save manual polling of dimensions and prevent 1-2 frame delay of dimesions recalculation.

One more thing to watch out is what happens screen size isn’t perfect multiple of scale factor. Depending on whether you are positioning your canvas items relative to left side , right side or center you might get nonaligned positions. For now to deal with this I have a rect transfrom at the top of canvas which chooses it’s size by rounding up the canvas size. There might be a more elegant way to deal with this but this was the simplest solution I could come without knowing more info about the internals of canvas and rect transform behavior.