Bringing Depth to your Window Boxes

In our previous article, we setup our card and window box. Now we are going to dive into the code needed to give our card life and depth.

For the basic functionality we are looking for, these few lines are all that we need. References to the Card and Window Box game objects, and a line to tie their rotations to each other. You may have to adjust the Window Box Camera to get the right feel that you are after. Key adjustments will be the Field of View and Distance from the Window Box.

For this card, I adjusted the Field of View down to 25 from default of 60 and move the Camera back from -1 to -2.38. This gives the view in the Window an exaggerated tilt effect as if it were a hologram instead of a depth feel. It shows that this technique can be used for multiple purposes.

Now let’s tie the card into some controls, UI in this case. But this will work for most any thing you want to tie it into.

Firstly, we need to expand what variables we are handling. MaxTilt will limit how far the card can be turned. We have handles for both the X and Y slider. A pair of floats to hold the value calculated from the Sliders. The FrameWait will be used in the coroutine that controls the draw back of the sliders.

We are going to create a new method, TiltCard(), to work directly with the Card and the Sliders. When we set the sliders up in the Interface, we assign them a Min/Max value of -1 and 1 respectively with a default value of 0. Once the slider value is multiplied by MaxTilt, we will have a range between the negative and positive value of MaxTilt. Then using the Quaternion function Euler, we can apply those values to the Card’s rotation.

And by check the mouse Input, we can see when the Mouse has been released. When it is released, we check the values of both sliders and move them back to 0. The coroutine allows us to ‘slide’ back to 0 instead of snapping into place instantly.

This setup also allows us to click anywhere on the screen to pause the return to zero.

Now that you have the skills to make the window boxed effect, show me and the world what you can do with it.