How to Make a 2D Multiplayer Tabletop Card Game in Unity - Part 6 (Using DropZones)

[Music] hey everybody emma sparzan here and welcome back to this video series on how to make a 2d multiplayer tabletop card game using unity and mirror in our previous session we learned how to use our draw cards button to instantiate a bunch of cards in our player layer area and move them around and parent them to the canvas so that they stay on top when we're dragging them around now we need to do a little bit of work on our player area and also our drop zone so that they are so that when the cards are instantiated or created they will have a bit more uh space between them they're not being instantiated one on top of each other and also so that when we drag and drop our cards we can't just put them anywhere on their on our screen when we drag a card it should go um in the drop zone if the player has dropped them correctly and if they haven't dropped the card correctly it should return to the to the original parent which was the player area that requires a little bit of setup both on the ui the user interface set of set side of things and also on the script side of things so let's get started with that the first thing i'm going to do is select my player area prefab and i'm going to begin working with what's called a grid layout group so i'm going to add a component i'm going to search for grid layout group and that creates a an invisible grid here that is going to govern how things are are going to work when they're children of that game object i have a few things that i've already worked out here on the back end so i'm just going to let you know what has been working for me you're welcome to tinker with these things on in your own time and see what works for you here i'm going to make the cell size that basically the same size as my cards which is going to be 120 by 177 i'm going to have uh 20 pixels on the the x-axis in between these and 0 on the y-axis i want the start corner to be the lower left i want the start axis to be vertical and i want the child alignment to be middle center and the constraint to be a fixed row count with a constraint count of one we'll see a little bit of how this this governs the shape of what uh how the cards are gonna come out but um uh that's not really important at this time uh you like i said it would be a great idea to just play around with these different values and see if you find something that works better for your game this is just pretty simplified for our our purposes um the uh we'll need to do a similar thing with our uh enemy area which um is a great reason why you basically just want to make one version of a thing and then make like prefab variants or just like duplicate the prefab but you know this is a but we're doing this sequentially so that you're able to see each one of the steps so our enemy area will also add a great grid layout group group we'll use the same items here so 120 by 177 20 pixels in between them we want lower left and vertical and middle center and a fixed row count of one and we'll do the same with our drop zone add a grid layout group these are all basically the same thing different colors which is why we could have just duplicated them but what are you going to do 177 20 pixels lower left vertical middle center and fixed row count of one i think this probably makes no sense right now but it will let's just see what happens when we draw the let me draw our cards okay now we see that um rather than drawing them uh drawing the cards and putting them one on top of another it's utilizing the grid layout group to space them out with 20 pixels in between them and i would think that the first one starts in the middle and then it populates out to the left and right i'm not actually certain about that but we'll see in just a moment with the drop zone um and so that looks pretty good you could change this as you like and move them however you like like it's it's all the same to me uh but the the point is that they've they're now displaying correctly um as a hand of cards uh and when i draw them they uh well uh the because it's no this card is now a child of the canvas and no longer a child of the player area it uh works to my advantage in that um the hand size will get smaller and i can keep doing that and that's just great now there's no other added functionality here just that just that part of it i can't re-parent it to the um player area without having the appropriate script so we're going to work on that now okay so looking at the the just pulling up the right scripts here looking at the script here for the drag and drop i need to say something here that that indicates if the card is dropped in a drop zone like that's fine but if it's not it should be sent back to the player area that's going to require a couple of steps on our part the first thing we're going to do here is we're going to declare a public game object drop zone and similar to what we did here with the main canvas oops in the start method we're going to say drop zone equals game object dot find drop zone which is what we've called it in our scene here you're going to have to make sure that your spelling and capitalization spacing is all correct otherwise it won't be able to find the right game object and then in the what we want to check is at the in the start drag we want to say that the start parent to be we haven't actually um declared these let me just make sure that i do this right and tell you the right thing we're going to say we're going to create a private game object start parent a private vector 2 start position and a private game object drop zone and a private boolean is over drop zone let's look at in turn what each one of these are going to do within the start drag we basically want to store where where the exact position or the the parent of the um the card before it goes anywhere and so in within start drag when someone starts to drag this we're going to set start parent equal to transform dot parent dot game object this is shorthand for saying transform the transformer attached to this this game object we want to find the parent of that transform and find the the game that game object um and say um and make that game object equal to the start parent so the parent here is going to be the the player area you could do this with transforms as well we're just using game objects here it's not that big of a deal and we're saying start position equals transform dot position the position of this transform before it gets dragged we want to store that and in the end drag uh method when the game when the game object is um when someone stops dragging the game object we want is dragon to be false and we say if is over drop zone do something otherwise transform dot position equals start position and transform dot set parent start parent dot transform false so when the when the card is when the end drag happens on the card if it's over the drop zone let's do something which we'll handle in just a moment otherwise send it make the position its start position which we started which we stored when we started dragging and set its parent to whatever the parent was at the beginning of the drag which in this case was the player area and we say false because we don't want the world position to stay wherever it wherever it is when the person is dragging it we want it to go we want to parent it to the to the start parent and make sure that its position is relative to the start parent um you might say well why do we have to set the parent again well that's because when we're dragging we change the parent to the canvas so that it's closer to our eyeballs and we need to send it back to wherever it came from in this case it's the it's the player area so what do we do if it is over a drop zone well we'll say transform dot set parent lowercase drop zone and we'll we'll see why in just a moment dot transform comma false we don't want it to keep its world position we want it to be right in the middle of the drop zone and uh that's it great something pretty huge is missing here but uh which we'll discuss in a moment but the the general logic is that when we start the the um the drag we want to store these the original parent and the original position when we end the drag if it's not over a drop zone then we uh we send it back to from once it came if it is over a drop zone set the parent to our lower case drop zone now why why are we using lowercase drop zone in instead of the uppercase drop zone well there's a couple of reasons for this um the first one being that the um uh we need to set the uh position of uh the exact drop zone that we're talking about at a very specific moment in time so um and the way that we're going to do do this is by using colliders and that's generally the only like 2d physics adjacent stuff that we're going to be using in this tutorial um there are some other ways of doing this like you can use raycasts um i this is just the simplest and in my mind most elegant method that i've um come across uh in in making this work if you find a better way like you're welcome to use it i've seen a couple of examples this is the one that seems to work the best for me and in the most use case scenarios let's go back into our scene and hook this hook this all up i have my cheat sheet on another screen here so um what i need to do is go to my card one prefab and i need to add a couple of things here to make this work the first thing i need is called a box collider 2d and i also need a rigid body 2d the box collider does exactly what it sounds it creates a collider um that detects when there is a collision between this object and another game object and the rigid body allows us to have 2d physics stuff performed on the game object the thing that i want to show you here is if i double click this card prefab i get a closer view of this actual prefab and then when i click on the collider i can click edit collider and it shows me this little green thing that just means that that's the size of the collider i want the collider to be the size of the entire game object so here under um the i don't really need to change anything except for the size i'm going to change it to 120 by 177 and that makes a pretty much size of the the the card itself i could use these little um handles to to edit it as needed if i if i wanted and it's a box collider rather like if you had different size um types of uh cards like circular ones you probably would use a different kind of collider and then for the the rigid body 2d i'm going to keep it as a dynamic and simulated in all this business the only thing that i need to do here is i'll change the angular drag to zero and the gravity scale to zero because i don't want the the card to have any gravity in my scene i just want it to be an item that detects collisions um but isn't like pulled down to the edge of the screen or something and collision detection will be continuous and that's really all the changes that i need to make now if we were doing this smartly then we would have just one card that would card prefab that would change all you know variants of that prefab we're doing this so simply that we it does require for us to do a similar thing here in um in card two so we'll just do that we'll add a box collider 2d and a rigid body 2d we'll make this size of the box collider 120 by 177 and we'll make the angular drag zero and the gravity scale zero collision detection will be continuous okay so that should work for all of our our card um objects great so they will now collide with one another and then um we'll take a look at our drop zone and we also need to create a box collider here we don't need a rigid body because we're not actually doing performing physics operations on this thing so i'm going to add a component here which is a box collider 2d and then here the size i'm just going to set it to what is the size of this thing well let's take a look at the actual collider should be 1920 by 195. okay and we can see that lines up pretty perfectly does that look right just checking my cheat sheet collider yep that all looks good great okay cool so what this means is that we've created a collider on the drop zone as well as the cards so when those collide we should see a collision let's demonstrate that through the code so we've got our code up here and the way that we access our collisions through code is uh pretty simple we're just going to add a little block here that says private void on collision enter 2d and that um will create a little block here and then private void on collision exit 2d let's just say debug log colliding and debug log uncolliding i find this to be a really great way just to make sure things are working as you might think they're intended if you run into an issue just debug log something and see if it's working the way that you want it to and now let's go back to our scene hit play draw cards we don't see any logs here i'll go to the console and i draw the card and it says it's colliding it's colliding see how many times it's colliding and uncolliding and then um let's collapse this so that we only see you know we can watch the numbers go up here on the right hand side and i drag and it's colliding it's colliding great and well it's being sent back to the the parent the original parent the player area but something i want you to notice is also it's when i go over these cards they're also colliding and kind of like starting to look weird see the numbers go up on the right hand side that means these cards are colliding with one another too so we have a couple issues here one we can't really drop the card anywhere it just goes back to the parent which is which we want that that's cool but we need to write our code to make sure that it's parented to the drop zone and we also need to make sure these cards don't collide with one another how do we do that well it's actually a little bit easier than you might think or maybe not maybe it's complicated um we uh in the in the first case we'll say on collision entered 2d when this happens when it collides with something this card collides with something we'll say is over drop zone equals true and the drop zone lower case drop zone is equal to collision dot game object so whatever it's colliding with we're going to say lowercase drop zone is equal to this to whatever collision is being passed into this by unity so when a collision happens unity passes in the event of the collision um uh into this script and we're and we're accessing the game object that it's collided with and setting that to the drop zone we're saying whatever you collided with that's probably a drop zone so let's make it that and then on a collision exit 2d when the when the collision doesn't happen anymore we'll say is overdrop zone equals false and lowercase drop zone is equal to null and that just sets everything back to resets everything back this could be like if you have multiple different drop zones and you want to you know govern your logic within this script that's what you could do here nothing needs to happen within our start drag function but within our n drag function or method we remember we set said that if it's not over the drop zone if we're not if that this boolean is false then um we send it back um to from whence it's came which it's that's working properly but we um see here that if it is over the drop zone we want to uh set its parent to lowercase drop zone um uh or the transform of lowercase drop zone and so uh now that we've done all this that should work properly let's give it a try okay hit play oops hit play and then hit the draw cards button and all these cards populate i drag one of these cards over to the drop zone and it drops right there but it's kind of like what's happening here it's like it's being all weird and then i drag it and it drops over one of these cards and there's collisions and like weird stuffs happening and it's just all hot mess okay so that's problematic but it's kind of working right and so we need to get a little bit into uh the layers um of of and the layer collision matrix no big deal first of all uh when i click on one of my cards i see that the layer is default i'm going to add a layer here and i'm going to call it under user layer six i'm gonna call it cards and another one that's called um let's say drop zones okay go back to my card i'm gonna set that to cards i'm also going to set card 2 to cards i'm going to grab my drop zone and i'm going to set it to drop zones okay now i'm going to go up to edit project settings and i'm already in my physics 2d menu you might have to scroll down to see this spacing based on your screen and i see this layer collision matrix that means allows the cl uh allows the configuration of the layer based collision detection that just means uh right now we have it set so everything collides with everything but what if i don't want cards to collide with themselves well i just find where cards are colliding with themselves uncheck that box and now cards will no longer collide with themselves however drop zones will collide with drop zones i don't think we need that but we do want cards to collide with drop zones that's in our layer collision matrix now i hit play and i hit draw cards and nothing weird happens i don't get any um sort of weirdness there i drop it in the drop zone and i do see a little bit of weirdness there it's starting to just like shake and bake like that um and then i um i don't drop it in the i don't let it collide let's say i drop it here and it goes back to back to its original parent let's take a look at why this is happening here well the reason is there's just a little bit of hinkiness with the way that the uh box colliders will work or i should say the rigid bodies attached to the cards um there's a little a tiny thing here under constraints that we want to use um where whenever we uh manipulate these cards with a rigid body 2d we want to freeze the x y and z rotation x y x and y positions and the rotations of these game objects same with card um it's uh i don't know if this is a hold over from um the fact that unity at its heart is a 3d engine and we're working with it on a 2d space with it and so it's not like natively 2d like some other game engines and so it might there might be some weirdness there i'm not quite sure but this works this is what has worked for me is to um find the rigid body 2d uh component and change the constraints um by freezing the xy position and the rotation now when i hit play and i hit draw cards they all populate this way and if i drop it in the in the drop zone area it does so another one will do so we'll just keep doing that but if i don't drop them correctly or if i you know try and drop them in the enemy area they'll go back to the start area and we'll see now that everything stays in the in the drop zone and you might have a scenario in which you don't want the cards to be manipulated after they've been dropped there we've done a great job at parenting them right and it all works correctly but you might want to say like okay i don't want you to be able to drag them anymore we'll deal with that in a in a future video and that pretty much wraps it up for our basic game architecture from a single player perspective in the next video and the ensuing videos we'll mostly be looking at the networking aspect of this with uh using mirror so we'll make it similar to the uh the very first video in this series where you're able to drag and drop cards and then someone else on a different client will be able to see what you're doing and vice versa so that'll be cool be sure to tune in for that and uh if you like this video please be sure to physically like it and subscribe to my channel for more you can also follow me on twitter and i'd love for you to check out my books and games you can do so by following the link that i've included in the description of this video and we'll see you soon [Music]

Channel: M. S. Farzan

Views: 2,144

Keywords: m s farzan, 2d game framework, mirror, c#, unity, trading card game, programming, what 2d game engine should I use, collectible card game, learn programming, learn to code, coding, 2d games, ccg, entromancy, 2d game engine, tabletop, unity 2d, game development, coding tutorial, card game, beginner coding, multiplayer, tcg

Id: JOLXe6rV9S8

Length: 27min 43sec (1663 seconds)

Published: Sat Apr 17 2021