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.

5 Card Game Prototype Design Tips

Tips that we learned along the way

This guide will provide 5 easy and effective design tips to think about while developing your own card game. You can apply this to any board game you plan to develop.  These tips come from the internet as well as some experiences we learned from our development process and play testing. Enjoy!

5. Don’t worry about Art too early in the design process

Your game should be interesting enough without the art (unless your game focuses solely on the art like Dixit). Having no art for your prototype is completely fine. It's okay to bring your prototype to local board game stores to test with only placeholder art. It's also okay to use placeholder art taken from the internet but make sure you replace it for your final product. If you’re far enough in the design process that you have a good idea of what the final design will look like, use the placeholder space for quick notes while play testing. Early prototype art can have an affect on your game. We found that people would gravitate towards choosing our characters with the nicer placeholder art so watch out for that!

4. Assign a Card ID to each card to use when referencing it

  "Let's talk about that dragon card....that purply thorny one."

"Let's talk about that dragon card....that purply thorny one."

It's very difficult to design cards when you're having trouble recalling what card your notes are referring to. Depending on the flavor of your game, you may have groups of cards that are very similar. It is important to be able to differentiate them when making notes for future changes.

This also means you won't need to deal with card names until later, or in case any card names change. When dealing with files, you can easily reference the card ID instead of the name, and that consistency really helps if multiple people are working on the same project.
 

3. Embrace the use of Card Sleeves

Your prototype cards will probably just be pieces of paper. To make these "cards" easier to handle, you can sleeve and back the cards to give them more support. This will help with larger card games where shuffling is required (or when you want to throw them at your opponent because you just lost). It also helps make the cards last longer, so you won’t have to reprint them as often.

Unless your game uses weird shapes for your cards, you should familiarize yourself with the standard card sizes that other popular games use. Use a standard size so that you can start sleeving your cards. You can familiarize yourself with the different types of card sizes that are used by well known games here:

http://boardgamegeek.com/geeklist/48357/card-size-database

Or, better yet, go down to your local game store and see what they have in stock.

2. Use distinct Templates to categorize cards

Just like how video games use silhouettes as a quick way to relay information to a player, templates in a card game can do the same. Design your base templates differently to show that one type of card works differently from another. They can also make certain cards stand out, drawing everyone’s attention when it is in play.

  Creature or spell? Any Hearthstone fans out there?

Creature or spell? Any Hearthstone fans out there?

1. Associate Size with Importance

You need to determine what is important to your players, what information they need to be able to process at a glance when looking at your cards. The size of the object/symbol/information should be proportional to how relevant it is to the player.

  Is that a bird? A plane? No...It's a red magic card.

Is that a bird? A plane? No...It's a red magic card.

Take a look at a Magic card. What is important? Cost, name, and power/toughness? Yes, those are all pretty important, but what is more important than all that? Color! In Magic: the Gathering, the color of the card is involved in a lot of interactions and is one of the core ideas of the game. That's why, even from a mile away, you can tell which card is what color on the table.

  How to fish for copper?

How to fish for copper?

Using large symbols not only helps the player digest the information on the card with ease, but also allows others in the game to follow along with what they are doing.

That concludes our tips for any aspiring designers out there. We've been developing prototypes for a while now and wanted to share what we've learned. Thank you for reading and check out our Print and Play Tutorial!