Develop Trading Card Game Battle System With Unity 3D: Part X (Assembling the Battle Scene Layout) | Vladimir Limarchenko | Skillshare

Develop Trading Card Game Battle System With Unity 3D: Part X (Assembling the Battle Scene Layout)

Vladimir Limarchenko, Game Developer, Unity3d and C#

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
2 Lessons (26m)
    • 1. Assembling the Battle Scene Layout

      11:45
    • 2. Organizing Cards and Creatures

      13:50

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 this class we`ll organize all the elements of our future battle scene. There are 2 orientations that are most intuitive: player in the lower part of the screen and his opponent on top of the screen (Hearthstone style) and the second option – player on the left and his opponent on the right (Heroes of Might and Magic style, even though it`s not a card game). In some cases, other combinations (player on top, opponent below; player on the right, opponent on the left; some diagonal combinations) are also justifiable if they reinforce the main concept of your game. We`ll use the Hearthstone style of organizing everything and position our player`s portraits, mana pools and decks accordingly. We`ll put the burning rope timer in the middle of the screen.

In the second part of this class we`ll make a dynamic system of slots that will define positions both for cards in our players` hands and for creatures on our players` tables. This setup will help us manage cards and creatures and make sure that they are self-aligned and remain closer to the center of the screen.

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

Transcripts

