Letterboxing in Unity3D

Context:

A little bit of context for what I'm sure is a pretty niche problem to have.

I work for Osmo/Tangible Play and traditionally, we have always had one primary target platform - Tablets ( more specifically iPad and Fire )

Our project had that in mind and we built our UI specifically for that. An example of that can be seen here.

After nearly a decade of doing this, we wanted to see if we can support iPhones. It made sense from a business perspective to increase the Total Addressable Market. But given what we know about Unity UI ( especially the older versions ), this was considerable work.

One of the first steps we wanted to do, was letterbox the game. We wanted to do that for several reasons.

1. Our games are targeted to play a specific way, some parts of the screen for the phone are "dead zones" i.e., we cannot have any UI elements in there.

2. It is easier to translate the UI if we're closer to the original aspect ratio ( iPhones are much thinner and taller compared to iPads )

So, the task was to letterbox all of our games that were made and maintained for over 5 years.

Using Camera ViewRect

This is the way I did this for this project.

The way you achieve Letterboxing via Camera is,

1. Have a MainCamera that renders what you want. Set its height to 0.75 ( This is normalized b/w 0 and 1 ). Set its position to 0.125 to center (normalized again).

2. Have a second Camera. Set its culling to Nothing. and set the skybox to Black. Leave its viewport to default ( width = 1, height = 1 ). This should add a black background.

That's it.

This is certainly more expensive than just adjusting the canvas in edit time because you add an entirely new camera and render the frame again. The added draw call makes it more expensive.

To control the amount of letterboxing we get, you add the PortraitLetterboxCamera.cs script. Here is the relevant gist from it.

One more thing you want to make sure to get right is setting the skybox camera / the letterbox camera to be below the main camera. This way, the output for the main camera is on top of the letterbox.