Aligning Cards in Hand Deck

Question

Hello guys!

I am developing a card game similar to Monopoly Deal.

For now, I am trying to implement the hand deck style of Hearthstone.

alt text

As a test, I created a button that adds a card to a specific location in my screen. Below is the button script. When the button is pressed, the FitCard function is called.

 public class orderCards : MonoBehaviour 
 {
     public List <Image> items ; // List that holds all my ten cards
     public Transform start;  //Location where to start adding my cards
     public Transform HandDeck; //The hand panel reference
     public float howManyAdded; // How many cards I added so far
     float gapFromOneItemToTheNextOne; //the gap I need between each card
 
     void Start()
     {
         howManyAdded = 0.0f;
         gapFromOneItemToTheNextOne = 1.0f;
     }
 
     public void FitCards()
     {
 
         if (items.Count == 0) //if list is null, stop function
             return;
 
         Image img = items [0]; //Reference to first image in my list
 
         img.transform.position = start.position; //relocating my card to the Start Position
         img.transform.position += new Vector3 (( howManyAdded*gapFromOneItemToTheNextOne), 0, 0); // Moving my card 1f to the right
         img.transform.SetParent (HandDeck); //Setting ym card parent to be the Hand Panel
 
         items.RemoveAt (0);
         howManyAdded++;
     }
 }

What I get is this so far: alt text

I am just wondering how to implement the curvy alignment. Any help will be much appreciated :)

Answer 1

try adding a line

 img.transform.Rotate( 0f, 0f, -6f );

to all the cards.

After you experiment with that, try some code like this ..

 float totalTwist = 20f;
 // 20f for example, try various values
 int numberOfCards = ... get this from your List or array
 float twistPerCard = totalTwist / numberOfCards;
 float startTwist = -1f * (totalTwist / 2f);

where you use howManyAdded , basically do this...

 float twistForThisCard = startTwist +
            (howManyAdded * twistPerCard);
 img.transform.Rotate( 0f, 0f, twistForThisCard);

That should get you going.

Further, note that the cards on each end should sit "down" a bit.

Try adding code like this...

 float scalingFactor = 0.01f;
 // that should be roughly one-tenth the height of one
 // of your cards, just experiment until it works well
 float nudgeThisCard = Mathf.Abs( twistForThisCard);
 nudgeThisCard *= scalingFactor;
 img.transform.Translate( 0f, -nudgeThisCard, 0f );

Have fun!

Now, you can improve you look by slightly randomizing each value, for the twist and the nudge.

This is a good chance for you to...

...learn how to make an extension in c#.

Make a new text file HandyExtensions.cs like this ...

 using UnityEngine;
 using System.Collections;
 using System.Collections.Generic;
 
 public static class HandyExtensions
     {
     public static float Jiggled(this float ff)
         {
         return ff * Random.Range(0.9f,1.1f);
         }
     }

As you can see, the Jiggled() extension will take a float and change it slightly. Try it like this

 float x = 3.5f;
 Debug.Log("x is " + x);
 Debug.Log("x is " + x.Jiggled() );
 Debug.Log("x is " + x.Jiggled() );
 Debug.Log("x is " + x.Jiggled() );
 Debug.Log("x is " + x.Jiggled() );
 Debug.Log("x is " + x.Jiggled() );

Do some tests like that until you have a good understanding of extensions.

As you can see it's one of the most powerful language features.

So, where you have these two lines of code

 img.transform.Rotate( 0f, 0f, twistForThisCard);
 img.transform.Translate( 0f, -nudgeThisCard, 0f );

simply change to

 img.transform.Rotate( 0f, 0f, twistForThisCard.Jiggled() );
 img.transform.Translate( 0f, -nudgeThisCard.Jiggled(), 0f );

Hope it gets you started.

Aligning Cards in Hand Deck

1 Reply

...learn how to make an extension in c#.

Follow this Question

Related Questions