Learn To Code Trading Card Game Battle System With Unity 3D

A comprehensive and easy to learn guide to crate a trading card game battle system with Unity 3D.

Created bySandor Kiss, Vladimir Limarchenko

Last updated 10/2023

English

What you'll learn

Create beautiful custom cards and creatures for your game
Show enlarged previews when you are hovering over a card or a creature
Enable card rotation and design a custom card back
Highlight cards that your players can play and creatures that can attack this turn with glows around their border
2 different ways to drag cards in trading card games: just dragging cards onto the battlefield area to play them, or dragging onto a specific target to cast spell or attack with creatures
Show targeting gizmo with an arrow and a target icon when attacking with creatures or casting spells
Create adaptive layouts for your player’s hand and table areas. We are not using pre-determined places for cards. All the creatures and cards will always remain centered
Make a Hearthsone-styled mana pool with 10 mana crystals. Players start the game with 0 mana and in the start of each turn they will receive 1 mana crystal
Create framed Hero portraits and round Hero Power buttons
Create a burning rope that will measure time left until the end of the turn
Create decks with variable thickness. The more cards your deck contains – the thicker it looks
Separate Visual and Logical part of your game (aka server – game client)
Create a simple system to manage, edit and create new cards, creatures or Hero classes
Manage turns in trading card games
Establish the most basic game mechanics of playing creatures and attacking opponent’s creatures or opponent’s Hero
Create custom effects for your spells and Hero Powers
Create diverse creature effects that might be triggered: when the creature enters the battlefield, when the creature dies, when the turn starts or ends or even when certain events occur in the game (like: when your Hero takes damage, draws a card, etc…)
Determine “game over” conditions and show some end game animations or events
Create a simple computer AI that will control opponent’s Hero

Course content

7 sections • 71 lectures • 15h 41m total length

Introduction to This Course12:11
This Course presents an in-depth guide on card game battle mechanics. We`ll start from creating a single card and gradually work towards making a complex battle system with custom spells, creatures, heroes and hero powers, computer AI and so on.
How to Watch This Course7:23
In this Lecture we`ll discuss different ways to watch this course. My main points for getting maximum benefit from this course:

While you watch this course, experiment and try to make your own game with your own art/ game mechanics, etc…
Skip to the parts of the course that you are most interested in.
Explore. Download the final version of the course and try to add your own cards or creatures to this project.
Communicate: ask your questions and post your suggestions. You can find my contact info in the Credits file.

Introduction to Section 27:29
In this Section we will focus on cards. Main topics of this section are: working with Unity UI to create Spell Card and Creature Card Game Objects, using custom scripts to rotate cards properly, managing and editing the information about our cards using ScriptableObject assets.
Preparation8:32
In this Lecture we will create an empty Unity project for our future card game. We`ll take a closer look at the downloads folder that you`ll get with this course and import all the Sprites into our newly created project.
Creating a Card Template with Unity UI15:38
For this game our instrument of choice for creating cards is Unity User Interface features (UI). In this Lecture we will experiment with Unity UI and create a template for a single card. We will discuss UI anchoring – a very important concept while working with user interfaces in Unity.
Simple Decorations11:21
In this Lecture we`ll apply a texture to our card template. We`ll also add a simple frame decoration around the edge of our card.
Creating a Face Side for a Spell Card17:16
In this Lecture we will continue decorating our card template. We`ll add all the remaining visual elements to our card: ribbons that will display the title and type of our card, a mana cost icon, a description field and an image that will display the main graphical element on our spell card.
Creating a Card Back and Adding Beautiful Text Outlines11:50
In this Lecture we`ll make a card back that will be used for all the cards in our game. We`ll take a look at a set of custom scripts that will help us apply smooth outlines to Text components in our game.
Card Rotation16:54
In this Lecture we will explore a custom script that will let us rotate the cards properly. This script will ensure that we show the card's face when the card is facing with its face side towards the camera and that we show our card`s back when the card is facing with its card back towards the camera.
Editing Cards with Scriptable Object Assets13:51
In this Lecture you will learn how to store data by creating your own assets in Unity. This method will be used for creating and managing cards (Card Asset) and heroes/characters (Character Asset) in our game project.
Applying the Visual Appearance from a Card Asset onto a Single Card19:20
In this Lecture we`ll check out the script that will help us read the information from our CardAsset and apply it to the card in our scene, changing its mana cost, description, title, main graphic, etc…
Card Glow and Creature Cards – Part 18:09
In this Lecture we`ll spend a couple of minutes in Photoshop and I`ll show you an easy way of creating glow outlines for any custom shape. We`ll apply pre-made outline to our spell cards.
Card Glow and Creature Cards – Part 213:34
In this lecture by making several adjustments we`ll turn our spell card template into a new template that will be used for our creature cards. You will learn how to use UI Masks in Unity to mask a certain portion of our card`s main graphic. This will help us add non-rectangular frames to our creature cards.

