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.

--

--

--

A Unity Developer with a fondness for Fantasy games and the challenge of pushing boundaries.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Database Management Systems

Find your purpose in Web3 through Vincent Van Gogh’s life

Rust — Control your Errors by owning it

The importance of truck routing

Passing context across steps with pytest-bdd

Ultimate How-to: Bluetooth Swift With Hardware in 20 Minutes

Agile-Infrastructure, Platform & Product-Program & Portfolio Management (AI4PM) Guide

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas Kesler

Thomas Kesler

A Unity Developer with a fondness for Fantasy games and the challenge of pushing boundaries.

More from Medium

Infinite Runner in 3 Steps

I think you dropped something — Creating a simple loot drop system in Unity2D

Daily Progress: Main Menu Functionality!

Cleaning up the Homing Missile code