UI elements are shaking?

It's exactly what it sounds like. They're literally just shaking, and I have no idea what's wrong. I'm assuming it's the same reason my previous project had a problem where if I moved the camera further away, some sprites' edges would become thinner and slightly blurry (they were pixel art, so the images were very small).

This isn't happening to just the images I make. UI text, and even the edges of the Play mode screen are also affected.

This is a short video I took of one of the corners of the game view screen while Play mode is active:

I tried disabling all the cameras except for the main one, and disabling all the image effects, but it's still there. And sometimes when I go into Play mode, the edges of the screen do this and they turn white (hence why I mentioned them being also affected, but didn't capture it in this clip).

I also tried setting the Canvas as "Pixel Perfect", but that didn't work either.

I saw people on Unity Answers have this problem with sprites, and I believe one of the question was asked this March. Only one of them has an answer, which is to set the "Pixels Per Unit" to 1, which I already do automatically every single time I import something that will be a sprite. And that hasn't fixed the issue.

 

I did some more digging, and found an asset in the store, which completely solves this issue. The only problem is that I can't afford to pay £10 to solve a single issue, as the UI is the only thing that is in pixel art size.

Does anyone know how I can really scale up an image, but then when it updates in Unity, still have it how it was before? I haven't worked with UI that much, so I don't know how the whole scaling stuff works for sprites. And how I can get them looking the same even if I change the size of the actual image in an image editor.

EDIT: Well, I just increased the images, and it's still the exact same problem. I also tried changing the filter to "Bilinear" and "Trilinear", but there's still some clear shaking on some UI elements.

Anyone got any ideas what to do now?

It does work when I set the UI camera to Orthographic, but it completely messes up the motion blur (makes it really intense and circular).

 

Bump.

 

Bump.

 

I am also facing that issue for a while now.
Sometimes the UI's rect transform will change its position or scale value by very little, like 1.0001 or 3.542548e-05. Setting the values to a round number like 1 or 0, solves those issues for me, most of the time.
However, sometimes, even doing this, the jittering persists.

 

Just solved it.
I'm using screen space - camera. My camera position is a decimal like ( 10 , 0.312, 1.233).
just change UICamera postition to int number etc(10,0,0) . then ui elements will stop shaking.

 

This is not at all complete solution. My Canvas must be set to world space, and is a child of a camera that is being animated via Cinemachine automation. very shakey ui and no way to limit the cameras global position to integers. also changing the canvas items local positions to integers does not help

 

I suppose it is unresolvable and no one cares?

 

Hi,

I am also having this issue; at first it looked like it was related to the variance between the physics engine and the frame updates but have removed all the physics from the game and the shaking still happens.

This is not the only time this has been raised in these forums but am unable to find an answer; so I would like to add to this one in the hope than someone is able to shed any light.

 

I am currently working on a pixel game, and shaking has been a huge problem at the start.

One of the things that really stopped it was changing the camera size. I think at some point the camera projection was a certain size, that on the monitor one on-screen pixel was between 2 physical pixels of the monitor. So it was switching between the two.

Don't know, but you could try that. When I had shaking problems in the pixel game, the camera size had a lot of decimal points. Making it a more rounded number fixed it for me.

 

I had the same problem when I turned on pixel perfect, so now I just leave it off. It only occurs to me when the camera has to constantly move with the canvas set to screen space - camera.

 

I managed to fix my problem by changing screen space to Overlay, instead of camera.

 

In the end I have moved the scenery around the origin to resolve this; very much less than ideal.

 

Thanks Ronyplay, that one worked for me.

 

This worked for me too

 

Just turn the "Pixel Perfect" to off, image shaking when transform is solved.

 

[QUOTE = "mpkostek, post: 4194574, membro: 1738033"] Isso funcionou para mim também [/ QUOTE]
this worked for me too... set canvas to an child of the camera, and change to overlay

 

This happens because the UI Canvas is too close to the camera. Solve it by doing the following:
- You do not need to use Overlay.
- Set your UI on a separate canvas, and layer.
- Set your Plane Distance of your canvas to a higher number, as high as it takes.
- Ensure your camera has the far clipping plane set to at LEAST that same distance.
- Cull Everything except for your UI.

 

Thank you! Worked for me.

 

Work for me as well thanks

 

I use world space for my camera option as I want post-processing on my UI and replacing my camera fixed it for me.

Hope it helps!

 

Hello, sadly I'm still having this issue.
I cannot use Screen Space - Overlay since I use Pixel Perfect Camera component.
Pixel Perfect on Canvas doesn't make a difference.
And with URP in my project I cannot use 2 cameras.

So my UI Canvas is set to Screen Space - Camera and the UI is shaking when the camera moves.

Any tips would be greatly appreciated.

 

Have you tried turning Pixel Perfect Camera's Pixel Snapping off?

 

Thank you for reaching out.

Yes I have, it was off by default but I have managed to find a solution to my problem.
You can read all about that endeavor here.

 

Solved it. Thanks buddy.

 

I found other solution. Go to generated font -> material and change shader to TextMeshPro/Distance Field

 

@ChongHann thank you, "TURN OFF PIXEL PERFECT" in canvas, it worked. it is not vibrating while scrolling the object in a scroll view.

 

I'm using the pixel-perfect camera with Upscale Render Texture enabled, and all of my sprites are set to display at 16 pixels per unit (PPU).

I had the issue with HUD elements shaking as well. I am using Screen Space - Camera for my canvas. They wouldn't shake if the canvas was set to Screen Space - Overlay, but that caused them to not align with the pixels rendered by the camera, which I found unsatisfactory. Next, I tried turning Pixel Perfect off on the canvas. That didn't fix the jittering, and it caused some of the HUD elements not to line up correctly with the others.

Finally, I decided to try snapping the camera to the nearest increment of 1/PPU (in my case 1/16) inside my script for controlling camera movement. This completely fixed my problem. This is the code I used for snapping the camera:

Code (CSharp):

1. newX = (float)(int)(newX * PPU) / PPU;
2. newY = (float)(int)(newY * PPU) / PPU;

where newX and newY are the position where I want to move the camera, and PPU is the pixels-per-unit used by my game sprites. I hope someone finds this helpful.

Honestly, I find it surprising that the Pixel-Perfect Camera doesn't just snap according to the PPU automatically.

 

I know this is an old thread, but thank you so so much for this! No other solutions worked for me since it turns out I had set my plane distance super low, evidently causing the jitters/distortion. Changing it from 0.01 to 1 did the trick instantly! Absolute livesaver