Develop Trading Card Game Battle System With Unity 3D: Part XIII (Damage Effects) | Vladimir Limarchenko | Skillshare

Develop Trading Card Game Battle System With Unity 3D: Part XIII (Damage Effects)

Vladimir Limarchenko, Game Developer, Unity3d and C#

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
2 Lessons (26m)
    • 1. Damage Effects

      8:36
    • 2. Damage Effects – Part 2

      17:12

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.

Learn to provide visual feedback to your players when their creatures or their hero take damage:

  • Spawn a random blood splash icon and display the amount of damage taken
  • Gradually fade the damage effect over time by using CanvasGroup component

By the end of this class we'll create and test a system of damage effects that will be used in our card game.

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

Transcripts

1. Damage Effects: Hello, everyone. And thanks for watching the scores in this lecture. I wanted to talk about damage effects. We have already encountered something that is called a damage effect in our scripts. So I think it's probably time to bring damage effects into our project. Damage effect is a very simple game object. It is meant to show that one of the characters in our game has taken damage to start creating a damage effect. It will be also made out off our unity. You I So we'll need some game object as a reference not to create a canvas and old images from scratch. So I think our hero power will work well for this purpose. I will expand our visual game object, find our lower player area and select our hero power button. I'll created duplicates off our hero power button, and I will rename it into the damage effect. They'll go to assets, pre fabs and prefab, our damage effect so that unity knows that it is something else and not our hero Power button. And finally, I don't want this damage fact to be apart off our lower player areas, so I'll drag it above our visual game object. And, as for this damage effect, will not need a lot off stuff that is present here. So, for example, we will not need this cylinder, and I can just safely to eat this than in our canvas will not need this back game object. Our hero Power Mana costs is also not needed. So we want to be left with our canvas and just one simple image. For example, let's drag our frame as an image. And then I'll just lied this whole front active game object. I'll rename this frame into a splash, so L type in splash here for our damage effects. I've prepared a special Sprite, so I'll go to Sprites Folder and here I'll find this Sprite with different stains or splashes, and I'll open it in Sprite. Editor and I don't have to forget to set Sprite mode for this bride to multiple because we're going to caught some portions out of this Sprite soil. Close Sprite ator Select Multiple here returned back to the Sprite editor, and then I think the most suitable way to cut this Sprite would be to got it in agreed manner, so I'll just go to this slice menu, select greed by cell size and here it can experiment with these different parameters until I find something that works for our image. And we also don't have to forget that the Sprite editor offers us to select offset and batting as well, so we can not only control this size off our containers, but we can also create gaps between our containers. Or we can offset the initial container by some value in X and why excess. So I have experimented a lot with these values in the slice Manu, and finally I came up with a pixel size for our single image off 350 by 350 pixels. Then I've added a little offset in X. I've added 50 pixels and in why access I've added 66 pixels and offset are thes values from the border off our sprite to our first cut out image. And then I've also added some padding in X direction. I've added 60 pixels off batting, so there will always be 60 pixels between our two neighboring images and in why direction? I've made the batting smaller and it's only 30 pixels and the unity has done a pretty good job. But for this image in particular, I didn't like the border that unity applied to this image. So I've readjusted this frame manually. You can later drag everything and readjust. After you've done this, you have to hit, apply, and we'll have all these sprites that we can later use for our damage effects. With this damage effect, we could have actually used just one sprite. But we want to take it a step further and to make our damage effects more diverse, will use old these images and will select a random image out off all these splashes that we have. So now let's select our splash image for its source image. I will drag one off our stains or splashes, for example, This one and it seems like our damage effect is currently behind our hero power buttons. So let's also change that l drag its X value and why, Well, you so that we can actually see this damage effect. And another thing that we can do right away our damage effects. They should appear on top off everything else so I can just set there sorting layer to above everything and I can hit apply because we already have this damage effect. Prefab. For this splash, I think we can use some brighter red color that will represent blood. And we can also add another component. Our circular outline. It is completely optional, and it's up for your personal preference. But I liked it when my damage effects they had this little black outline, and I think that it looks quite interesting. So after we have created this damage, in fact, let's also create a text. I think I'll make attacks child off our canvas. I'll go to you I and creating you text. And for this tax, we want to first select our custom fund. Then we want to change its scale to 11 Then we want to type in something like minus five. Then I'll set its position 200 so that our text appears somewhere in the middle. I'll enable best fit and then I'll zoom in on the text and I'll readjust its size and maybe caller, we can also add an outlying to this text. Then, for these best fit values, I think that our tax should be at maximum size of 200. Then I'll center this number that we have and else change its color. I think that this number should be white but will also give it our custom outlined. So I'll add this circle outline component and I'll increase the size off are betting too three or maybe even five pixels image direction. I'll change the transparency of this outline to be 100% so I don't want it to be transparent at all. And then I'll control this circle count to get a better looking outline. For example, If we said this circle count to five or six, then our outline looks much better. And finally, I'd like to control the positioning of the stacks. So I know for sure that will have this minus constantly in this tax. And I want this number to appear somewhere closer to the middle off our splash, and this minus should be somewhere closer to the left, so I will not position the stacks symmetrically in the center. I will give it a slight offset, and I think I'll apply the anchors through the corners of the stacks and leave it like this for now. And now that we've done this, Our damage effect is almost ready. I can go and hit apply for now and we want to have another component attached to our canvas to control the transparency of this effect. So in our game, this effect will appear instantly, and then it will gradually disappear by controlling its transparency. So to do that, we can add a new component to our canvas that is called a canvas group. So let's select that. And when we have this component, there is this handy public field that is called Alfa. And once we control this Alfa, you can see that I can make our effect disappear or it can make it reappear just by dragging. It's self. So this Elphick controls the transparency off all the elements on our canvas. 2. Damage Effects – Part 2: and probably the last thing that we want to have. Another project to make these damaging facts work is to bring our custom script, so I'll go to our folder, downloads, scripts, visual and inside of this folder. We want to find a script that is called a damage effect, and I'll grab this script and I'll bring it into the same folder in Unity Soil. Drag it onto scripts and onto visual. Let's open this script, and it's already giving us some errors. So unlike some of my other scripts, this glass already has some meaningful comments. So this glass will show the damage delta creatures or players, and it will have several public feuds. First will have an array off sprites and will bring all those splash images into this array than it has an image. This is an image for one single splash, and we have already created it in our canvas. It also has a reference to our canvas group so that it's able to control the transparency over this whole damage effect, and it has a reference to our text. So everything that we have in our seen it should have references to all those components first in awake. So when this damage effect is created, it picks a random sprite from our splashes race. So this little trick that you can use makes our damage effect more interesting, and it will look a bit different every time. Then we have this interesting method that is Corentin. And it has this weird type I knew Marie, sir. And we have no talked about Cortines yet. Cortines provide an easy way off controlling timing in your game. So instead, off writing your own timers and tracking time in update, you can write a Cortina method off type in numerator, and then we'll have to use a special syntax to call this method. So this method show damage effect, it will be called. I will throw a bit lower in our script and it will be called like this d e. So our damage effect don't start 14 and then we'll call this method D dot show damage effect. And what makes it different from other methods is that you can use these statements healed return you wait for seconds so you can simply stop the execution off this method for one second and wait and then you can resume this method and continue making all the tasks that you've put into this method. And this you'd return Wait for seconds. It can also be used in loops. And the purpose of this method is to first when our damage effect appears in our scene will have to make sure that the Alfa value off our canvas group is set to one so that our game object is visible. Then we have to wait for one second. So once our damage effect is visible, we wanted to stay for a certain amount of time so that our players will actually see this effect. And then we have this while loop and we say while cg dot elfi is greater than zero. So this alfa value off our canvas group will eventually get to zero because inside of this , while loop were constantly subtracting something from our c g that Alfa. But we're not doing it instantly. So if we just have this while loop without this statement yield return, you wait for seconds than everything that happens in this loop. It happens instantly. So without any fade effect or smooth transition, this siege Edo Alfa will turn into zero because this while loop, it will take just a very, very short period of time to finish its execution and will not be able to see the fate effect off our damage effect. And when we insert this, you'd return. You wait for seconds after each time we subtract something from our c g l for we wait for this amount of time and then we make this subtraction again until our cg dot alfa becomes zero. And once this damage effect is invisible, we are no longer interested in this damage effect, and we no longer need this in our scene. Then we should just destroy this whole game object. So we're saying destroy this dot game object. We're doing just that. And finally, this glass will also have a static method. So we should not rely on any other class to create our damage effect. Instead, we can just see damage in fact dot and call this method create damage effect and this method will take two parameters. First vector, three positions. So where we want this damage effect to occur, and it should be created on top off our creature or our character that has taken damage. And then we're also passing an integer, verily off amount. So the amount of damage that we want to show and first this line is here to create a new instance off our damage effect. And in my project, I had this script that was called Global Setting Sail. Just bring it to another line so that we'll see the whole line better. And the script global settings. It was used to hold just all the information that is not suitable to hold anywhere else. So I've kept some colors there. I've also capped a reference to my damage effect. Prefab will later have a reference to our Korean card there and everything else. So this was just a dump that held all the information that wasn't suitable to put into all the other scripts. And it was a singleton. So we haven't talked about Singleton's yet. For now, we don't have this global setting script, so I'll just comment out this line and this next line as well and all typing to do here to know that I have to uncommon this line. Actually, we're now getting this error that we should have a reference to our new damage effects. So I'll leave this declaration off our new game object variable, and then we'll just have to type in equals here. Next, we know that our new damage of fact will be inst enshi ated from our prefab. And that means that it will have this same script off type damage effect attached to this game object so we can say damage. In fact, D e equals new damage effect dot Get component damage fact. So we are getting a reference to the script that is attached to the game object that we have just instant she ate it. Then we're setting the text off our new damage effect to say First we add this symbol off minus and then we're displaying the amount off damage dealt to this creature or character. And finally, we call this method ee dot start corden. So this damage effect, it will first be shown for one second, and then it will get faded and eventually destroyed. For now, I'll go to file and hit Save this line game object. New damage effect without saying, equals new game object. It looks a bit suspicious, but let's see if it works so well, go to file and hit. Save and l minimize Wanna develop? And yes, Unity has also noticed this error. So it says use off unassigned local variable new damage effect. And we have to figure out something and actually assign something to our damage effect. I think I'll take a minute and I'll write a quick tests creep to test our damage effects in this lecture and not to bring this global setting script into our project yet. So I returned back in a couple of minutes with my damage effect test script and will test how this damage effect feature works in our project. So I am back, and I've made this very simple script damage effect test and I've edited to our project, and it will work in a very similar manner to our global setting script that I had in my tests app. So first, we have a public field off type game object that is called damage prefab. So this is a prefab off our damage effect that we currently have in our scene. Then we have this public static reference off type damage in fact test. So this is reference to this same script and it's gold instance And in awake, we're saying instance equals this. This method is called a lazy singleton. So instead off establishing connections with our damage effect test all the other classes they get to know about the existence off this damage effect tests script much simpler. They just say Damage effect. Test dot instance, And they get a reference to the one and only instance off our damage effect test. And finally, in our update function, we're seeing if input get down key code A. So if our players breasts a on our keyboard and this script is here just for test purposes , so we will not have it in our actual project, and we say damage effect dot create damage effect and we're creating a damage effect in the same position where this damage effect test script is in our scene and the amount of damage will be random. So we're generating a random number between one and seven. And now that we have discussed how this stripped works, let's go and take a look at our damage effect. I had to introduce several changes here in this first line instead of just saying game object, New damage effect and putting a semi colon. In the end, I've put this equal sign and said, New game object This way will not use a variable that isn't initialized yet. And then I'm saying new damage effect and we use a method off type game object that is called Instant. She ate to create a game object in our scene, and it takes several parameters. First, we take in a prefab off our game object, and I mean a reference to our prefab that is stored in our damage effect tests glass and there's an interesting way off finding our damage effect. Test glass instead. Off establishing this connection in the inspector, which is not possible with our current set up. We're saying damage effect test dot instance. So our damage effect ask last. It will always have this public variable that is called instance, and it will serve as a reference to one and only instance off our damage effect test glass and through this damage effect death class, we reach our damage prefab so instant she ate the game object from our prefab as a position for this game Object. We're taking this argument off our method Vector three position and this instance she ate method. It also asks us for rotation and four rotation. We're setting Quit Ernie in Identity, which is just zeroed out flotation. So rotation off 000 And in the end, off this long line, we also say as game object. So this method game object instance she eight. I think it returns an object and we should convert it to game object and in all these next lines that haven't changed anything. So we get a reference to our damage effect script that is attached to our prefab game object. Then we changed the amount tax to reflect the amount of damage that our creature or character has taken. And then we start our core team that will first ensure that we're showing this effect and then it will fade out this damage effect and destroyed in the end. So now I will go to file and select this save all option. I will minimize model develop. Now it is time to attach our damage effect script to our damage effect Prefab soil. Go to scripts folder Visual en el, drag our damage effect script onto this damage effect game object and we get to establish all these connections for our damage image. We should have our image that is called Splash for our canvas group. The canvas group is attached to the same game object as our canvas so I can just drag our canvas onto this field. And for the amount text, I'll drag this text. We don't have to forget about this three off splashes so I can look the inspector go to assets sprites. Then I can select our sprite that has all these stains. I also like the first stain and while holding shift, I'll also select the Last Stain which selects all of them. And then I'll drag them onto this array off splashes. And now we have established all the connections I can just hit. Apply here, and it is safe to delete our damage. Fact brief up because it is already saved in our prefects folder. Soil just hit delete here, and I've already created this other game object that is called Damage Effect Test and I've attached our damage effect test script to this game object. The only connection that it has is our damage. Prefab soil navigate to our essence folder pre fabs. Locate my damage effect prefab. Select this game. Object back, and I'll drag our damage effect prefab onto this field. And let's also check where this game object is. So for our convenience, let's set its position 2000 and this way it will incense. She ate our damage effect at 000 Now I have this error showing up in my console, and that's happening because they try to launch the game without assigning this damage effect prefab to this field. And now, if you launch the game and if I press eight, then a random damage effect will be spawned at 000 and it will show different splashes and different amounts off damage. So we had minus five a couple of times, and now we get minus one minus two and so on. So this is how damage effects will look in our game, and I think that they look quite nicely in this fate. Effect also works. So congratulations on completing this and in our next lecture will tackle another interesting topic. We'll talk about targeted spell cards. So far, we have designed a spell card that will be activated just by dragging it onto our battlefield as an example. Off such a spell might be something like deal to damage to random characters, so you don't get to select a target for your spell. And when you drag it onto the battlefield, it just executes its effect. But there might be other situations when you get spells like Deal to damage to a Target creature or deal three damage to a target character or something similar to this where you have to actually select a target for your spell. And then our spell card will work a bit differently, mostly in the part off dragging. So instead, off dragging, our card will actually drag a special Aiken with a little target gizmo. And it will also draw an arrow from our card to our spell target. And the same system will also be used for our creatures attack. So when we attack with our creature, we don't want to drag this creature. Instead, we want to drag a certain target I can, and when we drag it on another creature, or maybe on our opponent, then our creature should attack. So in the next lecture, I will tell you how I ended up making these arrows and how these targeted spell cards will work in our game. Thank you very much for watching this course, and I will see you in the next lecture.