Setting Up A Window Boxed Card in Unity

Setting up the Card

So, in the last article we used Render Textures to create a second view point for our player to see while traversing the game. This could have been a Camera Monitor, Drone or HUD Display. In this article we will setup a card for the window box effect. We will go into coding it in the next article.

First, We want to set up our Card game object. This will be an empty Parent object called Card with three Quad objects.

The Quads for the front and back of the Card are set 0.001 off Zero to prevent “Z-Fighting” and given the scale of 1 by 1.4. The scaling is set to match the standard for playing cards but can be adjusted to taste.

The window will hold the Window Box Render Texture and at the scale we are using and with slightly modified images of a certain Trading Card Game’s card faces, we want to set the .75 by .75 and raise it to about .25 on the Y axis. This places our square window centered in the not quite square window of the card.

Here are the settings I found match best the real world version, adjust as needed.

We will attach Materials made from a front and back image of the card to the appropriate Side object and a new Render Texture Material to the Window object. Don’t worry about not having a camera attached to the Render Texture yet, we will cover that shortly.

Setting up the Window Box

Next we need to setup the window box for our Card’s scene. We will create an empty Parent object Called WindowBox and position well outside the game’s view area. For this I chose -1000 Y, but if you are doing this for an active game, you will likely choose some point below the scene’s geometry.

Then with five Quads, we will create and open ended cube. This is where our Card’s scene will be contained.

For convenience, I will be using a demo level scaled down to fit the window box. This scene has Lights, Reflection & Light Probes, as well as a Fog particle effect. This is to show that you can do just about anything inside the Window box scene.

When setting up the new Camera for the Window box, attach the Render Texture to it and move it down to the window box and remove it’s Audio Listener component. For the easiest setup, I’ve found that if you rotate your Window Box game Object to ±30 Y rotation and line the Camera up so it’s Line of Sight falls along or just inside the wall.

You can also use your card in the game view for comparison. If the view from the Window Box Camera doesn’t appear, you may need to open the Material on the Card’s Window Quad and reassign the Render Texture to the Base Map.

Current Settings for the Window Box Camera in this example.

For this example, I have been using a base size of 1, but there is nothing stopping you from experimenting with different sizes or depths. Extending the length of the walls could give a more pronounced depth shift when we start to work on Tilting the Card in the next article.