Creating card sway in Unity

This is a simple guide on transitioning from flat, dull card movements to lively, organic movements in Unity.

While creating our card game Befabled, card movement looked very stiff. After analyzing a few other great card games like Hearthstone and Shadowverse, it is apparent that these games create a sense of a physical card moving by giving the selected card some rotational motion. Not only does this make the card look like it's in 3D space but it also gives the player a sense of immersion - a feeling that helps strengthen the mental model of moving a card just like in real life.

 Card sway happens when a user drags a card around or when creatures are moving forward to attack.

Card sway happens when a user drags a card around or when creatures are moving forward to attack.

There are two ways to implement this:

1) If your cards are Rigid Bodies then you can create a Joint and configure the values of the component (quite challenging for a beginner)

2) Use math and transforms (much easier)

rotationcard.PNG

Our cards are just images so we used a little bit of math while updating the rotation of the selected card in the update loop. We want our card to tilt relative to the speed of the card being moved. 

Once we have our formulas we need to calculate the speed. We hold our card position in variables and use them to calculate the speed of the card. By multiplying the fraction of the maximum speed and the maximum tilt angle we get the tilt of the card at that instant in time. Below is the snippet of code.

            speedx = (pointx - lastpointx) / Time.deltaTime;
            anglex = (float) ((speedx / MAXSPEED) * 20.0);
            speedy = (pointy - lastpointy) / Time.deltaTime;
            angley = (float)((speedy / MAXSPEED) * 20.0);

            var rotationVector = transform.rotation.eulerAngles;
            rotationVector.x = angley;
            rotationVector.y = anglex;
            rotationVector.z = 0;
            transform.localRotation = Quaternion.Euler(rotationVector);

There you have it! A simple way to add a better feel to your cards in your card game. Below is a demonstration of how it turned out.