Aligning Cards in Hand Deck

[moh05]

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.

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:

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

[Fattie]

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.