Adding background to replace black when using "Crop Frame" with 2d Pixel Perfect Cam?

Basically title. I want to use the crop frame setting, but I don’t just want black in the background. I’m hoping to replace the black with a background as seen in other 2d games with limited play areas, like the below example.


All I’ve really tried was a UI with screen space overlay but that is simply not compatible with the Pixel Perfect cam, and now I’m stumped. Any ideas?

  • Render the pixel perfect camera’s result into a render texture(R)
  • Create a new camera that is not pixel perfect as a child of the pixel perfect camera. This new camera’s rendering order must be after the pixel perfect camera
  • Create a new material, drag the R to the main texture and place the material on a new quad(Q) in the scene. Scale the Q so it fits exactly to the output of the pixel perfect camera(there is a calculation of it somewhere here, but I’d just eyeball it and the scale will be a number that is familiar to you iirc)
  • Make the Q’s layer a unique layer(pixelPerfectOutput for example)
  • In the new camera, only render the pixelPerfectOutput layer
  • In the pixelperfect camera do NOT render pixelperfectOutput layer
  • Now create a large sprite that is also in pixelPerfectOutput layer that is behind the Q and you’ll have exactly what you are looking for.

PS: for step 7, you could add a sorting group component to Q and set its sorting order/layer to something that is behind the large sprite
PS2: you could also add a custom shader for the large sprite so it scrolls etc., totally up to you
PS3: you may need to “clamp” the R so the black parts of it wont be shown in Q. You can do it with a shader, and set the black part’s alpha to 0. ALTERNATIVELY you can create 2 large sprites on each side of Q that’ll be in front of Q

This seems to be working perfectly! Thank you so much! Was struggling for a while but just had to select only crop Y on my camera as crop X broke the texture. One thing I am confused on is why I don’t have any vertical black bar?

I’m scaling my quad with yScale = cameraSize * 2f and xScale = yScale * (240 / 320) (my reference resolution). I’ve checked the scale and multiplied it by my PPU and the quad perfectly fits the play area.
On my 1920x1080 screen there should be 120 pixels of black bar at top / bottom (1080 / 320 = 3.375, 3 * 320 = 960, 1080 - 960 = 120) but there is none. It’s not a great big deal but definitely a little confusing.

Update on this if anyone else ever needs it, the problem was that I didn’t have a pixel perfect camera on the sub camera. There actually were artifacts as a result of it filling the whole screen, they were just small enough I couldn’t really tell. After adding the pixel perfect cam with my reference resolution and all settings unchecked to my subcam, the game is actually being scaled correctly and there’s a night and day difference. Thank you!