Introduction to Section 36:07
In this Section we will add more visual elements to our battle scene: player portraits, mana pools, a rope to measure time until the end of the turn, a simple background image. We`ll create one more prefab that will represent creatures in our game. We`ll have our first discussion on how dragging of cards and creatures works in this game. And we`ll use a tweening engine (in our case – DOTween Engine) for the first time.
Simple Dragging Script16:43
In most modern card games players interact with the game by dragging cards and creatures on the battlefield. In this Lecture we`ll discuss the basics of card dragging and explore the simplest script that can be used for implementing dragging in our game.
Advanced Dragging Script16:26
In this Lecture we`ll take a look at a modified version of our dragging script from the previous Lecture. New dragging script will offer the same functionality, but it will rely on another script component to answer questions like: can we drag this card right now, what should happen when we start/finish dragging this card, what should happen during dragging process, etc…
Creating Card Previews – Part 111:49
In this Lecture we`ll discuss a method that we`ll use to display enlarged previews of our cards and creatures. This will help players read descriptions and stats for each card.
Creating Card Previews – Part 213:11
In this Lecture we`ll take a look at the script HoverPreview.cs that is responsible for displaying all the previews of our cards and creatures.
Making a Creature Game Object15:41
In this Lecture we will create a prefab of our creature. Creatures will have oval frames and display their cards as previews.
Making a Mana Pool – Part 114:42
In this Lecture we will design the visual representation of our custom mana pool. You will learn how to use layout groups to organize UI elements in Unity. Just like in Hearthstone, our players will have a maximum of 10 mana crystals. Each turn a new mana crystal will be added to their mana pool. Mana crystals can later be used to play cards and use hero power.
Making a Mana Pool – Part 213:12
In this Lecture we will take a look at the script that will control the behavior of our mana pool. And we`ll configure everything in Unity Editor to test our mana pool`s performance.
Making Player Portraits – Part 19:29
In this Lecture we will design a game object that will display the portraits of our heroes in the game. It will use similar masking technique to the one that we used with our creatures.
Making Player Portraits – Part 212:43
This Lecture is dedicated to making Hero Power buttons that should be displayed beside our player portraits in the scene. We will discuss an interesting topic of making non-rectangular buttons in Unity.
Creating a Burning Rope Timer17:02
In this Lecture we will create a rope fuse to count down time until the end of our players turn and create a sense of urgency by the end of the turn. We will also make an End Turn button and a simple numeric timer to display the amount of time left until the end of the turn.
Creating a 3D Deck with Variable Thickness12:38
In this Lecture we will create our player`s decks. We`ll bring in some elementary 3d elements to our scene to make the decks vary in thickness depending on the amount of cards that they contain.
Assembling the Battle Scene Layout11:45
In this Lecture we`ll use all the visual elements that we have created so far to build a layout of the battle scene that our players will see during the game.
Organizing Cards and Creatures13:50
In this Lecture we`ll take a look at the scripts that will help us neatly organize the moving elements of our game – cards and creatures. This script will be used both for our player`s hand areas and for their table areas.

Introduction to Section 44:53
In this Section we will start by studying the relationships between Visual and Logical parts of our game. Other topics discussed in this Section: targeted cards and targeted dragging, Damage Effects, showing “Your Turn” messages.
Separating Visual Presentation from Logic13:30
Most modern card games use so-called Authoritative Networking (logic running on the server and each player`s game acts only as a remote control to the server). Even though we are making a single player game, we`ll discuss how we are going to handle this visual/logic separation in our project.
Introduction to Command System18:56
In this Lecture we`ll take a look at the system that will connect our game logic and our visual representation – the system of Commands. Commands will also let us organize everything that should happen visually in the game (card draw, attacking, taking damage, etc…) in a certain order and show all these events in a sequence.
Command System – A Use Case Scenario16:05
Because understanding how Commands will work in this application is very important, in this Lecture we`ll go through an example scenario and check out what happens behind the scenes in our game during card draw, attacks, damage dealing, etc…
Applying Visual Looks from a Card Asset onto a Creature11:03
In this Lecture we`ll take a look at a script that will be used to transmit all the information from our Card Asset to our creatures. It will be used to change appearance of a new creature when it is played from hand and added to our player`s table.
Using Character Assets to Create Class Cards9:06
We will customize the look of our cards by making them either neutral (all heroes can use these cards) or we can make them belong to a particular character (class-exclusive cards). Class cards will have different color schemes. This color information for class cards will be stored in Character Assets.
Applying the Info Stored in Character Asset to Player's Portrait7:27
In this Lecture we`ll use the same approach that we have used with our cards and creatures to apply the looks to our players` portraits and hero power buttons from Character Assets.
Damage Effects – Part 18:36
In our game Damage Effect is just a game object that will be drawn on top of the character that has taken damage. It will also display the amount of damage taken. This Lecture is dedicated to creating a Damage Effect game object and in the next lecture we`ll take care of scripting.
Damage Effects – Part 217:12
In this Lecture we will take a look at DamageEffect.cs script that will handle displaying our Damage Effects and fading them after a couple of seconds.
Targeting System – Introduction15:50
For cards that say something like:” Deal 2 damage to target enemy” and for our creatures we want to have a system that will let our players choose target for spells and creature attacks. Instead of dragging these cards or dragging characters to attack, we will drag a special target gizmo. And we`ll draw an arrow between our game object and this gizmo.
Targeting System – Troubleshooting and Testing18:10
In this Lecture we will take a look at the code that is responsible for targeting behavior in our game. We will discuss how it handles line-drawing, rotating the pointy end of our arrow, moving the target gizmo and spacing all these elements correctly in our scene. And we will get to test these targeting features for our so-called “Targeted Spell Cards”.
Message Manager12:29
In this Lecture we`ll create a panel to show messages like: “Your Turn” or “Enemy`s Turn” to our players. We will check out a simple script that will be responsible for displaying these messages in our game.

Introduction to Section 53:48
In this Section we want to establish the most basic mechanics of any trading card game: drawing cards from deck, playing creature cards and spawning a new creature on the battlefield, attacking with creatures, taking damage, showing creature`s death, etc…
Adding All the Remaining Scripts13:58
In this Lecture we will import all the scripts from our Downloads folder that we need to have in our project in order for this game to function, including all the Logic and Commands scripts, as well as some of the Visual scripts that we do not have in our project yet. We`ll take our first look at the Player.cs script, which is one of the main scripts of our game`s Logic.
Assembling Game Logic and Deck Shuffling14:44
In this Lecture we will start attaching our Logic scripts like Player.cs, Hand.cs, Deck.cs, Table.cs to the game objects that we have prepared in the hierarchy. We will take a look at the script ShufflingExtentions.cs that will let us shuffle the cards in our player`s deck when the scene is loaded.
Dragging Scripts and GlobalSettings.cs12:30
In this Lecture we will remove all the testing scripts that we have used to explain how dragging works in the game. Instead of them, we will attach all the scripts that will be actually used for dragging cards and creatures in the game. We will check out a script GlobalSettings.cs that will store references to our card and creature prefabs, time intervals that will be used for card transitions and other info that will affect our game`s performance.
Turn Manager Script17:25
In this Lecture we`ll take a look at the script that will be responsible for starting the battle between our players and switching turns in the game. We start working on making the burning rope in our scene functional by adding a script that is called RopeTimer.cs to our TurnManager game object.
Rope Testing and Unity Events11:44
In this Lecture we will introduce several changes to our project to be able to test our burning rope. We will take a look at RopeTimer.cs script that controls our rope. We`ll discuss UnityEvents, like the ones that you can find on UI Buttons in Unity and I`ll show you a way of adding these events to your own custom scripts.
Card Scripts and ID System12:54
In this Lecture we`ll take a look at the script CardLogic.cs that will describe a single card in the Logic part of our game. We will also discuss a system of IDs that will be used for our cards, creatures and even players to connect the entities from logic like Player.cs, CardLogic.cs and CreatureLogic.cs with the Visual game objects that represent them in our scene.
Creature Script18:38
In this Lecture we will discuss the script CreatureLogic.cs that will desctibe creatures in the Logic part of our game in utmost detail. We`ll take a look at all the methods and properties of this script and we`ll check out how this script works with our system of Commands to send messages about attacking and taking damage to the visual part of our game.
Configuring Player Areas19:43
In this Lecture we will continue working on our LowerPlayerArea. We will introduce a script PlayerArea.cs that will store the references to all the visual stuff that our player has and will help to establish the connection of our Player.cs object in Logic with all the visual stuff that belongs to this player. We will establish all the references of our HandVisual.cs script that include different sources of card draw and different spots to preview our cards.
Table Script19:41
In this Lecture we will take a look at a script TableVisual.cs that will be responsible for adding new creatures to our player`s table and making sure that they are placed on correct slots and that all the creatures are always centered on our table area. Some of the techniques that are used in this script are used in HandVisual.cs script to manage the card in our player`s hand.
Hand Script26:17
In this Lecture we will discuss the script HandVisual.cs that will take care of drawing cards in the visual part of our game. It will manage the cards in our player`s hand so that new cards will always be added to the rightmost spot in the hand and the hand as a whole always stays in the middle of the screen. This lecture will contain a comprehensive guide on using DoTween sequences.
Command System – Scripts of Individual Commands15:15
So far we have discussed our Command system in general. In one of our previous lectures we`ve taken a look at the Command.cs class that will be the base class for all the Commands in the game. In this lecture we`ll study actual command scripts like DrawACardCommand.cs or CreatureAttackCommand.cs and we`ll discuss how they work in detail.
Decision Making in Dragging Scripts15:01
In this Lecture we`ll take a look at two different scripts, that are both children of our DraggingActions.cs script. We`ll mostly focus on their OnEndDrag() method, the method that figures out what should happen when our players decide to play spells or attack with their creatures.
Testing Card Draw14:39
In this Lecture we will introduce several changes to our project and test card drawing features. Because card draw happens through the system of Commands, even if we decide to draw 2 cards right one after the other, second card will anyway be drawn only after the first card arrives to our player`s hand.
Testing Playing Creatures and Dragging Attack Target10:56
In this Lecture we will do some preparations and test playing creature cards from hand. This simple action will test the whole pipeline that will start in our DraggingActions script for playing a creature card, then this action will be passed to Logic, there it will create a new PlayACreatureCommand that will add a new creature to the battlefield.
Testing Start Game Sequence15:28
In this Lecture we will create a fully functional Top Player Area by creating a clone of our Lower Player Area Game Object that we`ve been working on in all the previous lectures. We`ll then be able to test our battle starting sequence by calling the method OnGameStart() in TurnManager.cs.
Testing All the Basic Game Mechanics19:35
In this Lecture we`ll make some final tweaks to our battle scene and test the battle mechanics of playing creatures and attacking with creatures. Advanced game mechanics like: making spells and creatures with special effects will be covered in our next Section.