1. Assembling the Battle Scene Layout: Hello, everyone, and thank you for watching the scores. Now our plan for this lecture is to add all those graphical elements that we've made in our previous couple of lectures and to assemble the layout that our players will see on their screens while they play this game and also will do some tidying up in our higher. So first thing that I want to figure out is I want to place this rope game object right in the center, off our screens. So first I'll change its X and Y positions 200 and then it doesn't seem to be very centered . So we also have to check the position off this cannabis game object and will change it to 00 as well. And even after we have done this, the rope doesn't seem to be centered still, So let's go to our scene and I'll zoom out a little. So here is the center off our screen rights where our main camera is, and we want this rope to go through this Centrepoint soil play with its Y value and will bring this rope just a bit higher. I think this will work and I'll apply the changes that have made to this rope and and button prefab. Next, let's make some tidying up in are seen by creating some more empty game objects. So I'll go to this hierarchy. Tab and hit Create creates empty, and I'll call this game object visual. So under this game object, we want to have all the game elements that have some visual representation, like actual decks, the guards, the Roop. So basically everything that we have created so far should go under this visual game object , For example, I can drag our marble texture as a child of this visual and actually first. Before doing this, I should check that our visual is located in the center off our screens. Soil position, this game object at 000 and then I'll grab our moral texture. Make it a child off our visual game. Object Rope and end button should also be direct. Children off this visual game object and let's zoom out even more and later in our scene will have to areas for both off our players. One of these players areas will be drone in the lower part of the screen, and another area will appear here on top off our screen, So let's create and design at least one area and let's start from the lower one. So I'll, right click. Create an empty game object, and I'll call this one lower clear area. And as a child of this lower player area, we want to have some of the pre fabs that we have already prepared. We can actually have our deck as a child off our lower player area, so each player will have a deck who make this one belong to this player that's in the lower part of the screen. Then let's go to pre fabs and bring some of the elements from our pre fabs folder into the scene. First, let's drag our mana pool and make it a child off our lower player area. Then, of course, we want to change the location for this man Abu and we also have to resolve its sorting order issue because currently it is showing behind our background. So let's expand our mana pools, select its canvas and just set some ordering layer that it's higher than zero. For example, an order in layer off 20 will solve this issue and then I can hit, apply, and let's bring the mana pool to where we wanted to be. I'll change. It's why position and then I'll make it nice and centered by setting its X coordinate to zero. So for this player, this mana pool will be located in the lower part of the screen. I think I'll bring the deck a bit higher so that we have a nice dynamic off cards transitioning from our deck into our hand right here on top of this man, Apu will actually have our players hand, and then let's bring in some other elements, like our player portrait, and we are instantly making it a child off our lower player area. Then I'll have to reposition our player portrait, and I wanted to appear here beside our Mana pool. And finally, let's have our hero power button as well. So I'll make this hero power button child off our lower player area, and then we'll change its position to be near our players sport treat. I think this almost works and then make some final adjustments and later will also have several other game objects. They will not be visible, but they will be very important in our game because they will mark the places where our cards go and where the creatures on our table should go. So here will later have our hand area. And here on top will have our table area where the creatures will appear when we play them from hand. And now I wanted to talk about several options that we have for creating our second player . And I also wanted to have a short conversation about unities. Brief abs. What I've ended up doing in my test project, I've actually prefab this lower player area game object. But if we prefab this parent game object that is bigger and it contains our deck, our mana pool, our player portrait, the hero, power bottom and all these elements, they will later have their custom scripts and everything. And by prefab being this lower player area, we actually break the connections off these game objects the deck, the mana pool and so on with their pre fabs. So if we have prefab this lower player area game object, it behaves as a completely new prefab, and it doesn't know that this man a pool is actually controlled by this prefab. If we make any changes to this man, a pool that will be a child off our prefab lower player area, then all these changes, they will not be applied to this prefab and vice versa. If we make any changes to our men, a pool prefab, then these changes will not apply to this mana pool if it is a part of the larger prefab. So with this in mind, I think that will work on our lower player area without creating a prefab out of it for as long as we can. And then when we attach most of the scripts to our game objects and they will actually be functional, then we can create duplicates off our lower player area, rearrange everything and create our top player area out of that and then we'll see from there. We might want to make pre fabs out of these larger game objects or we might want to manage this like it currently is with all these smaller prefab game objects. And actually there's another interesting point. Our lower player area is located at 000 so if we switch to our seen the slower player area will be placed here right in the center, off our screen and all these Duckman, a pool player portrait. They beer lower than this lower player area, and we want to change it a little. So, Al, just grab all these game objects. And with this probably to selected, I'll drag them and bring them over here so that they appear closer to the center of our screen. And then I'll grab this slower player area and I'll bring it a bit lower. Let's double check that our man APU is in the center by changing its X coordinate back to zero, and I think that now, just to have some sort of visual representation for our top player area, I'll create a copy of this lower player area, and I'll drag this 2nd 1 here on top. I would be named this game object, and I call this one talk clear area temp. So this is just a temporary game. Object will create an actual top player area from this lower player area with all the scripts, and we'll have game objects for our hand and table there so we'll grab the fullest and most complete game object and then we'll create a top player area out of that, and this will just serve as a blueprint for what we want to have on top of our screens. So now I will just re arrange these game objects and change their positions to where we want them to be, and then I'll get back to you. So I'm back, and I have just adjusted some of the transform positions off our top player area game objects. And I think that this is pretty accurate and without the cards and the creatures are game will pretty much look like this. The hand off our top player will appear over here, and the creatures on the table will be placed over here. So the top layer area is a bit different in terms off placement off this avatar and this man a pool and the deck. Otherwise, everything is pretty much the same. Now, Once we have organized everything like this in the hierarchy, you can also check that it is very easy to manage. So as a child off our visual game object, we have our background that doesn't belong to anyone in particular, our rope and in turn, button. They also don't belong to any off our players. And then we have these lower and top player areas and all the game objects that will belong to some of the players. They will become a child off these player areas or some other game objects that our Children off this lower or top player area and in our next lecture will take a look at a very interesting and cool script that will help us manage our players hands and our players stables in an interesting and dynamic way. So instead of making what other people do when they create their own and simple versions, off guard games I've often seen people make preset places. Four cards, for example, this first guard who always appear here. The second card will always appear here, and you're the first guard and so on, and we are aiming at another and more ambitious goal. We would like to make our hand and our table actually dynamic, so the hand and the table they always adapt and shift. So let our cards will always appear in the center off our hand, and this will also be true. For are creatures the creatures they will always group in the center off our battlefield, no matter how many creatures will have. And this will be the topic off our next video. I would like to thank you very much for watching this course, and I'll see you in our next lecture. 2. Organizing Cards and Creatures: Hello, everyone. And thanks for watching the scores in this lecture. I wanted to take a look at another script with you, and this script will help us place the cards into our players hands. And it will also help us place the creatures on our player stable so that both the hand and the table they will behave in this interesting and dynamic way. And the script is called same distance Children. It is located in our downloads, scripts, visual folder and L. Just grab it and bring it into the same folder in Unity. I'll minimize this window, readjust our layout on the screen. So if something has disappeared, just grabbed one of the edges off your game tab or you're seen Tab and everything will go back to normal and now will mostly work on our lower player areas. So I'll expand that, and I will create a new empty game object, and this game object will be called hand visual. Let's go to our scene and check where this game object actually appears. I was like this, too, and I'll bring our hand visual here to the lower part off our player area so that the guards. They will also share the same Y coordinate that this game object has, and we can readjust this later if we need. And as a child of this hand visual game object, I'll go and create another empty game object. And this one will be called Slots. So this game object will hold a collection off other game objects that will be organized by our same distance Children script. And as a child of this slot game object, I'll create another empty game object, and I'll call it just slot. So this represents a slot for our one single card, and this slot game object is just empty, and it will never have any visual representation in our game. So in order to see this one, I'll go to this inspector and expand this list off different gizmos that can give to our game object, and I'll select an ICANN or gizmo. I think let's go with this orange one and then I can switch to any other two, and this game object will be marked with this orange diamond in our scene, and then we can create more of them. So with this slot game object selected, I can press control d a couple of times, and we want to have 10 because our players they can hold on Lee 10 cards in their hands. So I'll go on creating these until we have 10 of them. And each of these new game objects will also have this little diamond Aiken. So if I drag this last one and I switched to my hand, too, then we'll see that in our scene will have two of these Diamond Aikens visible, and now we probably want to organize these slot game objects in some way. And, of course, we want to have even distances between our game objects, and it is nearly impossible to achieve this just by rearranging them by hand. So just selecting this too, and trying to place all these game objects by hand so that the distances between them are equal, it is very hard. And later, if you decide to make some adjustments, it will also be hard to achieve. You will have to recalculate everything, so we gotta have some means off organizing these game objects for us and the script. Same distance Children will do. The job will have to select our slowed sparing game object and attach this same distance Children script to our game object. It has an array that is called Children. So to populate this array, we can lock the inspector, select all of our slot child game objects, and we can drag them onto this Children array. And the logic behind the script is very simple. It first finds the first element than it finds the last element in this ray. It figures out the distance between the first and the last element. And then it arranges all these other elements so that they have even distances and they're evenly distributed between the first and the last element. Now, to check how it works, we can just launch the game and then once our game starts, if we enable gizmos, you can see that all these little diamonds, they are arranged in this nice and even weight. And this is our first element and this is our last element. And if we exit the scene, then you'll see that all of these slot slot Juan slow to They are all located here at 000 So once we enter the scene, then it actually happens in awake function off our same distance. Children script. All these game objects they get reorganized and re distributed evenly between our first and our last slot. And one more thing about the flexibility off this script. It might seem like it's a nice idea to organize our game objects like this. So we have the 1st 1 than the 2nd 1 than 3rd 1 and then the last one. So we'll organize them from left to right and actually for our project and you later see this. It is better to organize them from rights to left so I can grab this last game object in our Children's ray, and I can drag it all the way to somewhere over here. Maybe, let's try and drag it onto our players portrayed. And then if we launched the game, these game objects, they will get organized in this manner. And this is more suitable for us because then when the card will be drawn, we can always place our new card on this zeroth spot. So when the card is drawn from the deck, it is placed on this zeros spot, and when the next card is drawn from the deck, than this previous card gets shifted, and this card still gets drawn onto this first spot. And actually, I don't want to have maximized on play right now to show you another interesting thing with our slots. Currently, they all have the same that coordinate, but it doesn't have to say this way and in our project will take advantage of that. So instead of placing all of them with the same Zet, coordinate and I don't have to forget that I have my slow. It's game object selected, and I've looked the inspector on its soil. Unlock the inspector and for this slot with an index off nine game object, I'll try and add a little displacement in hours that coordinate. And now, if you launch the game, if we check the positions for all these other game objects, they just fall under a certain pattern. And each of these game objects it appears a little in front off its previous game object and finally, to show you how this works while our game is running because I don't want these changes to be saved anywhere. I would like to go to our Assets folder pre fabs, and let's bring in some cards into our project. So I'll grab this creature card and I'll make it a child off our first slot, and I have to control its transform position and set it to zero so that it appears right in the center off our first slut. Then I'll grab a couple of other cards, for example, this spell card, and I'll make it a child off our first slot. Then I'll grab one more spell card and so on and so forth. So, uh, another creature card, and I'll readjust its position back to zero. So now that we have these four guards, let's make a quick discussion on how our hand will manage blazing these cards. For example. I can disable these three cards for now, and we have just drawn one card from our deck. It fell into this first spot and everything seems alright. Our card is located right in the center, off our hand and in the center off our screen. And then when we add the second card, so actually what happens? This first guard will get shifted to the second slot and this card will appear over here. But let's imagine that this has happened and now we have two cards. This way we can still manage to keep this hand centered by shifting this slots game object . So instead of having it here, we can shift this slot game, object towards the centre off our screen, and this way we can ensure that our hand will always be centered. If we add the third card, then it means that we have to shift our slots Game object again so later in code will readjust the positioning of this slots parent game object Depending on how many cards do we have in our hand and finally, I'll exit play mode and let's take a look at how this script same distance Children works. So I'll open it in mono develop. So the script is really short and it looks like this. It is a model behavior. So we're using this awake function. We have a public array off transformed status cold Children. We have already populated this array with our slots in the Inspector, and then we have this awake function in the awake. We find the position off our first element, and our first element is the member off our array with an index off zero so later we say transform position and we could have actually said just position because it is already a transform. And for this last element position, we're seeing Children with an index off Children length minus one. So the last element in this ray it will always have an index off Children dot length minus one. And here we could have also said, Just position because this array off Children, they're already transforms. And here we are doing some math, and we're figuring out the distance between two neighboring game objects. So we are taking the difference in position between our first and last element in one coordinate, and then we're dividing it by Children that length minus one. And there is a simple explanation for that. Between 10 points, there are nine segments or there are nine gaps, and we just want to calculate those gaps. And we're doing the same thing for all the coordinates. Then reform this new Vector three there is called dist, and it is just a collection off our distances, accessed widest and said dissed. And then we loop through all those transformed game objects in our Children array except for the 1st 1 So we're not actually changing the transform position for our zeroth game. Objects of here were saying, and I equals one, which means that we're not repositioning our zeroth transform in this Children's array. And then we say Children with an index off I transform position equals Children with an index off I minus one. And then we say that this current transformed position will be equal to the position off the previous element in our array. Plus this vector three distance and this does the trick. So this code will just rearrange all of our Children game objects and who place them appropriately in our scene. We'll use this trip not only for our hand, but also for our table, and I think that will make that in our next lectures. For now, let's return back to our scene and readjust this border, and we might want to have a prefab off our hand visuals. So let's go to pre fabs and I'll drag our hand visual game object into this folder, and that will also make a prefab out of it. I think that on this point will end this section in this section. We have first done some more work on our cards. And then we have created all these visual game objects that will have in our game from player portray its and hero powers to mana pools, these Dax and this custom rope and in turn bottom game object. And we have also had a brief discussion on how our cards and creatures will be placed in this game in our next section will be focusing mostly on scripting, So we'll add more custom scripts into our project that will control the behavior off all these visual game objects. And we'll discuss architecture and the general philosophy behind this application. How we should approach making the card game, how all these transitions and in directions happened in our game. Different effects like taking damage, attacking with a creature casting a spell. We'll discuss how all these things should happen in our game. I would like to thank you for watching the scores and I will see you in the next section