Develop Trading Card Game Battle System With Unity 3D: Part XII (Visual Looks, Character Assets) | Vladimir Limarchenko | Skillshare

Develop Trading Card Game Battle System With Unity 3D: Part XII (Visual Looks, Character Assets)

Vladimir Limarchenko, Game Developer, Unity3d and C#

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (28m)
    • 1. Applying Visual Looks from a Card Asset onto a Creature

      11:03
    • 2. Using Character Assets to Create Class Cards

      9:06
    • 3. Applying the Info Stored in Character Asset to Player's Portrait

      7:27

About This Class

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.

In the project we use so-called ScriptableObject assets to store all the information about our cards (both spells and creatures). We use a different kind of asset to describe our heroes and hold all their stats, information about their hero powers and so on.

In this class you`ll learn how to:

  • Apply the graphics and stats from our CardAssets to the creatures in our game.   
  • Load the information about our heroes (max health, avatar, hero power) and display it on our hero portraits.
  • Customize cards by making them belong to a certain hero class. Cards that belong to a certain hero will use a different unique color scheme.

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.28.

Transcripts

1. Applying Visual Looks from a Card Asset onto a Creature: Hello, everyone. And welcome back to our unity project. And I've introduced several changes to our project since our last section. Mostly trivial stuff that we have over you done. So I just wanted to give you a quick recap off what I've done. I found old the sprites of our creatures, and they relegated in our sprites creature art. And I've got each and every of these sprites so that they are more fit into our frames. So, for example, for this sprite, if I opened its Sprite editor first, I've set this sprite mode to multiple so that I can not use this full image, but cut a certain area out of this image instead. And then I can open Sprite editor and I'll bring you to be lower. And for this creature, I'll use this part off our image. So with creatures, we'll have these oval frames, and most of the time you want to make sure that your creature is centered and I've done this for each off our images and in our previous sections we have also discussed our card assets. So for each spell and for each creature, we want to create this new object, and we'd like to store this object inside of our assets folder. So I have done that, and I've created several card assets for our creatures. Created a new creatures folder inside of this S O assets. I can open this creature's folder and here because we have seven images for our creatures. I've created seven of these assets. I gave names to all these assets because thes names, they will eventually become names for our creatures. And so far I didn't feel in all this information into these guard assets for each of our creatures. I've left their Mana Coast Max health attack attacks for one turn. I've set all these values to one. I have left the description empty, but I've made sure that each off our guard assets has a corresponding guard graphic here card image. So I've established the connection with all those images that we have, and finally, to show you the results of what I've done, I've dragged all these creature cards into our scene. And for each of these creature cards, I've set a special card asset. So now if we launched a game, then all these cards will be in our scene, I will actually disable gizmo so that we can see them better. And when I hover over these cards, they will get previewed and you can see that all of them will have their own special graphic. The previous work, and later in the process of developing this game will come up with descriptions. Some special effects and willows come up with a unique man, accosts and values for our attack and health, so that these creatures are different and so that they're a bit balanced so that there are no overpowered creatures and I'll exist play mode. And for this lecture, I've planned to show you how to achieve the same effect with our creatures. So we have done creature cards, but we have a separate game object that is called creature. So I'll go to pre fabs and drag our creature into our scene. So this creature game object. It currently has this hover previous script, but it doesn't have any script that will let us tell the stretcher that you should be made out of this card acid. And just like we had our one card manager for cards, our creatures will have a special script that will be called one creature manager, So I'll open our downloads folder scripts, visual and inside of this visual folder. There is a script that it's cold one creature manager and we want to maintain the folder structure so out. Drag this one creature manager onto scripts and inside off our visual folder in Unity, and we are already getting some errors. So let's open our one creature manager and figure out what's happening there. This one creature Manager script is pretty similar to our one card managers, who it has a public field of type card asset. And when it gets the card asset, it should load old information from the card s it and applied to the visual looks off our character and for creatures will have even less information. So here we have Onley, our health text attack taxed and we should also display the correct image off our creature and will also have this glow image for creatures. And it should be enabled Onley, when we can attack with this creature this turn So first in awake we're checking if our card acid is not equal to know. So we have something to show. Then we'll read the creature from asset, and it's a method that will apply all the looks from the card asset to our creature. Then there is this public property that is called Can Attack now. And this property will be used later in our game when we'll have old a logical scripts in our project. Every turn and after every move, game Logic will tell each creature and each card if it can be played right now or for the creatures if it can attack now and this will serve two purposes first, the logic will give permission for us to drag this creature or to play a certain card, and Allstate will turn on these glow images. And then there is this wreath creature from asset. It's not very long here, ear applying s pride to our creature graphic, and we're taking it from our card asset, and we take all the info from our card asset for our attack text and for our health text as well. And then here's the important part. We also have the preview manager for our creatures. So, as a preview for each Reacher will have a game object that looks like our card, and that game object will have a one card manager script that we are referring to as preview manager in this script and hero check. If preview manager is not equal to know, then we'll pass this information from our card acid into our preview manager and will also change the appearance of the card so that it corresponds to our creature. And finally, there is this method that is called take Damage are creatures and our players in the game. They will be able to show us that they have taken damage. So this method serves just this purpose. And here we're checking if amount is greater than zero. So if the amount is zero and it might happen in some cases, then there is no point in taking damage at all. And if the amount is greater than zero, then we're saying damage effect, create damage fat, and we don't have damage effects in our project yet, but we'll have them in a couple of lectures. So for now, to get rid off all these errors, I will just come and tell this line and all typing to do here and when you type in to do it gets highlighted with this bold highlighting in your comment. And even if I later forget to uncommon this line by searching for this to do in the comment , I confined this line, and I will remember that I have to do something with it now. I can go to file and he'd save, minimize mono, develop, select my creature, attach our one creature manager to this creature, and I have to establish all the connections First. For our preview manager, I'll drag our creature card preview and then I'll find all these texts so we have our health and attack. Let's drag health text onto this public field. Drag our attack text here and for our images. We have our creature graphic. It is a child off our graphic parents. I'll drag it onto this field, and we also have our glow image. And now that all these connections are established, I can just hit, apply, and finally I'll go to assets as oh assets, and it will be much more interesting if we actually drag some off our creature assets onto this creature. So let's drag this Vulcan that will probably be the biggest creature in our game. And now if I launched the game because we have a perspective camera and this creature is probably not located where we wanted to be, we're not able to see this when we were editing are seen. But when we enter the game, it is it gets instantly visible, so I'll just change its transform position. 2000 breast supply again and then let's try to lunch to game. Now if we launched the game, our creature looks better and it's preview works. So this is how previews will work for our creatures. None of the game objects will get disabled here. So in the case with guards, when the card preview is turned on, then the card itself and all the graphics off our card they get disabled to create this illusion that our card pops out of our hand and gets closer to us and with the creatures, we want this creature to be where it is. So we wanted to stay on the battlefield, and instead we want this card preview to spawn and not affect our creature in any way. So in this lecture we have added this new function to our creatures off previewing themselves and reading their looks from our card assets and in the next lecture, I think will do the same thing for our players. So finally, talk about those character assets that we have actually brought into our project in our very first section, I guess, and we still have not used them in our project. So our next lecture will be dedicated to this, and our final goal is to bring as much scripts from our visual folder into our project as we can. So we want to move gradually, and we don't want to break anything in our project. But we also want to be prepared to importing our game logic into this project so that it doesn't feel so overwhelming when we'll have a lot of new scripts in our project. For now, I would like to thank you very much for watching the scores and I will see you in our next lecture 2. Using Character Assets to Create Class Cards: Hello, everyone. And thanks for watching this course. In our previous lecture. We've made some adjustments to our creatures. Now they can read the info from our card assets, and they can now properly display all this information and also show us the previews that will look like our cards in this lecture wanted to pay more attention to our characters or players. So we already have all the scripts in our project to create custom assets for our characters and the technique and the method off creating these assets. It's absolutely similar to the one that we use for our cards. So I'll just go to this menu hit, create and create a folder, and I'll call this folder characters inside of this folder we'd like to create several character s. It's so we can do this by right clicking, going to this create menu, and here we can choose this character s it. When we create a new character asset, we should give it name. So, for example, alcohol this one elf Let's take a closer look at the inspector for this asset and how it looks. Probably it has some fields that are not that necessary for example, this class name. We can just get rid of this and use the name off our asset. Then we have this in, um, that is called class, and it holds all the possible classes for our characters. And for this project, I've left just three of these classes. There will be an elf, a monk and a warrior. I think that we can actually do just with do glasses, one for ourselves and another one for our opponent. But of course, if you want your game to be more diverse than you should add more of these glasses into your game. So for this one, I leave it at Elf for this class name. I'll type in L. For now, I guess it's used somewhere. So let's just go along with what this asset offers us to feel in than for the Max Health. We have 30 which is find with us, and we don't want to change. This hero Power name will use this one later when we'll have our actual hero power scripts , and then we have all these other fields. First we have our avatar image, and let's make sure that we have an image for our health character here. I think I look the inspector and I'll navigate to our assets Sprites folder, Go to flare, Poor treats. And I'd like to have this avatar for our elf character for our hero power. Aiken, I'd like to go to sprites Raven more, and I'll drag this boat I can that we currently have in our seen, so nothing unusual so far. Then we have these two other images Avatar background, image and hero power background image. I have not used these in my test application, but you should know that there is a possibility off also applying some background to your avatar. So it should not necessarily be just a tent off color. It can also be a custom image. And it's also true for our hero powers. Instead of having just a color fuel, we can have a custom image behind our hero power Aiken. And here we have all these fields that are of type color 32 that let us speak a collar for our avatar background tent. And here, I think, will select something that's similar to what we have in our avatar background tint right now. So something bluish, maybe purplish like this than for our hero power background. Tend, I'll select probably the same color, except we have to remember that these colors they have their Alfa values set to zero. So we'll have to select these colors and bring their L for all the way up to 255 for both of thes colors. And then we have these two other interesting fields. 1st 1 is gold class guard tint, and the 2nd 1 is called Class Ribbon Stint. So in harsh stone, as you know, each of the classes gets their own unique cards. So for each class, the cards they not only have their unique stats and abilities, but also they have unique appearance. And in our game, we also would like to do something special with our cards. So if our card will figure out that it belongs to some class in particular and there's a way to do that in our card, asset will take a closer look at it in a couple of seconds. Then it will apply this custom class card tent to its body, and also it will apply that class repentant color to its ribbons. So this way. By changing the colors on our cards, we can make them look different and more interesting in our game. And I've already figured out the values for these colors that I personally like in my test applications soil. Just apply them to these guard questions and card rib Instant. I have them written down so I can use this color picker here, and they can manually enter the numbers into these boxes, and it will apply the color that I need to this field. Or if you are using some of the colors very often in your project, then you can click on this button to add in you per set. And then this color will be just saved for later. And you can easily pick it out out of your presets. I have my presets empty for now, so I'll just enter these values off RGB manually. So I've applied my custom colors to this elf class asset, and we don't have to forget to bring the Alfa all the way up so that our images don't go transparent and disappear in her seen. And now I will just go to assets our S o assets, find our characters, and I'll create another character acid that will be very similar to this one. But it will use different colors and different images, and then I'll get back to you and we'll try to experiment with these character s. It's so I have created this second asset, and it's an asset for Armonk character of Major that I picked this in, um, correctly. I've typed in this glass name, and I've also changed the colors for our cards, avatars and the hero power I can image now to check out how this works with our cards. Let's return back to our S O assets, open our creatures folder, and then we can decide which of the cars we want to belong to a particular class. For example, we can make this source er belong to our month class. So let's do that. We can just search for a character asset through this menu, and I'll select Monk for this card and for another card that we have, for example, for this tree and three ends have something to do with nature, so let's make them belong to our health class. I'll open this character asset Manu, and I'll select our elf here and now Let's launch the game and check out how this will affect our cards. So I'm launching the game currently our source er card and our tree and card. They look differently. I have actually messed something up and instead of my ribbon color and having my card, body color and vice versa for this character, so I'll go back and fix this. So now I have changed the colors again, and I launched a game to check out that everything works as I expected. So now our pre and card has this green color, and these ribbons appear in this light orange, and our source er card has this blue collar and ribbons on this card. They will also have their own custom color. So this is a way off customizing our cards, and it will work with spells equally as well as it works with our creatures and all the creatures that have no or none for their character asset. They remain unaffected, so they will maintain this default look and they can belong to any off our characters. I'll exist play mode, and now that we have our character assets in our next lecture will take a look at another simple script that will be similar to our one card manager, one creature manager. But it will apply this custom look to our players sport rate and to our hero Power Button, based on our character acid. I would like to thank you for watching this course, and I'll see in the next lecture. 3. Applying the Info Stored in Character Asset to Player's Portrait: hello and welcome back to the scores. In our previous lecture. We've taken our first look at our character assets, and they allowed us to make it so that our cards will actually look differently if they belong to one off our custom characters. For example, this tree end will belong to our Elf character, and this sorcerer part will belong to our monk character. And we want our custom looks to be applied to our character portrait. It's as well, so to achieve this will take a look at another custom script. I'll exit blame old for now, and I'll jump into this folder with our visual scripts and this script will be called Player Portrait Visual. I'll drag it into our scripts and visual folder in unity. Let's open this script and try to figure out how it works. I'll zoom in on the code. We already have a couple of errors to fix, So first we have this public game object explosion. I don't think that you need this explosion will be a way to tell that our character lost, and it is made a bit differently in our game, so I'll just delete it. I don't know why I had this and for this character acid. Previously I had this chart as it made as a property. So it had this get set after its name. And now I'd like to make it just another variable to be able to seat in the Inspector. Then we have our text component references, and the only text component is our health text. We don't have anything else. And for our image references, we have our hero power. I can image hero power background image, our portrait image and our portrayed background image. So the street will not only manage our player portrayed, but it will also manage our hero power buttons Beerens for us. And this cold is just very similar to everything that we had in our one card manager and our one creature manager in awake. We check if we have something in our char asset than we apply the look from asset and this method. It just sets the values for all the texts and old images from our char assets, including the colors and images. So just everything. It takes old info from our char asset and it applies it to our player sport. rate and hero power button. Then there's this method. Take damage. We don't have this damage effect glass yet, so I'll insert a comment and type to do here so that I know that I have to uncommon tit later and this whole method explode. It will be cold if our player loses the game. It contains some advanced Syntex that we haven't used yet. For example, do between sequences are used here and Lambda statements. This is actually not that difficult, and I have just picked it up from the documentation for do between, but it gives us a lot of errors. So instead of having this code here for now, I'll just comment out all these four lines, so I'll insert an asterisk and a slash in the end and a slash in the asterisk in the beginning. This is Syntex for a multi line comment in C Sharp, and I'll also typing to do somewhere so that I know that I have to address this issue and uncommon these lines in our final project and are finally I'll go to files save this script , minimize Mona develop. I can select our player portrait. It should be somewhere in our visual lower player area. For now, we're working just with this lower player area en el drag. Our player ported visual onto this player portrait game object. I'll expand the canvas to establish the connection with all our graphical elements and texts. So first we have this health text. Let's do that. Then we have our portrait image that is our avatar, and we also have our portrayed background image that is cold BG here. So I'll establish these connections. And this script also needs to know about some elements off our hero power buttons. So let's do that as well. We have our front active parts, will expand that, and it wants to know about our hero power. I can. So it's this image and also about our hero power background image. It's this BG image and then I can just hit apply and you can notice this interesting thing these hero power I can image and hero power background image. They are still highlighted in bold, which means that these are the connections that are not saved into our prefab, and the reason for that is that our player portrait and our hero power button they are actually separate game objects in our hierarchy. So if we prefab our player ported as it is right now, the prefab will not know anything about the existence off this hero power button, so it cannot establish a stable connection with its components, text or images or anything else. But if we later decided to prefab this whole game object that is called lower player area, then it will sold the issue because this player portrait and here a power bottom, they will no longer be independent pre fabs, and they will be just a part off our lower player area. And that means that when we connect them these references, they will be apart off one big prefab, and they will get saved and stored in our prefab and finally to check out if this works. We have this reference off type character assets, so I'll just press in this little Aiken and switch to our assets. And here I'll select this monk. I can, for example, for our lower character and close this window. And now, if we launched the game, then you can notice that our lower character is no longer an elf. It is a Monk. Now it has among Avatar Image, and it also has among hero Power image. So by adding this simple script, we've done something similar to what we had with our cards and with our creatures and now our characters. They're also reading the info from Asset. So when the game starts, we just passed info about our character about our opponent's character and these player poor traits. They just load this information from these character s. It's in our next lectures who continue gradually working on bringing more scripts into our project. I'd like to thank you very much for watching the scores and I will see in our next lecture .