Issues with UI Canvases and Pixel Perfect Camera

Unity Engine
, , , ,
1

I’m seeing a lot of old threads on similar issues, without a lot of answers. So I’ll do my best to lay this out clearly.

The basic setup I’ve got:

pixel perfect camera

  • PPU: 16
  • Reference Res: 568 x 320
  • crop frame: letterbox
  • grid snapping: none

CinemachineCamera

  • Ortho size: 5 (but I have several cameras and will probably change this in various places)
  • Position Composer (follows player w/ target offset set to a direction the mouse is relative to the player)
  • Impulse LIstener
  • Cinemachine Pixel Perfect
  • Confiner 2D

Canvas

  • pixel perfect checked
  • Canvas Scaler
    – pretty sure I want scale with screen size, with resolution matching my pp-camera?
    – reference ppu doesn’t seem to do anything?? (my sprites are coming from asepriteImporter)

The main issue

No matter how i set it up, there’s some issue with the Canvas

  • If I use “Screen Space - Camera”: my UI is super jittery whenever the camera moves, regardless of “pixel perfect” setting in canvas.
    – Turning off pixel perfect camera fixes this, but I need this component to render my game correctly.
  • If I use “Screen Space - Overlay”: my UI isn’t constrained to the pixel perfect camera’s letterbox, and any part that ends up in the letterbox doesn’t clear between draws (eg, if the ui moved, it would leave a smear of the old frames)

What setups do people use for UI canvases when utilizing pixel perfect camera & cinemachine??

One thread i saw linked to a unity project with a “customCanvasShader”, but it seems to solve an issue that might not be an issue any longer? I say that because it’s built to be used with the pre-URP pixel perfect camera and the canvas set to “screen space - camera” and still suffers from the aforementioned jitters.

2

OK, so with further experimentation, I think I’ve sorted out something that works.

I made a separate Camera, nested as a child to the main camera, set to Overlay, and added to the main camera’s stack. This secondary camera is not pixel perfect, and is set as the Canvas's Screen Space - Camera - render camera.

Seems to work!

3

I have the same problem but your solution seems to solve it only if not using the 2D renderer. That takes away some 2D rendering options like transparency sorting axis. Have you been able to fix this for the 2D renderer?

Only way I am able to use 2D renderer is by disabling the crop frame on pixel perfect camera so I can use the screen space - overlay UI render mode.