Develop Trading Card Game Battle System With Unity 3D: Part I (Getting Started & Preparations) | Vladimir Limarchenko | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Develop Trading Card Game Battle System With Unity 3D: Part I (Getting Started & Preparations)

teacher avatar Vladimir Limarchenko, Game Developer, Unity3d and C#

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (1h 20m)
    • 1. Introduction to This Course

    • 2. How to Watch This Course

    • 3. Introduction to Section 2

    • 4. Preparation

    • 5. Creating a Card Template with Unity UI

    • 6. Simple Decorations

    • 7. Creating a Face Side for a Spell Card

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Card games are massively popular right now. Since the release of Hearhstone, we've seen many interesting card games from other companies: The Elder Scrolls: Legends, Faeria, Gwent.

In this class/series we set an ambitious goal of developing our own trading card game with Unity3d and C#, mostly focusing on card game battle mechanics.

Learn how to design a card for your trading card game in Unity:

  • Create a Unity project and set up a scene for our future card game battle.
  • Use wide variety of tools and techniques of Unity UI to create your custom card.
  • Learn useful concepts of working with Unity UI: working with RectTransforms, anchoring, 9-slicing for creating frames.

By the end of this class you will learn how to design a custom card face for your trading card game, display description info, mana cost and main card graphic image.

With this class you will gain access to a compete, fully functional Unity project that is an example of a card game battle. The game mechanics are somewhat similar to Hearthstone: custom spells, hero powers, creature effects and so on.

Additional information:

  • The files showed in the course are downloadable from the link that you can find in the "Class Project".
  • The next class of this series will be published on 2016.12.01.

Meet Your Teacher

Teacher Profile Image

Vladimir Limarchenko

Game Developer, Unity3d and C#


I am a Unity3d and C# developer with about 2,5 years of experience in game development. I also have a scientific background. I got a Ph.D. in Theoretical Mechanics in 2014, but then decided to pursue my childhood dream of becoming a game developer. I'm mostly interested in making 2D games. In my opinion, a perfect game should have some tactical or puzzle element to it.

Over the last couple of years I've also worked as an instructor and created several courses on game development. Some of the topics of my courses are: making a 2048 game, building quiz apps, creating a simple virtual pet game, animating 2d characters, building an in-game character customization system.