Introduction to Section 65:04
In this Section we will focus on making special effects that will be caused by our spells and creatures. We will also make a simple AI script that will let us play against а computer opponent.
Spell Effects and Hero Power Effects22:19
In this Lecture we will take a look at the script SpellEffect.cs that will be used for both spells and hero powers in our game. By the end of this Lecture we will test our “Coin” spell and hero powers for both of our players.
Creature Effects – Part 117:31
In this Lecture we will take a look at the script CreatureEffect.cs that will serve as a base class for all the creature effect scripts in our game. We`ll talk about one of the ways to cause creature effects using this script that is similar to Battlecry and Deathrattle effects in Hearthstone (your creature will cause its effect when it is played onto the battlefield or when it dies).
Creature Effects – Part 212:05
In this Lecture we will check out another way of creating creature effects, which involves listening to C# events. This way your creatures will be able to cause their effects when the turn starts or ends, when a spell is played, when a creature is played, when your player draws a card, takes damage, etc… In the end of this Lecture we will get to test all the creature effects and 2 more spells that will be present in the final version of our app.
Game Over Condition and Restarting the Game19:33
In this Lecture we will discuss in detail what will happen in the game when one of our players dies. Since we are making just this one Battle Scene, when the game is over we will display a simple one-button menu that will let us restart the same battle.
Computer AI25:00
In this Lecture we will first make all the necessary adjustments and play a single battle against our AI opponent. And then we`ll take a look at the script AITurnMaker.cs that will take all the decisions for our computer player in the game.
Player Class: Detailed Overview – Part 120:37
In this Lecture, first, we`ll have some fun and make one AI player battle against another AI player. Then we`ll fix several bugs related to our Damage effects and Creature effects. After all the bugs are fixed we will start a detailed discussion of our Player.cs class.
Player Class: Detailed Overview – Part 218:21
In this Lecture we`ll resume and continue our discussion of Player.cs class, mostly focusing on methods and stuff that our player can do in the game.
Conclusion14:53
In this final Lecture we will mostly discuss things that we did not cover in this course. Like making menus for character selection and deck building, initiating a battle from those menus and passing the info about our characters and decks into the battle scene. I`ll mention some of the things that I would personally like to add to this course in future. For example: support of “Taunt” creatures, a system of Buff Effects for creatures, etc…
Thanks a lot for watching this course. It`s been a pleasure making this course for you. And, of course, good luck with your own original trading card games!

Credits1:07
In this lecture you will find detailed information about all the resources we used during the course and direct contact information to the instructor.
Saved Projects0:02
Download all the Saved Projects that we used during the course.
Available files:
CardGameCourse202.zip (34.9 MB)
CardGameCourse203.zip (35.0 MB)
CardGameCourse204.zip (35.0 MB)
CardGameCourse205.zip (35.0 MB)
CardGameCourse206.zip (35.0 MB)
CardGameCourse207.zip (35.0 MB)
CardGameCourse208.zip (35.0 MB)
CardGameCourse209.zip (35.1 MB)
CardGameCourse211.zip (35.4 MB)
CardGameCourse303.zip (35.4 MB)
CardGameCourse305 Hover Previews.zip (35.5 MB)
CardGameCourse306 Creatures.zip (35.5 MB)
CardGameCourse308 ManaPools.zip (35.5 MB)
CardGameCourse310 PortraitAndHeroPower.zip (35.5 MB)
CardGameCourse311 Rope.zip (35.5 MB)
CardGameCourse312 Decks.zip (35.5 MB)
CardGameCourse405.zip (35.5 MB)
CardGameCourse406.zip (35.5 MB)
CardGameCourse407.zip (35.5 MB)
CardGameCourse409 DamageEffects.zip (35.6 MB)
CardGameCourse411.zip (35.6 MB)
CardGameCourse502 Importing New Scripts.zip (35.8 MB)
CardGameCourse503.zip (35.8 MB)
CardGameCourse504.zip (35.8 MB)
CardGameCourse505.zip (35.8 MB)
CardGameCourse506 Timer.zip (35.8 MB)
CardGameCourse507 CardLogic.zip (35.8 MB)
CardGameCourse508 CreatureLogic.zip (35.8 MB)
CardGameCourse509 HandVisual.zip (35.8 MB)
CardGameCourse510 Table.zip (35.8 MB)
CardGameCourse511 HandDiscussion.zip (35.8 MB)
CardGameCourse514 DrawTesting.zip (35.8 MB)
CardGameCourse515 CreaturePlaying.zip (35.8 MB)
CardGameCourse516 TurnManager ON.zip (35.8 MB)
CardGameCourse517 Coin And Creatures.zip (35.8 MB)
CardGameCourse602 SpellFX.zip (35.8 MB)
CardGameCourse604 CreatureFX.zip (35.8 MB)
CardGameCourse605 EndGame.zip (35.9 MB)
CardGameCourse606 AI.zip (35.9 MB)
CardGameCourse609Conclusions.zip (35.9 MB)
CardsWithArmor.zip (46.7 MB)
All Scripts0:02
In this lecture you will be able to download all scripts we used.
Slides0:02
In this lecture you will be able to download pictures of the slides we used during the course.
Additional Materials0:02
In this lecture you will be able to download additional resources.
Bonus Lecture20:53
Sneak peek into a real world trading card game

Requirements

First couple of Sections in this course are very beginner friendly. In these Sections we spend most of the time working in Unity Editor. So anyone can learn how to make and rotate cards, create other visual elements that are used in this game.
In Sections 4-6 we use some advanced scripting techniques to establish all the processes that happen in our game Logic, write AI scripts and so on. So for the final lectures of this course it is best if you have some previous experience with C#. I try to explain everything that I am doing as much as I can.
You should install the latest version of Unity3D to work on this course and open example projects that are provided with this course (to develop this game I used Unity 5.4 beta, so any version of Unity after 5.4 will do).

Description

This course provides a full guide on trading card game battle mechanics.

The material in this course is divided into 6 Sections. Section 1 features a short introduction to the course.

In Section 2 we will focus on making cards. We will use Unity UI features to create both faces and card backs of our cards. Spell cards and creature cards will be designed a bit differently. Creature cards will have distinctive oval frames around creature images. You will learn how to rotate cards that are made with Unity UI properly. We will do some scripting to make a simple system that will allow us to create and edit our cards as assets in Unity.

In Section 3 we will continue working on different visual elements: mana pools, rope timer, hero portraits, end turn button and so on. By the end of this Section we will assemble a visual layout of our Battle Scene that our players will see in the final version of the game. We will also explore several scripts that will help us drag cards in the game, organize and display enlarged previews of cards and creatures.

In Section 4 we will prepare our project for bringing in all the scripts that will handle Logic in our game. We`ll start by taking a look at a small slideshow that will explain the relationship between Visual and Logical parts of our game. We`ll add several new Visual features – Damage Effects that will display amounts of damage taken by creatures or heroes in the game, a simple system that will show messages in the start of each turn and targeted dragging for spell cards and creature attacks.

Section 5 is the most complicated Section of this course in terms of scripting. We`ll bring all the remaining scripts, including all the Logic scripts into our project. Our goal for this Section is to establish the most basic game mechanics of drawing cards from deck, playing creatures onto the battlefield and attacking either our opponent`s hero or his creatures. We will also discuss turn management and test our burning rope timer.

In the final section of this course you will learn to create spell and creature effects for your game. Creature effects might be caused when the creature enters the battlefield, when the creature dies, when the turn starts or ends or even when certain events occur in the game (like: when your Hero takes damage, draws a card, etc…). We will also take a look at a simple AI script that will control our opponent`s behavior and let us play this game against the computer.

I have tried to save the project that I was working in as often as I can so that you can easily pick up the material from any point in this course. All these assets that are used to create cards, creatures, hero powers and other game elements are free for commercial use and available for download with this course. You can find detailed info on art and scripting assets and links to some other useful resources in the Credits file that you can download with this course.

Who this course is for:

This course is for trading card game enthusiasts and for people who are interested in making card games like Hearthstone and Magic the Gathering. It will help you both build your own trading card game and explore what happens behind the scenes in your favorite trading card games.

Learn To Code Trading Card Game Battle System With Unity 3D

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 20min

Cards11 lectures • 2hr 24min

Battle Scene Visual Layout14 lectures • 3hr 5min

Preparing To Introduce Logic Scripts To Our Game12 lectures • 2hr 33min

Basic Game Mechanics17 lectures • 4hr 22min

Advanced Game Mechanics9 lectures • 2hr 35min

Bonus Section / Downloads Section6 lectures • 22min

Requirements

Description

Who this course is for: