Cinematography in Unity — Transparent Windows

Making windows in Unity is not as clear as you might think

Photo by Carlos Caamal from Pexels

Now that we’ve covered 2D games in Unity for awhile, let’s change gears and study cinematography in Unity. What do I mean by that? Just generally making the most effective use of the Unity cameras and various visual tricks to make the best and most immersive games possible.

Games have been on a trend towards more of a cinematic feel since their inception. Features such as cutscenes have allowed for a new way to provide exposition to the players in a more entertaining and engaging fashion.

The first subject we’re going to study is how to make a functional window in Unity. While not exclusively an issue of cinematography, in-game windows represent the sort of visual effect we’re looking to explore in this section.

The Problem

In Unity, there isn’t really any built-in window or glass object (that I’m aware of, at least). So we have to build our own.

On the left, our window-to-be. On the right, what we’re aiming for.

Now, naturally, we might first recall that objects have colors, and colors have alpha channels. What is an alpha channel? Well, just as a color has a value for the Red, Green, and Blue (RGB) values that comprise it, there is also one more value known as the Alpha channel which represents the opacity or transparency of the color.

So, in theory, we should just be able to set the color of an object to have a high transparency value and then we have a window, right? Let’s try it.

On the object we’re looking to modify, we already have everything configured. This is simply a matter of having the right material in place for the window space. Let’s take a look at our material now.

The window material

You can’t see it from here, but I’ve already adjusted the color in the Albedo section to have maximum transparency on this material. Do we have our window now? Unfortunately, no.

The Solution

So what is the solution? Well, if you were eagle-eyed earlier in this article, you might have already noticed the problem.

The transparency issue is only part of the problem. But to even make use of that feature at all, we first need to configure our material to render in a different fashion. That means changing the value of the rendering mode from Opaque to Transparent.

Our window material with the rendering mode configured correctly

So do we have our window now?

We can now see through our window!

Yes!

Conclusion

Did this seem obvious in retrospect? Perhaps so. But sometimes we can get so caught up in what we think should work that we blind ourselves to other issues standing in the way.

Well, that concludes our look at transparent objects (such as windows). Next time we’re going to check out sky boxes. Thanks for reading!