I'm always willing to experiment and work on some interesting and challenging game mechanics.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction to This Course: Hello, everyone. And welcome to this course about making your own trading card game. Trading card games are insanely popular right now in this course will take our best shot at creating our own trading card game and will mostly focused on battle mechanics in card games. So we'll talk about things like drawing cards from deck playing creatures or spells from your hand using your characters here, Bowers attacking with creatures and creating creatures with different, interesting special effects. All these topics they will be covered in this course. This course is brought to you by me and my good friend. My friend's name is Sand or Kiss, and he's a video game. Enthusiasts just like me, his Olson entrepreneur. And it turns out that we share a common taste in games. So we both like trading card games, and my name is Vladimir Lee Marchenko. I am a unity and C sharp developer. I like trading card games even before they were so massively popular on the computer. So back then I played a lot off magic, the gathering, and ever since the release of Harsh Stone, I played a lot of Har Stone. That's why, and I have to admit this that our app will be very harsh, stony, so it will be very similar to harsh stone. And now I am already in this unity project and this is the project that will have by the end of this course. So now I think I will launch the game. And while the game is running, I wanted to tell you what to expect from this course what exactly will be making in this course. So in this game who have two players in our case, they will have different classes so they will have different hero powers, and later you can give them different card sets and so on and so forth. They will have their own decks, and when the game starts, they will draw a certain number off cards from their decks. And at this point, the battle begins. Players can play cards onto the battlefield. They can attack with their creatures if they have any creatures on their table or they can use their hero power. There's a little timer to measure time until the end of the turn, and when this timer approaches to zero, then this burning grope will appear that symbolizes that our turn will soon be over, and when this rope burns down completely, the turn will be given to our opponent. There is another way to Andy return. Even before waiting for the rope to burn down, you can press on this end turn button. There are some interesting graphical features that I personally like very much. For example, we have these decks that change their thickness. When we draw cards from the deck, the deck becomes less and less thick, and in the beginning, off our battle, the deck is at its maximum thickness. Another major feature that will make in this course that I haven't seen in other courses about card games or in other assets off trading guard games are these interesting and variable table areas and hand areas for our players in our game. Both our hands and our tables there absolutely dynamic. So when we draw cards from our deck, the whole hand shifts so that it is always in the center off our screen and for the stable . This shifting principal is also true. No matter how many creatures you have on your table, this whole table area will always appear in the center off your screen and with creatures. You can also do other interesting things, like inserting your creature between two other creatures that are already on the battlefield. So you're creatures. They don't end up on one side of the battlefield. Instead, when you play them from hand, you get to select the actual slot or actual position on your table, where you want your creature to appear well, right, custom, special effects for our spells and for our hero powers and are creatures. They will have their own special effects as well, for example, from harsh stone boo implement effects that are similar to charge. So when a creature enters the battlefield, he's able to attack right away will make wind fury so that your creature will be able to attack twice or even more times per turn, and will also discuss how to make effects that are caused when your creature enters the battlefield or when your creature dies in harsh stone. These effects are called battle cry and death rattle, so we'll also do that. And for creature effects, they can be even more diverse actually. So I will show you how to make effects that will listen to certain events, and then you can create some special effects on your creatures that will happen, for example, in the end of the turn, in the start of the turn, when your player draws a card or when he takes damage or in some other interesting situations in your game. So we'll have a really advanced system off creature effects in this game. And I also wanted to talk about the limitations off this course. And in my opinion, this course has two main limitations. Limitation number one is that we're making this game on Lee single player so you can launch this game and play this app on Lee on your computer. And we're not discussing networking and connecting two players over the Net to play your game. But instead we're making another interesting thing, and I believe that this is the way that all these games like harsh stone magic, the gathering, their computer versions I mean, I believe that this is the way all these APs are actually made. We are separating the logical part off our game from the visual part of our game, and if you translate this into networking terms, what will refer to as logic in this course, it should be run on your server if you have one. So if you ever plan to make this game into a multiplayer game than everything that we refer to as logic in our course, it should be running on your server and everything that is visual about our game. It should be running on your players devices like computers or tablets or mobile phones. So that's the first limitation of this course. And the 2nd 1 is that we are making just this battle scene. So we're not making all the menus. We're not making the deck building. We're not making opening off guard backs and stuff like that. So what we'll talk about in this course is just this battle mechanics part, which I think is anyway, the most interesting part off these card games. So if you want to change the contents off your players decks or you want to change the classes for your players, you have to make some adjustments inside off Unity editor to do that. So this course is more like an in depth guide on card game battle mechanics than a full project off a card game. And so, with all these major limitations in mind, our course will have just one main seen that will be called the battle scene. And this apple have two different modes. In first mode, you can play against yourself so you can make decisions for both off our players and play cards for both of them. And this way, I think it is a good way to test your battle mechanics and to debug your app and see that everything works. And another possibility, or another mode in our game will be to play against computer A. I. So in this course in one of our final lectures, will also create a script that will be able to control one off our players and so will be able to play against the computer. And I also wanted to say a couple of words about how this course is structured, so this course has five main sections with content. This introduction section doesn't count and in our first couple of sections will start absolutely from scratch without having anything prepared and will start by creating a single card and then, in our first couple of sections, will be gradually creating all these visual elements that are present in our game. Then we'll discuss some more advanced concepts, like dragging off our cards. And I'll also show you how to make this advanced dragging system that draws this little line with an arrow and target gizmo in the end and in the last sections of the scores, who mostly be doing scripting. So the last sections off this course, they will be concerned with our logic, writing our AI scripts and integrating all these systems into our game. So if the first couple of sections they are very beginner friendly, so you can pick up the material and do everything that we do in our first sections, even if you have no previous experience with unity than for the final sections, it is best if you have some previous experience with C Sharp. So our remain scripting language for this game is C sharp. Another good news. You will get access to all the scripts that will be used in this course in advance, so will not be writing actual scripts because it will take a lot of time. Instead, we'll take scripts from the final version off this app that I've prepared and will just discuss how they work. It will let us speed up the process of development and speed up the base of the scores. Of course, you can download the final version off this app to check out how everything works. And I'll also be saving the project that I'm working in while I'm making this course from time to time so that if you'd like, you can develop this game with me and you can pick up the pace from any point in the course and my final point that I wanted to make in this video. I am very interested in communicating with my students. So if you like something about the scores, please let me know if you don't like something about this course than also, please let me know. And I am not treating this course or this app as an absolutely finished product. So based on your feedback about the scores, we can add some more features and we can add the features that you'd like to see in your game. And the only way to make this happen is by communicating. So I encourage you to communicate and to tell me what you think about the course, and so you can either write your comments and questions and everything else in the discussion section for this course, or I'll even include my contact information in one of the files that you get with this course and you can write me directly and tell me which topics are most interesting for you in this Guard game theme. And if you like this course, we can create more card game related content, for example, about creating menus for this card game, opening card packs, building decks, selecting different characters to battle with and so on and so forth. I would like to thank you for watching this video, and if you are interested, I'm excited to see you in the next lectures of the scores. 2. How to Watch This Course: Hello, everyone. And thanks for watching the scores in this lecture. I wanted to talk about the ways off, how you can approach the scores and how you can actually take this course. And I also wanted to let you know about some resource is that I've prepared for the scores . So my first advice about taking this course would be to download The Resource Is or Downloads folder that is variable with this course. Now, your downloads folder will look somewhat similar to this. So here you'll find this folder that it's cold saved projects. I've made sure that I saved my projects very often. And I wanted to do this because if you'd like to continue development of this game from any point in this course, you can just download my safe project and go along from there. And, of course, this folder will also contain the final version off our application. Then there will be this next folder that is called scripts. As I already said in this course, we're not writing all the scripts from scratch. Instead, we're using some pre made scripts that I've tested before, and we're doing this to speed up the process off development. So if I'll be typing all these strips than our course will take forever, then there's this folder with slides for Section four of this course. I've created a couple of slides to discuss some things that are related to the code in this game. So if you'd like to take a closer look at these slides than they're also available for download, you will also get a folder with older sprites from this game. And all the sprites that we use are downloaded from free sources so they're free for commercial use. And all the info about these sprites is provided in this credits file that we have for this course. And this credits file is something interesting, So I would like to open and show it to you in this credits file. First, we have the info about the authors of this course, and there's also my contact information. So my email and my Facebook page. If you'd like to share some off your experiences with this course, or even if you'd like to work together on some other project, then you can contact me by writing me an email or sending me a message on Facebook, and then this file has links to all the resource is that are used in this course as well as some other fun and interesting stuff. So first we have all these references to our art resources that are mostly taken from open game art or from free pick. So these are the sites that I've mostly used to get the art for this game, and then if we scroll a bit lower, there are also references for the code that we use in this course. I've included several links to harsh stone clones that I've found on the Internet and have also included this link to feature that we haven't used. That is called curved text. So they're confined a couple of scripts that will let you create curved text in the unity. I've had several problems with curved text in my project, so I am not including it into our app. But you can check it out on your own, and I think that it might prove useful in trading card games. Then there are links to several interesting articles and videos about harsh stone about twinning engines that who use in this course about easing functions who also take a look at this link in our course, and I found another interesting going to stream recording about a pixel art recreation off Harsh stone. It has a couple of setbacks. It's in French. It is very long. It is above 70 hours, and the author of this course or the author off this content, he doesn't use unity. Instead, he uses some other game engine but heels to use a C sharp. So if you're interested, also check out this link, but in our course will achieve much more in a much smaller period of time. Then I also had several references for the art that I used in the slides, and I think that that's pretty much it for this credits file. So if you'd like to find out where some of the resources that are used in this course come from, please check out this credits file. And once you've downloaded all these resources, I also wanted to share some advice that I think will grant you the best experience with the scores. So my first advice would be make something different. So in this course, we're making an app that everyone is familiar with because we're mostly using the game mechanics that are present in harsh stone. But with the game that you'd like to make, it doesn't have to be this way. So make something original and make something interesting while using the techniques that you find in the scores. My second advice would be communicate if you have any problems with the content in this course. If you don't understand how the scripts work, reach out to me or to your fellow students and ask questions. And if you'd like to see some more content, some more game mechanics in this course also reach out to me and we'll see if we can make this happen and next, even though all the content in this course is very dear to me, my next advice would be skip and be adventurous with this course, so you don't have to watch the scores lecture after lecture from start to finish, I encourage you to find the content that you are most interested in. For example, if you are interested in making cards and making something visual, check out our first couple of sections. If you are more interested in scripting, then check out our final section, and there's even this alternative path. If you already have experience with Unity and C sharp than just download the final version off our app and try to figure it out yourself. Try to create a couple more cards, try to create some you card or creature effects. And then, if you have any questions or something, has remained unclear. You can just jump back and watch a couple if lectures to clear things up for you. So a quick creek up off all my points that I've made in this lecture first, don't load the materials for the scores than make your own game and make something different. Another advice was about communication. So ask your questions, boast your suggestions and so on, and my final advice was focused on the content that you are most interested in. So skip to the parts of the course that you find most useful for yourself and also try to play with the final version off our app. Make your own spells, make your own creatures and discover how this project works from there. So for now, this introduction section is over. I'd like to thank you for your attention, and I'll see in our next section where we'll actually start developing our game 3. Introduction to Section 2: Hello and welcome to Section two of this course about creating your own card game. In the beginning, off each section, I will show you a short video with a glimpse off our project by the end of this section, so that it's easier to discuss our goals for this section. And also you will be able to see our progress in this section will just start working on our application. And I think that the prop aerated start is to make just one single card, and it might sound like it's not such a big deal, but cards. They're actually complicated objects in our game, and it takes a lot of effort to get them right. And once you do this, it gives you a boost of confidence, and it sets you on the right path to actually making full and interesting trading card game . And there are several main points that you have to know about our cards from this section. First, our cards are all made off unity. You I So in this section I will show you the workflow that I used to work with you. I and well designed these two cards so first will create this spell card and then, based on the spell card, will create a creature card that looks a bit different. It has these oval frames that frame our creature images. You also learn how to make them both of these cards. They look quite complicated in hierarchy, and they both have this other interesting feature. If we expand the card face for the spell card, for example, we also have these glow images. So around the border of the card, both for this card and for this other one we can have these card glows and I'll show you an easy way of making them yourself and second part. And let's even discuss this second part While this card glow is on, the second part is related to our cards rotation. So because we're making this card with unity, why, it is very easy to show these texts and mana costs and all these other elements. But it is a bit difficult and challenging to rotate these cards properly, so currently both of these guards they are facing with their face side towards us. But they also have another side that it's called the card back. And if we rotate the card. I'll show you a simple script that will enable this behaviour. So, for example, for our spell card, If I start rotating this card here in the Inspector, when this card is rotated with its card back towards us, then we'll be able to see this card back graphical element that will also design in this section. And if we rotate this card further, then we'll be able to see its card face again, and the script will work for all the directions off rotation. So if we try to rotate this card in its X axis, then will also be able to see its card back when we should. And if your cards are designed this way, combined with our perspective camera, you can do a lot of interesting tricks and effects. For example, you can position your cards this way and you can make animations off them, sort of flying towards the camera or flying away from the camera. And I think it just gives you more creative freedom with all the effects that you'd like to have in your game. So for now, I'll return this rotation to zero, and the same is true for our creature cards that we can do the same with this one. We can rotate this creature card and we can see it's card back. And there's another interesting feature that is connected to rotation when we rotate the guard, there are some elements they're sticking out of the surface off our card, for example, these ribbons and this top area off our oval frame and our man a crystal as well. They're old, sticking out of the borders off our card a little, and it's sold on just for creating this interesting visual effect. And when we start rotating the card, then we shouldn't know about the nature of this guard. So if when we see our card back, we're showing all these elements as well, then it will give out some information about the card, will be able to know that it's a creature, for example, and if we are rotating the guard with our card back towards us, then will no longer be able to see all these other elements, and I think that this effect is pretty cool. So next another point that is related to our cards that will discuss in this section is creating custom assets in unity and creating custom assets will let us have just one game object for our spell cards and another game object for our creature cards. So if you have, for example, 100 different spells in your game, you don't have to create 100 differently looking card game objects for each off your spells . Instead in our game will be managing our cards and creatures bit differently and more efficiently. So it turns out that in unity you can create your own assets that will hold certain information that you need for your game to function. So we're using exactly that, and this will all be covered in detail in this section. To manage our cards, we can create instances off this special thing that is called a card Asset will import a couple of scripts into our project that will enable this behaviour. So, for example, our card assets they will be contained in this folder. For now, we have just these two cards Eclipse and Fire Bull and both of these card assets. They will hold the information about different spells in our game. Greeting card assets is very easy. You can just right click here in your s. It's folder. Go to this create menu. And here, because of our scripts, you will have two extra options. You can either create a card asset or a character acid blue cover character assets later in the scores. For now, we can select Guard Asset and here we can pick a name for our card. For example, I'll type in whole and this way you will be able to create and manage new spells and creatures in your project. Here in the Inspector, you will see all the information that we need to describe our new how card. And in this section, you also learn to transmit this information that we have in our card assets to actual cards in your game. For now, we don't have any card assets for creatures, and we'll have them later. And now I have the asset off our fireball spell assigned to both of these cards. So it will be a bit weird because this creature will look like a fireball spell. But it is just for test purposes, and we'll fix it later. So if I now launch the game than both of these cards, they will display the information from our fireable card s it. So this section two off our course will be entirely dedicated to working on our cards. For now, I'd like to thank you for watching the scores and I'm looking forward to seeing you in the next lecture. 4. Preparation: Hello, everyone, and thank you for watching the scores about making your own trading card game. And this lecture is a preparation lecture. We will do some preparatory steps that are needed to start the development off our game. And first, to develop a game, we have to create a new unity project. I am using a new unity 5.4 beta, and I think that by the time you are viewing the scores, Unity 5.4 probably will be out of beta and you can download a stable version off 5.4. So I am using that. And the project creation is not complicated at all. You have to select your project name. I have selected card game course, and you have to select the location where you'd like to store your new card game project. And the only thing that's important for us is we should select this project to be a two D project and not a three D project, even though our cards will actually move in three D space, and we'll also have a perspective camera that is used to view three D space. Selecting duty over here will affect how our graphics get imported into our project. So if we select three d, all the images that we import into our project by default will become textures and they will be treated by unity s textures. And if we select duty than old images will be treated as sprites, which is exactly what we need. So we select duty and then proceed and click create project. It takes a couple of seconds for unity to load and create, and you empty project for us. And once unity loads, you can see that there is nothing in our scene whatsoever. And the layout off our unity project is pretty standard. So we have our game tab, our seen Tab Cherokee over here, and our Project AB, with our essence voter is completely empty. So there is nothing over here which leads us to another point of this video. So with this course, you will also get access to some downloads. And if you'd like to follow the material in the scores, please download all the files that are provided with the course. And I wanted to take a closer look at what you get with this course. So first in this downloads folder, there will be a sub folder that is called Saved Projects. Currently, it's empty because we haven't made anything in our project yet, but when we make some actual progress with the development off our card game, I will save the unity projects. Most likely, I'll just add them to archives, and I'll put them into this safe Projects folder. So by the end of the course, this folder will be full. And when you download all the resources for the scores here, you'll find all my saved projects and the final version off our unity project. If you'd like to experiment with it later. So this is the first folder. The second folder contains all the scripts from the application that we are developing. I've already done my homework, so I have the whole project, the whole card game already developed, and these are the scripts that I wrote and that I used for the card game that I've shown you to function. So instead off wasting our time and writing all the scripts from scratch. We'll just use the scripts that I already came up with. But we'll take a closer look at them and we'll experiment with them so that you understand exactly how everything works. And for now, we do not need all these scripts in our project because the scripts are somehow interconnected and they referenced each other so well. Gradually develop our application and when will need certain scripts? I'll just open this voter and pull in the scripts from here into our unity project one by one, and the next folder contains oldest sprites. So they're all the graphic elements that I've used to make this course work and to make this game work, for example, we have our hero portray. It's over here. We have our images that will use for spells. I've selected several images that will use for are creatures in this project, and there are also different frames, glows and effects. There are some Aikens that are used, so with the sprites, we can already import them rights into our project. So this whole folder I can just click on it, drag it and bring it into the Assets folder in unity. And once I release all these sprites, they will be imported, and we can later use them in our project. It takes a couple of seconds for unity to figure everything out and to import all the sprites. But now, if I opened this sprites folder, we can see that everything is here. And last but not least, I will jump back to our downloads folder and there will be this file that is called Credits . I have it already open somewhere. And this file it features all the references to all the resource is that I've used so all the references to the art resources and necessary attributions to all these resources. So if you like some off the art that I use in the game, you can actually find the links to all the files that are used in this credits file and also have a list off references. Do the code resources that I use and we'll talk about these resources throughout the course and for some of them will even have separate lectures. So these are all the code resources and also ill probably feature several articles that I liked about card games. And my favorite for now is definitely hard Stone cell talk about harsh stone a lot, and currently this list features just this link to an article about the development off our stone that I found very interesting. So if you like Har Stone as much as I do, you might want to check this article out. And now we can jump back to unity, and I sometimes forget to save the scene that we are going to work in. So let's do that. Even though we haven't introduced any changes to our seen yet and the scene contains Onley , the main camera, we can save the scene anyway. And in this new unity version, there is a new way of doing this so you can see that our scene is currently named Untitled . And there is this little drop down menu here, and we can select, save scene and give our scene and name now because we are focusing on battle simulation and making a battle with cards. I can call this one a battle scene, so I will just type in battle scene and he's safe. And once I have saved the scene, you can notice that in you seen Aiken has appeared in our SS voter, and this scene is currently named Battle scene here in the hierarchy. So once we have done all these steps we have created a new unity project. We have discussed all the downloads that you can get with this course, and we have imported all the sprites into our project. Which means that in the next lecture we can actually start working on our game, and the first thing that will make in this game is a single card. And the card is not such a simple object in trading card games because they have multiple interesting behaviors like we can drag and drop them. We can preview them. The cards might have different design. They might have different functions. So the card is actually very interesting objects in trading card games and in our next lecture will start making one. Thank you very much for watching this course, and I will see you in the next lecture. 5. Creating a Card Template with Unity UI: hello and welcome back to our course about creating trading card games. And I knew that I had to forget something in my previous video, and I actually forgot to put a folder with the fonts into my downloads folder. So this time I have fixed this issue. I've added the folder with the funds, and it has just one fund that we have to import into our project. So I'll grab the phones folder and I'll drag it into our Assets folder in Unity and it figure just one fund. It's called Devyn swish or something like that. And it looks like this. I actually like this fund and everything about this, except these brackets. I don't like the brackets because they appear at an angle. Otherwise, I think that the fund is great, But in your game, of course, you can use any other fund that you like. So now that we've imported this fund into our project, we can use it instead off de fold aerial front, and we can start working on our card Now. There are several ways to approach this card creation, and one of the approaches for creating cards is using quads or using planes to simulate our card and applying some textures to the plane. We can then display text on our cards by using a thing that is called a taxed mesh. So that is one option, and another option that I used in my game is using unity you y to display our cards. And I heard people say that using unity you are a lot might cause a performance hit for your game. But I have actually checked that, And the performance off my final project was actually pretty good. And here in the game tab, you have this stats option. And here in the graphics that usually showed the value somewhere below 1000 frames per second and it never dropped below 300 frames per second. So still, it's very impressive, and it had a reasonable value of these batches. So in terms off graphics, everything was working fine. So we'll go and stick with this approach now if you're new to unity. Previously, unity had another system off showing you why. And by you I I mean such things like Manu's buttons, health bars, brokers, bars and before unities version 4.6, you had to do a lot more scripting to show your U Y. And in unity version 4.6 they have introduced. And you, you I system that I personally like a lot. So let's start playing with this new unity. Why, and figure out what we can do with it in terms of making our cards. So I'll go to our hierarchy tab and here it can right click and create a new U I object. And this time I'd like to create a canvas. So what a canvas is It's actually a game object that is used to contain all the other you elements and all the elements. They're either text or images. So once we create our canvas in you, game object appears in our hierarchy. And if I double click on this new game object, you can notice that our canvas are actually huge, so they appear much larger than all the other elements in our scene or camera is super tiny relative to these cannabis is, and also our canvas is now set to this render mode screen space overlay, which means that all the contents off our canvas will be displayed on top off the image that is rendered by our camera. And currently we have just this main camera. So first thing we'd like to change this and I would like to set this render mode to world space, which means that now this canvas is just an object in the world and we want to make these canvasses represent our single card. So first, let's position it at 000 and you I game objects. You I components, they have this special transform that is cold wreck transform. And we will work with wreck, transforms and talk about them in this course a lot. But first, these position acts. Why and that they actually represent position off this game, object like in our ordinary transform. So by placing it at 000 it centers the canvas in the center off our camera, Then our canvases are currently huge. So to make them smaller, we can change their scale. And just by trial and error. In my previous project, I came up with a value off 0.5 and 0.5 in Why exits as well. So this makes our canvas much smaller, and also we can change the width and the hate off our canvas to actually be more like a card in terms off aspect ratio. So now if I double click on the canvas, it will focus the scene view on my canvas. This canvas is currently wider in horizontal direction, and I want to set its width to be 400 pixels, and it's hate to be 600 pixels. So now this game object will be used as a container for all the graphical elements, the frames, the descriptions, all the texts that we like to see on our card. And to start this off, let's right click on our canvas in the higher key, go to you I and create a panel. Once we change the scale off our canvas, when we create the panel, it will for some reason, appear with a very large scale. And we should change this back to one. So if I said the scale back to one, then our panel will just occupy the whole span off our cannons. So this panel, it already has a graphical component that is called an image. And for this panel, I didn't want it to have any graphical component. I just wanted it to be as apparent game object for our future card graphics, so I'll just eliminate this image component. I will click on this little gearbox, and I am not recording my whole screen. But in this drop down menu, there is an option that is called remove Component. So I'll remove this component off image from my panel, which leaves me just with an empty rectangle. An empty wreck transform. And I will rename this panel into a card panel, for example, and there's another thing that we can do for organizing our hierarchy. We can go and create another empty game object. El Select creates empty and renamed this game object into a card. But first, let's decide which card are we creating exactly. And I think that first we should create a spell card because it is a bit simpler. At least I've blend it so that the spell cards will be a bit simpler than the creature cards. So I'll call this one a spell card, and I have to make sure that this spell card game object is located at 000 and then I can just grab my canvas and make it a child off our spell card game. Object. So now the hierarchy is looking like this. We have our empty game object with no scripts, nothing that is called a spell card. Then we have our cannabis that is set to world space, and then we have our card panel. Now, as a child off our card panel, let us finally create a game object that will actually represent our card. So it will serve as a background off our card, and this will be the face side of far card. So I'll right click go to you I and create an image as I sat for some reason, when we create new game objects and we changed the scale off our cannabis, they will appear at this large scale off 200 soil. Change it back to one. Now let's double click on this image game object and zoom in on this image and one this image to occupy almost the whole span off our card panel. And we are not making it as large as our card panel or as large as our canvas, because it will later allow us to create lots and lots off interesting effects, and you will see those interesting effects on Lee in a couple of lectures. But for now, we want to make this image larger, and I can do that just by dragging these edges off this image. So I am re sizing it. But I'm leaving a little bit off space on each side, and I'm making sure that we don't touch the edges off our canvas. And with wreck transforms and Y elements, we have to control the blazing and spacing off our you elements. But using not on Lee re sizing and dragging the edges, but also by angering. So there is another tool that we can use to place our image. So for now, let's select our character panel and check out what happens if we try to resize our card panel. And if I resize this image currently stays in the center off our card panel and its size doesn't change at all. That is happening because off its anchoring percent and by anchoring percent, I mean the positioning off these little triangular things that appear right in the center, off our image and off our canvas. So by default, when you create a new U. Y element. It has this de fold anchoring percent that is called centered, and we want to change that. So one of the ways in which we can change that is just by dragging these anchors and we can place them how we want. So if you are not familiar with unity, why and you are not familiar with anchors? I highly suggest that you check out this topic because it is very cool, and by controlling the anchoring percent, we can achieve many different effects. So, for example, if I set this anchoring percent and I said the anchors to be in the corners off our panel. So the anchors, they act relative to our card graphics relative to this images parent game objects. So we actually make these anchors stick to a certain points on our card panel. And this way, if I go and select our car panel, I will zoom out. And if I try to resize our panel, we can see that now this image it already stretches and occupies a different portion off our panel. So previously it was just staying in the centre, and now it already stretches. But let's check out how it behaves when it stretches. If we said this anchoring percent like this, then it will constantly leave the same amount off pixels. Do the edge off our card panel, and no matter how we stretch this image, the image will get stretched. But the amount off pixels to the border off our panel will remain the same. So I'll bring our panel back to fit the size of FARC animus and returned back to our image . And in this case, we wanted to achieve a bit different effects. So I'll grab anchors and I'll put them in the corners off our image like this. And positioning of these little triangular things is controlled by these values in the wreck. Transform their cold anchors. And let's not leave it like this. And let's set them to some a nice and even values. So here I'll try 0.7 and here I'll have 0.5 and it's close to 0.95 here, so I'll set it to 0.95 and hero set it to 0.93 and these values here on top, they control the so called padding so they control the distance in pixels, off each corner off our image to its corresponding anchor. And we want to set all these values off, betting 20 so that our image completely sticks to our anchors. I think this will do, and we can readjust it later. But now let's go to our card panel and let's try to drag our panel once again. So if I try and stretch the panel now, we can notice that thes with off the gaps that are between our image and the side off the panel. They also stretch and the also become bigger or smaller, depending on how we manipulate our panel game object. This is the fact that we wanted to achieve, and this image will later represent the face off our card. So I'll just type in guard face here. So we've got two pretty slow. Start with these couple of lectures, but we have discussed several important concepts off working with unity, why we've created a canvas. We have discussed what the anchors mean, what the batting means and how to work with wreck transform, and we have already established this template for our spell card in our next lecture will apply some graphic to our card face and we'll discuss adding frames, maybe some other elements to the face off our card so our card will gradually become more and more interesting. Thank you very much for watching, and I will see you in the next lecture. 6. Simple Decorations: hello and welcome back to the scores about making card games. In our previous video, we have been making a single card, and we haven't done much, but I hope that this will change in this video. So, first I wanted to make some other adjustments to our hierarchy. I would like to create another empty game objects. So the idea is that our card panel, it will hold both our cards face and our cards back. But what we have created in our previous lecture and we've called it Card Face, this will actually be the body off our cart. And for card face, we would like to have another empty game Object Soil renamed this into card body, and now we want to create another empty game object just like our card panel and make it a child off our card panel. Now there is another way of doing this, so not necessarily. We should make another panel and remove the image component. We can just right click on our panel and select this option from the menu that is called create Empty. So once we do that in you empty game object will be created and let's change its name to card face, so this will be the game object that will represent our cards face. And it currently has the dif old anchoring percent. So all if it's anchors are set to the centre, and there's another interesting way of changing the anchoring percent in its wreck transform. We can expand this little icon menu and we'll see different anchoring per sets and to change the anchoring percent to what we want. We can hold all to control and shift on our keyboard. And this way you can see that when I press these buttons, the anchoring per sets, the change. And when I hold all control shift, I want to choose this per set. So this will not only make our game object anchored to the whole span off its parent, but it will also make its size fit into the whole span if its parents or once oppressed, that our card face game object gets stretched and fit into our card panel. And next we can just grab our card body and make it a child off our card face so you can see that we have just aton of different empty game objects and you will see later that there's a good reason for that. So if you want to provide some structure for your game in unity, then don't hesitate and create lots and lots off empty game objects because it will be easier to manage later. And finally, for our card body, I think I didn't get all these anchoring values right. So here I'd like to change a couple of things I guess it like to have. Instead of 0.95 I will have 0.93 here and here I'll have 0.95 and then I will change the padding on the top and the bottom back. Two zeros this way. Think we'll have a more even amount of padding on the sides and on the top and on the bottom so we'll go with these values. And now our card body image currently has no source image, so we should apply some graphic to this image, and that's why we have our assets. So let's go to our Sprites folder and here in the Sprites folder. I've selected this image to serve as a texture for our cards and let's open the Sprite editor for this image, and there is one little trick that we can do right away. So this sprites sprite mode is currently set to single, and we actually wanted to be a single image. But instead of having this entire image, we want to cut a little piece of this image. So instead of having single over here, I can change it to multiple, and this way will be able to not use this whole image but got a little piece out of this image. When we go and press the Sprite editor bottom, we have to apply the changes because we've changed single to multiple, and then I'll bring this Sprite editor to the center. When this image opens, you can see that I've downloaded from the site free pick. So all the art in this project it either comes from Free Peak, or it comes from another side that is called open game art dot com. And if you want detailed information about the credits and all the links to the resources, you can find them in the credits file for this course, not to cut a certain portion out of this image. I think I'd like to leave this designed by free peek out from our image so I can just click anywhere on our image and start dragging this frame. And then when I am satisfied, I can just click apply, and this will cut out a certain portion off my image so that I can use it later in the game . So let's select, apply and close Sprite editor. And then we can select our card body game object, which is an image, and I can drag this sprite by free pick onto its source image, public field in the Inspector, and this way we'll have a background for our card now. Once I found and downloaded this image from the Internet, it actually had some tent. So it was sort of off bages yellow color, and I have just de saturated this image in photo shop so that we can give it different tints and colors in unity. So now we can select our card body and we can experiment with its collar. So if you'd like this image to have some sort of a tent, I think that it looks nice Enb age. But we might also wanted to have some other colors. And now we can do this as well so I can click controls that on my keyboard to bring it back to this page collar. And now I can close this color picker to next adjustment that we can make is I have this little set off decor ity frames that we can use and apply to our cards. And for this card, we can choose this simplest one. That is just great. So I can select our card body. I can right click on it in the Inspector, go to you I and create an image. Once again, we have to change the scale of this image back to one and then we can also apply the same anchoring percent just as they've shown you in this video, I can select anchors old control shift and it's like this anchoring percent to stretch it across the whole span off our card body. And I'm going to rename this game, object into a frame so this frame will go across the border off our card and we can select any of the frames that we have in our project. For example, this simple gray frame without any corners. I can just drag it and bring it here into our source image. Now, the problem with using this frame, just like we have done it right now is that it stretches across the whole span off our card body. And the sizes of this frame are uneven. Plus they're too large. So let's see what we can do about this. And first thing that we can do is use. Unity is built and feature that is called nine slicing. So I can select this frame graphic that we have imported into our project. And now if I open the Sprite editor, you can notice that there are these little green squares on the sides off our image and I can bring these green squares into our image. And this way I can slice our sprite in a new way and it will get sliced into nine different pieces. I'll bring the top one a bit closer to the middle, and I'll bring the lower one over here. Alternatively, you can control the values off border here, and this will also affect the positioning off the screen. So I've remained consistent on all sides except for bottom, and here I would like to also have 18 pixels. So this way our image is sliced into nine parts. We have these four corners. So we have these four sites and one middle part. And after I've done that, I can hit, apply close this and finally I can go to our frame and change its image type still, instead off our current image type that is called simple. I'll select another image type that is cold sliced, and now we're getting something that is closer to what we wanted. So essentially, what's happening is that these corners, they just get applied to the corners and they're on stretched in any way in these parts that are on the sites, they get stretched in one direction through these parts, on the top, and on the bottom they get stretched horizontally and these parts on the sides, they get stretched vertically. If we have something in the middle, the middle off this image would also get stretched. But because the middle off this image is simply transparent, it doesn't get stretched. And this way we get exactly what we want. Now I wanted to tell you about another control. If we select our cannabis There is this component attached to our cannabis that it's cold, the canvas scaler, and it has this value that is called reference pixels per unit. Now I can just bring my mouse cursor near this value and I can start dragging it. There is this little arrow near my mouse cursor, and I can control the amount of reference pixels per unit. And as I do this, you can see that I can either increase than the sighs off. My frame will also increase. But we don't want it to be like this or I can decrease the size off reference value in pixels. I think that something about 100 was actually pretty nice, so I think 90 will also be fine. So we just have a slight frame across the border off our card. So we are already getting somewhere in our next lecturer. You add a description text to our card, who add a title to the card that who be the title off our spell and also add an image to our card that will be just a graphic so that our players can distinguish between the spells in their hand. For now, I'd like to thank you very much for watching this course and I will see you in our next lecture 7. Creating a Face Side for a Spell Card: Hello, everyone. And thank you for watching this card game course. In our previous lecture, we have applied this simple texture to our card, and we have also added this little frame around the border off our card. Now, in this lecture, it is time to add some more graphical elements to our card so that it looks more interesting Now. First, let's go to our sprites and check out this voter that is called Raven More. It features a lot of little Aikens that will use in our project. We'll use this heart for the health off Armenians and I will use this gem for the man accosts off our cards. Now these Aikens, they have a lot off betting on the site. So we'll use the same trick that we've used for our background. I'll change the Sprite mode off this gem to multiple, go to the Sprite editor and hit apply. I'll bring this Sprite editor to the center so that you can see all the settings and here I can go to slice and the type of slicing is currently set to automatic and the ones they hit Slice Unity is so smart that it will just slice out this single crystal for me. And actually, I can correct the slicing made for unity a little. Maybe there were some non transparent elements over here, so it thought that the frame should be a bit bigger and I'll hit, apply. And now I think I'll just pause the video and not to take a lot of your time. I'll just do the same thing for all the other icons that will use in this course I know for sure that will use this heart. This little man a potion will use this tone graphic and also this cross mark. And this little dagger will use it to mark the attack off Armenians. So I'll repeat the same process for all these graphics. And then I will get back to you. So I'm back, and I was just slicing all these images. And sometimes unity finds some other graphics like there's a little one pixel spot on the image, and then it also considers it as an independent graphic on your Sprite. And because you have selected multiple Sprite mode, it also finds all those little specks on this image so I can just manually select them so you can see I have probably one or two pixels selected over here, and you can do eat it by pressing delete on your keyboard so I'll select it hit delete on my keyboard. And for some reason, unity has also marked this area on this gross mark image, and I should also do eat it and then I can hit apply. So once I have sliced all these images, they no longer have these large borders that we don't need. I can expand the whole hierarchy off my spell card and as a child off our cards face and not as a child off our cards body. This time I should go and create a new U I image. And this is the last time that we have to do this and change its scale, because then we will just derive all our other elements from this image. So this one, I'll call it the manner or the mana cost, and I will apply our jam graphic to this image. I think for this image we want to enable this preserve aspect option because currently, if I start reciting this image, this gem will get distorted. And for some other graphical elements. This will not be acceptable. So I will just enable preserve aspect over here. And I will bring this image to be on the upper part here above our card. And let's make it a bit larger so that our players will be able to see the man accosts and all the values on their cards really well. And as a child off this man a game object, I'll go to you I and create a text. And if I double click, we can notice that this text has a scale off 200 as well. So I'll bring it back to one double click on the text again. And now I should bring this taxed to the center off my manner object, and I can do this by using the same anchoring percent. So I want this tax to stretch and to occupy the whole span off my manner. I can image now. Let's work with the stacks a bit. For now, it has the default fund that is Ariel, and we want to change it to our custom Duveen slash font. So that's the first adjustment. Second, we wanted to be aligned in the center both horizontally and vertically. So I'll also check this alignment. And last but not least, we want to enable best fit on this taxed so it's minimum size is currently set 10. Let's set it to something about 30 and its maximum size. Let's set it to 100. So it's said it 200. And instead of mu text, this tax shoot, say just one number. So let's make it, for example, three. Or for so this tax who mark the actual mana cost off. Our card for now will not introduce any other changes to this text. But later in this course there will be a lecture about making custom text outlines because unity is built in outlines, they don't work that great. So we'd like to have an external solution for outlines in our project. And now that we have this man a game object, weaken, just duplicate it and you can duplicate game objects by hitting control de in your hair key , which means you have another copy of it, and we use it as a base for creating other Aikens and texts in our card. For example, this second game object that we've created, I would like it to be a child off our card body, and this one will be called the Guards description. So I'll call this one description I mistyped here, and actually, it is also a nice practice to rename the texts. So instead of saying just text, this one should be called description taxed. And similarly, this second tax should be called a man a text. And another important thing that we forgot to do is to change the anchoring for our man a game object. In our case, we wanted to stick to the place where it currently belongs. So I'll just drag the anchors and I will apply them to the corners off this manner, Aiken, and it will stretch in all directions and just stick to this place on the card. Now for our description, let's just grab it and bring it to this area off our card. I would like to stretch it as well and make it larger. And of course, we don't want to have this huge man a crystal in the middle off our description. So instead of having this graphic will set it to none for now. And as for the color I would like to make it black bought transparent, so we'll just add a little tent to our cards background. So if we'll have our break ground red and this one will be just a darker red, so we'll just apply a little tent to our card, and it doesn't necessarily have to be black. So depending on the you're a person a liking, you can select any other color, and we can control the size off this parent game object and also for the anchoring percent . This time I will apply to the corners off the card, and there's an easy explanation for this. In this case, the size of this frame is preset in pixels, so we might also make the size off our betting, also preset in pixels and instead off this four In our description text, we can write something different. For example, deal one damage to oh enemy creatures or something like this. Well, actually have a card that will have this effect and s for this text. It's probably a nice idea to give it some padding as well, so that it doesn't stick to the corners off our description, game object and some betting here in the lower part, and I think that this will just look prettier this way. And now that we have our description here as well, I think I should bring it a bit higher over here because we'll have another element in the lower part off our card. Now I'll just duplicate this man a game, object once again, and I will bring it to the lower part of this card. I'll make it wider and fit to the bottom off our card. And for this decoration element, I wanted to say What kind of a card is this? So if this is a creature I wanted to say creature. And if this is a spell, I want this element to say a spell. So let's go back to our sprites and I've prepared this little ribbon sprite. It is called one ribbon. I think it was also downloaded from free peak. If you want, you can check it out in the credits file. And for this one I will call this game object card type and for the text. I can just copy this name and I can name the text card type text. Let's change what it says to spell because we're making a spell card. And let's change the graphic on our car type to this ribbon This ribbon shoot appear in the lower part off our card and say what kind of card this is. But I'd like to make this ribbon a bit smaller, so I think this size will do better. And also, I'd like to make the text smaller as well. And actually for this ribbon, we don't want to preserve its aspect. So we wanted to stretch across the whole span off its container. And we also want to apply this anchoring percent so that this ribbon stays where it currently is. And we would like to control the anchoring and placing off this spell text. Currently, it's too large and we wanted to be more centered and apply the anchors over here so that the text appears on Lee on the ribbon. And finally, this card type game object is very similar to what we want to have on top of our card. So we can just duplicate this one by pressing control De and then we can drag it all the way to the top off our card and this game object will be called card title, and the text will also be renamed into card title text. So this will be the text with name off your card, and I'm sure that you can come up with some cool names for your personal card game. So instead of saying spell here, I will just see it clips or something like this so you can just select any type of name that you like, and sometimes this happens. Something gets messed up in unity, and you can just disable and re enable your text and everything goes back to normal. So this card is called Eclipse. And in case of this car title, we want to stretch it even more and make it bigger so that these elements of this ribbon they'll even show out of the sides off our card a little. So this is one of the reasons for having your card bit smaller than your canvas. But now we have this sorting issue. So obviously we want our manner to be on top off this description tax so that we can see our man accosts off this card at all times. So to fix this we'll just grab this manner and drag below this guard title in the hierarchy . So with unities, you I all the sorting order issues are resolved very easily. The elements that appear below in the hierarchy they are rendered on top. So something that you have the lowest in the hierarchy will always be rendered on top off everything else. And finally, for our cards graphical image, we can make another shortcut. I can duplicate our cards body, and we can parent it back to our card body. Then, in this case, we wouldn't like to have this description so we can just delete it. We can rename this game object into a card graphic, and we would like to resize this game object. So we'd like to have it somewhere over here like this, and you can see that the frame remains where we want it to be. So this image that we have on the card, it will also be framed. Weaken later, change the graphic on the frame so you can have a different frame. But I found that this frame actually works the best for me, so I'll leave it like this for now. We can make the description text a bit smaller and this guard graphic game object a bit larger. And finally, we can change the image on this card graphic for spells. I've planned to use the graphics from this voter that is called artifact images, and I liked this metallic orb image, so I'll use that. But you can use any other graphic that you want, so I'll select our card graphic, and I'll drag this metallic orb image into this images source image. All these images. They're very abstract in nature, so we can actually do nothing to them. But they have this square aspect ratio you so we can either accommodate to that by making the size of our description texts even smaller, and then making the card graphic game object a bit larger so that the aspect ratio is closer to what you get on all these images. Or you can actually go and cut out the A certain portion off each and every off these images. If you want to have them in a certain preset aspect ratio. And finally, let's change the anchoring percent for our card graphic. I'm not sure that I've put all the correct anchoring percents for all these elements, but we can easily change this later. As you might have noticed, my favorite anchoring percent is just booting all the angers. Do the corners off our graphical elements, and there's an easy way to check for correct anchoring Weaken. Just select our card panel and try to resize our card panel so straight away I can notice that I didn't anchor my opera text that says it clips correctly. So I'll have to check that I can select my car title. And, as you can see, it is anchored to the lower part of the card, and we wanted to be anchored to the top part of the card. So now let's check that out again if I start dragging and re sizing my card, it doesn't look as appealing if I change the aspect ratio, but at least all the elements they stick to their correct positions and the final touch changing the tent for these ribbons. I can just make them a bit darker like this, so let's make them mild great, and that's it. So in this lecture we have added old a graphical elements and texts to our single spell card, and I think that it looks pretty awesome. And later I wanted to show you how to add beautiful outlines to your texts in unity. But I think that in the next lecturer will focus on creating a card back. I would like to thank you very much for watching the scores and I will see you in the next video.