How to fix UI jitter when changing camera ortographic size?

Unity Engine
1

Hey guys, I have a 2D game and an orthographic camera pointed at the 2D world. I want to be able to zoom in and out to see more of the 2D world, and normally, I could do this using ortographicSize, no problem. But if I do that, the UI lags behind the camera and looks really really bad.

So, if I have a Canvas set in Camera Render mode, and I change the ortographicSize of that camera, the UI moves, I don’t want it to move :(. I’ve been stuck on this for hours :(.

I’ve included a simple example where if you drag that slider, the orthographicSize of the camera is changed and the UI jitters.

Also note I’m using Unity 4.6.x, and switching to 5.0 is not an option at this point due to some 3rd party dependencies.

PS. If I change ortographicSize in the editor, everything is fine. If I change it through user input, all hell breaks loose. Also, the UI was implemented quite a while back, and switching to a perspective camera and moving it could cause a lot of problems.

2128978–140064–ChangeOrthographicSize.unitypackage (4.24 KB)

2

There’s several reasons why I don’t want to switch to render mode overlay, and they mostly deal with a reasonably large codebase and converting coordinates from screen space to world space. I am looking for solutions to using Screen Space - Camera. If that’s not an option yeah, some form of switching might be done, but will be painful. Either Screen Space - Overlay, Using a 2nd camera or making the camera to perspective. These are all expensive changes as they affect assumptions made in the rest of the codebase.

3

Found one solution. Apparently if I wait for the end of the frame, all works. I don’t like this 100%, but that’s the best solution I have right now.

    private IEnumerator _changeCameraSize(float value)
    {
        yield return new WaitForEndOfFrame();
        DragCamera.orthographicSize = value;
    }
1 Like
4

One quick suggestion; if you dont want the ui to be affected by the orthographic size of your main camera, put the ui on a separate camera.

1 Like
5

We thought of that Mistale, but that is a bit too costly of a change right now in the code base. This was one of those things that you realised half way through the project that could happen, ui lagging behind the scaling :eyes:.

We managed to get all features we needed working with that coroutine though. It’s really hackish, like we change the scale for computation purposes (transforming between coordinate systems during scaling and doing multitouch gestures for scaling), change it back so UI doesn’t wiggle, and then actually make the change next frame. VERY convoluted, but it’s the only thing we managed to do to get this to work.

Hope this helps someone. And yeah, for new projects, we’ll set up multiple cameras for this from the start.

1 Like
6

ya splitting it up seemed to work for me too
it is not hard to change just duplicate camera and adjust layer mask

1 Like
7

Yes, of course, the problem with changing though is in the code, not in the scene (so we do a lot of adding game objects to the scene from the UI, and a lot of coordinate conversions between different canvases, also we overwrite a lot of how input goes, a lot of game objects assume Camera.main is a thing… etc.). Moving things to different cameras is a risk because of that.

8

Wow, thank you! I had the same problem and your solution fixes it. Saved me hours of redoing layers which would probably cause more bugs.

9

Welcome, but I still feel it’s a huge hack…