Thank you for using the Card Game Toolkit for Unity !
To open the Card Prefab Creator window, go to Window > Card Game Toolkit > Card Prefab Creator.
You can dock the window like any standard Unity editor window.
Sprite Sheet (Texture2D): The sliced sprite sheet that contains your card graphics.
➤ See Unity Sprite Editor Documentation to slice your sheet properly.
Destination Folder: The folder where the prefabs will be saved.
➤ In the Project window, right-click your target folder → Copy Path → right-click this field in the window → Paste.
Suit Amount: how many different suits are present in the sheet
Cards per suit: how many different cards make up a suit in the sheet
Use card back: if the sprite-sheet contains a texture for the back of the cards enabe this field.
➤ The back sprite must be placed BEFORE all others within the sheet (this is required for the card flip effect).
Suit Names: the names of the different suits (rearrange the list to match your sprites layout in the sheet)
Skip Indices: Indexes of sprites to ignore.
Card Components Settings: here you can find different parameters for your card prefabs:
➤ A BoxCollider2d and rigidbody2d will be added to the cards to allow Trigger events to be detected.
➤ Create card shadow: will create a drop shadow object (child of the card visual object) from each sprite, with an offset.
Before using the Card Prefab Creator, make sure to:
Slice your sprite sheet with Unity's Sprite Editor.
Organize the sheet so cards in each suit appear sequentially (e.g. from Ace to King).
Steps:
Assign your sliced sprite sheet to the Sprite Sheet field.
Set the Destination Folder (right-click the folder in Project view > Copy Path > Paste).
Set the Suit Amount and Suit Names (you can rename and reorder).
If the total sprites exceed (suit count × cards per suit), remaining sprites will be named "Missing Suit", unless skipped via the Skip Indices array.
Optionally assign a layer mask and enable card shadow creation.
Click Create Prefabs. Prefabs will appear in the folder within a few seconds.
Mistake? Just delete the prefabs, tweak settings, and recreate!
Card Data: this is the component that olds the cards data;
exposed variables:
int value;
string suite;
Sprite front;
Sprite back;
Automatically assigned by the prefab creator.
If Use Card Back is disabled, CardData.back will be null.
You can also assign values manually through code.
Card Behaviour:
Handles card interaction logic.
Behaviour Settings:
flipDuration (float)
cardScaleFactor (float)
cardScaleDuration (float)
cardHoverTiltSpeed (float)
dragSpeed (float)
cardMovementRotationStrength (float)
snapToCursor (bool)
Exposed Variables:
CardData Data { get }
Transform CardVisuals;
Sprite[] Sprites; // [0] = front, [1] = back
SpriteRenderer spriteRenderer; //CardVisuals renderer
SpriteRenderer shadowRenderer; //null if prefab was creating without "Create card shadow" enabled
bool IsFaceUp { get }
bool IsScaledOne { get }
Vector3 MousePos;
Exposed Methods:
RefreshSpritesData(); //use this after changing card data's sprite at runtime
SetContext(ICardContext context);
MoveToPosition(Vector3 destination, float duration);
FlipCard();
ToggleCardFace(bool faceUp); //sets the card visual renderer's sprite to front (if true) or back. Instant (no animation)
Scale(bool up);
HoverRotation(); //animates the tilt of the card visuals, relative to MousePos;
RotationReset(); //sets the card visuals rotation to Quaternion.identity; Instant (no animation)
BeginCardDrag(bool isAnchored = false);
DropCard(bool resetRotation); //stop dragging
CardBehaviour uses Unity’s Input system way of handling mouse input.
OnPointerEnter, OnPointerMove, OnPointerExit
OnPointerDown, OnPointerUp
This means that for CardBehaviour to register these events you need:
➤ A PhysicsRaycaster2D component on your camera
➤ An EventSystem object in your scene
OnTriggerEnter2D, OnTriggerExit2D
To determine how a card behaves in different scenarios, it calls context methods like Context.OnHover(this).
This decouples card logic from interaction rules, allowing context-based control.
ICardContext methods
OnMouseEnterCard(CardBehaviour card);
OnHover(CardBehaviour card);
OnDrag(CardBehaviour card);
OnMouseExitCard(CardBehaviour card);
AddCard(CardBehaviour card, bool destroyObject = false, bool flip = false);
GetContextPosition(); //returns a vector3
Board
The Board component is the most simple context. It only contains the ICardContext functions that either call card.someMethod (here card is the CardBehaviour calling the context's method) or do nothing.
CardPile
fields
List<GameObject> cardDeck; //in the case of a draw pile this would be filled with your card prefabs
bool AllowAddCard; //can the player add to the pile?
bool AllowTakeCard; //can the player take from the pile?
The card dealer demo shows 2 CardPile, one as a draw pile and the other as a discard pile.
methods
CardPile implements the ICardContext interface, but only uses AddCard (if AllowAddCard is set to true) and GetContextPosition. It contains other methods:
DrawRandomCard(Vector3 destination, ICardContext destinationContext = null); //instantiate a random GameObject from the cardDeck list and removes that card from that list. Calls SendDrawnCardTo(destination).
GetTopCard(Vector3 destination, ICardContext destinationContext = null); //instantiate the GameObject at the last index in the list, removes it from the list. Calls SendDrawnCardTo(destination).
RemoveCardFromDeck(GameObject card);
DrawRandomCard and GetTopCard will set the drawn card's context to destinationContext if the field isn't null. Does nothing if AllowTakeCard is set to false. SendDrawnCardTo() calls card.MoveToPosition().
Hand
fields
bool UseHandMax; //is there a maximum to the number of cards that can be added to the hand
int MaxCards; //only used if UseHandMax is set to false
float MaxHandWidth; //the maximum spread of the hand, on the x axis
float CardTargetSpacing; //The spacing between cards if MaxHandWidth is not met
bool CurvedFan; //place the cards in the hand to form a fan (cards in the middle are higher)
float FanCurveHeight; //The curvature of the fan. Only used if CurvedFan is true
The Hand component also contains private functions that are unique to it.
The Card Dealer Demo scene serves as an example on the proposed structure for your card game.
How To Test:
click play
click on the draw pile to draw a random card
click the drawn card to flip it up
drag it either to the hand region, or the discard pile
you can arrange the cards in your hand by drag and dropping them
you can right click on a card to add the Sheen effect to it
you can the space bar while hovering a card to dissolve it
The scene contains 3 different contexts:
Card Pile (draw pile and discard pile)
Board
Hand
A Demo Manager Script allows the high level interactions.
When a card is drawn it is send to the Board position and assigned the Board as context.
If the card is dragged from the board and dropped to either the Hand or the discard pile (the colliders must be in contact) it will get the new context.
Sheen effect: the card sheen effect shown in the demo is accomplished by spawning a CardSheen object (Assets > CGTK > Prefabs) as a child of the card
➤ This object uses a blank card sprite and the CardSheen material
CardSheen material:
MainTex (Texture2d): use a blank version of your cards for the effect to overlay nicely
Scale (Vector2): scales the effect on each axis.
➤ TIP: using different values for each axis allows to change the sheen direction
Edge Softness: controls the effect's edge width
Dissolve effect: the CardDissolve shader has a "_DissolveAmount" property, ranging from 0 to 1 that can be used to animate the effect over time
➤ for the effect to work best when using cards with shadows:
apply the same material to the shadow renderer, animate their values together.
Please note that the shadow renderer uses the card FRONT sprite (set on prefab creation) as for the card & shadow to dissolve in sync they must use the same sprite. You can set the shadow sprite by calling cardBehaviour.shadowRenderer.sprite = your sprite.
➤ to dissolve a card with a sheen effect you should destroy or disable the sheen object.
CardDissolve material:
MainTex (Texture2d): the card sprite that will be dissolved.
DissolveAmount (float): ranges from 0 to 1. //1 = entirely dissolved
NoiseScale (float): use this to change the aspect of the effect. Bigger values make tiny spots
DissolveScale (Vector2): you can use this to stretch the "holes" on either axis
➤ Sprites from Sheets will be distorded by default because shader graph uses the whole texture UVs. Simply set this value to the amount of sprites per row for x and columns for y.