Rendering UI to a separate camera causes squashing and stretching when window resizing

Unity Engine
,
1

In my 2D project, I have a cinemachine setup with a pixel perfect camera. This camera is set to “Windowbox” mode, as this gives me the desired results of creating black bars on the top/bottom and left/right of the screen if the user resizes the main game window. This works perfectly.

However, the UI is a different story. I want my UI to stick to the game view only, and not go beyond the game view and into the black bars. To solve this problem, I decided to add a second camera that only renders the UI. On my main camera, I have this second camera in the stack as an “overlay” camera.

This does seem to work, but with a drawback I was not expecting. When the user resizes the game window, the UI will squash or stretch, depending on how the user resized that window. Obviously, this is unwanted behavior, so I was wondering how I could solve this problem.

I tried rendering everything with one camera, and setting my canvas to “screen space - overlay”, which also… works, but with unwanted behavior, as well.

Doing it this way gives me pixel shifting on the UI elements. Here’s a preview of that -

8631276--1160292--UIPixelShift.gif

If I could get rid of this pixel shifting, this way of doing it (using one camera) would be ideal. However, rendering the UI to a second camera seems like a better approach. I just need to get rid of the squash and stretch during a game window resize.

Here are my canvas settings when using the second camera to render the UI -

8631276--1160295--Screenshot 2022-12-02 151422.png
8631276--1160295--Screenshot 2022-12-02 151422.png828×425 17.9 KB

Is there any way to get rid of this squash/stretch when using a separate camera set to overlay, or perhaps get rid of the pixel shifting when using one camera that has the pixel perfect component?

2

Alright, so I managed to solve this issue. For anyone else who runs into this - I’ve added the pixel perfect component to the second camera, again set to “Windowbox” mode.

However, this might be an issue, as Unity gives me a warning that says the pixel perfect component won’t function properly if stacked with another camera.

It does work, though… for now. It completely gets rid of the pixel shifting behavior I was seeing with just one camera, and it resolves the stretching/squashing behavior I was seeing with this second camera set to overlay and rendering only the UI.

However, I can’t help but think I’m overlooking something, and perhaps there’s a better solution here?

Either way, this seems to work exactly how I need it to, with no odd behavior from the UI, which is excellent.

3

Hey thanks for posting the solution!

What I ended up doing is just adding a script to the base cameras’ rectangle and updated the overlay rectangle:

Voice Update()
{
    overlayCamera.rect = baseCamera.rect;
}

It also updates things pretty neatly and allows you to keep post processing separate. There is still that warning but its only on the base camera and you can avoid stacking pixel perfect things (since the only effect you want is the resize).