In this Unity tutorial, I’ll show you how to use Unity UI elements to create holographic cards, giving your UI a nice visual effect of depth and responsiveness. This is achieved using a very simple script and playing with depths of images.
I’ll be using the beautiful “Space flashcards for kids” created by basratstock763107 over at Vecteezy. I’ve downloaded the EPS file, converted it to SVG, and then took the relevant parts I needed for creating the cards:
Creating the base card
First, we’ll start by creating the based card, and add to it a script to make it move as the mouse hovers it. Let’s create an empty object and add an image to it – we’ll use the above Mars Background image for that. We’ll also add our custom script to make the card move:
[RequireComponent(typeof(RectTransform))]
public class ParallaxPanelScript2 : MonoBehaviour
{
[Header("Rotation")]
// This controls how far the card will rotate. Set to 0 for axis's you don't want to rotate.
public Vector2 maxRotation;
// Speed for the rotation
public float speed;
// Our target euler-angles rotation
private Vector3 m_targetEulerAngles = Vector3.zero;
private RectTransform m_rect;
private float m_centerX;
private float m_centerY;
private void Awake()
{
m_rect = GetComponent<RectTransform>();
m_centerX = m_rect.sizeDelta.x / 2f;
m_centerY = m_rect.sizeDelta.y / 2f;
}
/// <summary>
/// Check if the mouse is within the panel, and rotate it accordingly
/// </summary>
private void FixedUpdate()
{
// Distance between the mouse position and the panel's position
Vector2 diff = (Vector2)m_rect.position - (Vector2)Input.mousePosition;
// If the mouse is within a distance of the center
if (Mathf.Abs(diff.x) <= m_centerX && Mathf.Abs(diff.y) <= m_centerY)
{
// Calculate the desired rotation for the panel
m_targetEulerAngles = new Vector3(
// Rotates along the X axis, based on the Y distance from the center
maxRotation.x * -Mathf.Clamp(diff.y / m_centerY, -1, 1),
// Rotates along the Y axis, based on the X distance from the center
maxRotation.y * Mathf.Clamp(diff.x / m_centerX, -1, 1),
// Don't rotate along the Z axis
0);
}
else //Mouse is outside the rect, set our rotation to zero
{
m_targetEulerAngles = Vector3.zero;
}
// Check the difference between the current rotation and the desired rotation
var distanceToTarget = (m_rect.eulerAngles - m_targetEulerAngles).magnitude;
// If we're too far away
if (distanceToTarget > 0.01)
{
// Lerp-rotate the panel
m_rect.eulerAngles = AngleLerp(m_rect.eulerAngles, m_targetEulerAngles, speed * Time.deltaTime);
}
else
{
// Otherwise, just set the rotation to the desired rotation
m_rect.eulerAngles = m_targetEulerAngles;
}
}
public static Vector3 AngleLerp(Vector3 startAngle, Vector3 finishAngle, float deltaTime)
{
// Lerp each axis separately using the LerpAngle method
return new Vector3(
Mathf.LerpAngle(startAngle.x, finishAngle.x, deltaTime),
Mathf.LerpAngle(startAngle.y, finishAngle.y, deltaTime),
startAngle.z // No rotation along the Z axis
);
}
}
What the above script does is handle the movement of the card based on the position of the mouse.
Now, for the holograph!
Creating the holograph, we’ll just create a child object, and add it the Mars Planet image above. To achieve the holographic effect, we’ll set its depth to -10. If we want to make the object feel “heavier”, we can set a value that’s closer to 0.