How to Create a 2D Card Game in Unity - Part 1 (Setup and Basic Game Architecture)

hey everybody I'm as far as on here and in this video we're gonna take a look at how to create a simple 2d card game using unity if you haven't used unity before I highly recommend checking out my other video called take a tour of unity I'll link it in the description section and at the end of this video so that you can look at some of the different features that we'll be using here in this 2d card game and I should also mention that we're not using every feature that comes with unity for 2d game development for example we won't be using much of the physics engine we won't be using the animator for anything but this tutorial will give you an example of how to do things like dragging and dropping items on the canvas layer it will focus on some scripting and c-sharp which will give you an overview of how to do some things in unity and if you don't already have a c-sharp background I also highly recommend brushing up on your c-sharp so that you have some of the basics and will understand some of the things that I'm doing here from a c-sharp perspective although I will explain each thing that I do H script that I implement using Visual Studio as you can see here we just have a completely blank slate I'm using unity 2019 2.15 f1 personal you might be using a different version of unity but by and large the things that we'll work with today will be pretty similar I also have Visual Studio installed as the code editor that we'll be using for our our c-sharp scripts I highly recommend that if you have an install Visual Studio go ahead and do that and also install the unity tools for Visual Studio as they will make your quality of life that much easier when you're writing your scripts for all the things that we're gonna do today so we have this blank slate and I'm just going to start by giving you an overview of what we're attempting to accomplish in this video we want to have a 2d card game that for right now it'll just be a single-player card game where we'll have canvas that will serve as a background for the card game almost like we have a tabletop that has a an area for me to be dealt a hand of car and an area for you to be dealt a hand of cards so two hand areas will want a drop zone right in the middle where we can drop cards will want a button or some sort of way that we can tell the computer that we want it to deal s a hand of cards and that will represent the basics the basic structure or architecture of our card game so let's get started the first thing I'm going to do is right now I'm on the game scene in in the editor and I want to switch over to the scene scene or the scene tab so that I can see what I'm doing and I'm gonna go up to game object the game object menu is one place that you'll spend a lot of your time and I'm just gonna scroll down to UI and create a canvas as you can see that populates a canvas right in my hierarchy here on the left hand side and it also displays information about the canvas in the inspector and I'm going to just right click and drag here so that I can see the canvas that's being created I might have to scroll out as well as the canvases is it looks quite big in my current view and now I can see the the entire canvas just like that and if I click play that'll automatically team take me over to the game tab and there's nothing going on here this is just a standard unity background which is a light blue so I want to create a background that looks like a tabletop so what I'm going to do is go over to game object again and scroll down to UI and I'm gonna create an image and what that will do is just drop the square image right in the middle of my canvas you'll see also on the left hand side in the hierarchy that it has it has nested the image underneath the canvas as a child of the canvas which is what we want I'm going to drag this over to the corner here and then use the sizing tool to just make it snap to the the entirety of the canvas if you're having trouble with that or if that's not working for some reason take a look to make sure that you have this tool the the rect tool selected which will allow you to to change the size of the image and if you're having issues with your snapping settings like it's not snapping correctly you can find those under edit snap settings and then you can change these as you see fit so I've created that image as my background and I'm actually just going to click on it or you can right click and rename it name it something like background and if I click play now I got this night nice white background so we're playing in the snow and just for just for fun I'm going to change the color of this background to black like a black tabletop the way that I do that is I want to make sure that I've selected the background either in the scene view or in the hierarchy right now I'm actually selected the canvas so let me select the background I'll click on this color palette and then if you have a color code in mind like you could enter that but right now I'm just gonna drag this guy all the way down to here so that it looks like I have a black background and if I press play it shows that I have done that successfully so yay us okay so that's our tabletop for the for this basic game now I'm gonna add two areas one for my hand or where my hand is going to be dealt and where one where the opponent's hand or your hand is going to be dealt we'll call that the just just for a nomenclature we'll call it the player area and the opponent area for now and so what I'm going to do here is I'm going to do the same thing I did before and create a an image and I'm gonna drag it down here to the bottom of the screen and I'm going to drag it across and then drag it up a little bit more maybe let's say this is a quarter of the screen and that'll be my hand area and I'm actually going to change the color of this to I'm really into cyberpunk as you would know if you've seen any of my videos so I'm gonna I'm gonna create a nice cyberpunk blue color here maybe yeah that's almost like a little Sian a little bit darker that's perfect just like that and then I'm going to what I'll do here is I'll change the name of this to be called player area and I'll right-click on this and I'll hit duplicate and I'll rename the new object that's created into let's say enemy area I know I said opponent area but that's just this feels more competitive and we're making a competitive card game let's say so let's just call that enemy area I'm going to drag that up it should snap to the grid up here and I have two areas and I'm gonna say I'm just going to recolor this to be a nice cyberpunk hot pink yeah just like that perfect cool very good so I got a player area and an enemy area and I'm gonna do something funny now I'm going to go down to this project tab which we haven't talked about before this is essentially a file system for you to organize things as you see see fit I'm gonna use one convention you don't have to use that if your desktop is totally messy and you just have a method to your madness like go ahead with that but for me I like to keep organized so right now in the assets folder I just have this scenes folder so I'm gonna create a new folder by right-clicking and hitting create folder I'm gonna call that prefabs I'm gonna double click in that folder and I'm gonna drag each of these things the background the player area and the enemy area into that folder into the this this tab and what that does is it creates a prefab of each of those areas that I can use later on or whenever I need them to populate instances of that object in the in the game as I see fit so it's kind of like creating a cookie cutter of something rather than having to to make each of those cookies the shapes of those cookies every time that I want to have a cookie so like let's say you were making a platformer and you wanted to create a bunch of monsters well you could create and let's say all of these monsters six arms well you could create like a bunch of monsters as we just did or you could create one monster that has all the six arms that you want it to have and all of the properties that you want to have and then create it as a drag it down to create a prefab out of it and then you can create objects from that prefab or create monsters from that prefab that have the six arms and the ten eyes or whatever it is that you want without having to make the same changes to every object so like let's say later later on you have created that monster with six arms you decide that like two of them should have eight arms instead of six arms well you don't you can just use the same prefab and then make changes to that one to those two objects rather than having to do that and and and edit a bunch of different objects one after the one after the other so we're going to use prefabs pretty extensively in this in this tutorial so it's good to have an idea about what they're used for we have these these three objects under our canvas the background the player area and the enemy area something else that we need is a card or some image of a card that we can use to drag around and essentially play our game I'm gonna do exactly the same thing and and you'll see me do this use go to the game object menu and go to UI but you could also just right click here or right-click on a element to make a an object there are many ways of doing things in unity I'm just giving you one way so that it's easier to wrap your head around unity as I'm sure you encountered can can be can offer you so many options in so many ways of doing things and often they're nested within a lot of different menus that it might sometimes be easier just to be told one way to do them and then later on when you're comfortable with the editor and you feel like you've on-boarded to the way it wants you to work then you can investigate and see if you have a better way that works for you in a more streamlined fashion for now we're just going to go up to game object we're gonna create a UI element another image and we're going to call this image card one and this is this little square thing that doesn't really look like a card to me so I'm just gonna go into the transform here and I already have an idea from working with unity for a while about what I want this to look like so I'm just gonna give you a little cheat here I want it to be 120 units in width and let's say 177 in height and that's that kind of looks like a card to me I don't know you your mileage might vary but for me that looks pretty good and if you have a sprite already like you're an artist or an artist has created a sprite for you you could just attach it to this object and that'll work just fine instead of this rectangular image right now we just want something that we can work with I'm gonna change the color of this to something a little bit more exciting let's make it like a really ugly cyberpunk yellow sort of green sort of thing and we'll call that card one and so yeah so that looks like it stands out against the background it stands out against the the hand areas and that looks pretty good and then what I'm going to do is I'm going to duplicate this and I'll make a another card called card - you can make it as many of these as you want or need and for card - I'm gonna change this to an angry red color yeah just like that like an angry - no red okay and I'm gonna drag both of these to the project tab so that I have prefabs of them and then something that's important about that we want to note early on is that the prefabs are living here in this project folder and the cards so like they still exist we can use them we can we can call for them when we need them but I don't need those cards on the table when I start the game I actually don't want them on the screen I want the player area in the enemy area there so I'm going to leave that in the heart in the hierarchy but once I've created prefabs of these cards I don't actually need them on the screen anymore so I'm gonna leave that alone now that we've got our playing board and we also have the cards that we're gonna use and of course we just have two cards but they will serve as examples for what we're gonna do here I also need a way of dealing cards and a way to tell the computer this that says hey I won I want you to deal cards for me now so I'm going to create another game object and this is also UI you'll notice that most of the things that we're doing here are just in the canvas or the UI elements of unity we're not dealing with other aspects of 2d and definitely not 3d game development here so I'm gonna go to UI I'm gonna use button and I'm gonna drag this button over to the side and I want this button to be a different color I want it to be let's say I want it to be a similar color to this this cyberpunk blue thing actually instead of clicking on this I could instead of clicking on this field next to the color field I can just click on this eyedropper and then you can see the color field changes based on my position of my mouse I'm just gonna put it right over this area and that shows up in the the color field and that will change the button to the appropriate the appropriate color and you might notice that there's although there are a lot of components here in the inspector when I click on the button there's the the transform the canvas renderer there's an image and the button itself which we'll work with later I don't see the text that's because when you create a button in unity it automatically populates a child of that button which is the text so I'm going to click on the text in the hierarchy and I'm gonna change the the text to draw cards you could change the font and the alignment and stuff if you wanted to we're not going to do that right now if I hit play and I click draw cards well nothing happens because we haven't done anything so that's that's essentially what our game board is going to look like we're gonna need to do a little bit more with it later but for now that's that's all we need to do okay let's move to the the idea that when I click on this draw cards button I wanted to draw cards and for that I'm going to need to add a script so what I'm going to do is I'm going to make sure I've clicked on the button object and not the text object then I'm going to click Add component and I'm going to search for script and it'll say new script and I'm gonna call this script draw cards just so I remember what it's called and you'll be like ok where did where exactly did that go I don't see it anywhere and then it will populate as a component on that object I can go back to my assets folder here in the the project tab and that's where that script lives I'm gonna create a new folder called scripts drag that script over to the scripts folder and if I double click in there I have my draw cards draw card script and double click on that and that will open visual studio ok so when you create a new script in in unity it's automatically gonna populate a bunch of boilerplate code for you specifically the namespaces up a top and then most of our work is going to be done here in this public class draw cards monobehaviour this is essentially when you create a script it essentially creates a class for you and ordinarily it creates two functions or methods for you when it's the start method and the other one is the update method you can see here that they've commented that the the start method is called before the first frame update essentially when this when an object exists in the game that that's when the start method is called and then the update method is called once per frame so you could kind of conceptualize it as it just it's checking all the time whether or not it should be doing something in the update method we'll work with that in just a moment in this particular in this particular script we won't be using the update method at all because we just want to check what's happening when we actually click the button so I'm just going to delete this to clean it up a little bit I'll delete this comment because I'm post CD and so what we're gonna do here is we're gonna we're gonna create a couple of things here we're gonna create two parts of two public game objects the first one excuse me it's gonna be a public game object that's called card one a public game object that's called card to a public game object that's called player area and a public game object it's called enemy area okay and the reason why we're declaring them as public is because if I save this and I go back into the editor I see that when I go back to this button remember the the script is the draw card script is attached to the button it exposes in the editor in the inspector these public game objects so I'm basically telling unity through this script I'm saying hey there are these four game objects that exist out in the world somewhere and I'm going to tell you where where they are so we can connect the dots because we're gonna be using them later and so when I see these things they have you can see they say none and they're expecting you to place a game object on top of them I can click this like little button next to them next to this field and it'll bring out it'll bring up this little dialog box that allows me to select a game object or something that I like to do which is at least for me a little bit easier I'll just drag and drop them and here's a good place for us to talk more about prefabs essentially I'm taking I'm telling unity there are these two cards that exist as objects and when I reference them in the script I'm about those game objects or these game objects and I am talking about the prefabs that exist saying that like I want you will see this later but I'm basically gonna say hey unity create new versions of these two cards create a card one and create a card two in my game because they don't currently exist in my game they're just prefabs they're their assets that live elsewhere but when I reference this player area in the enemy area I'm not talking about their prefabs I want you to actually do something with the ones that are on the screen I want you to use this player area that exists over here and this enemy area that exists over here these specific ones that are already instantiated when the when the game starts not their prefabs for the cards which they don't exist in the game when the game starts I want you to instantiate or create versions of cards from these or duplicates of the cards from these prefabs so I'm dragging the the prefabs of the cards to these two fields whereas I'm dragging the actual objects in my hierarchy to these other two these other two fields okay so that's that's the purpose of declaring a public game object now in the there's another aspect of this that we need to well we will need to figure out if we want to understand how to how to randomize and draw cards but right now we're just gonna make it a little bit easier on ourselves and we're gonna say we're gonna create a different method here below the start method and we're gonna call it public void on click you can name it whatever you like and inside of this method we're gonna say game object player card equals instantiate card one at a new vector3 and the great thing about using the tools the visual suit Visual Studio Tools for unity is that it Visual Studio will use intellisense which is they're like sort of autocomplete function so it gives you an indication of of where what you should be typing and what kind of parameters you should be using and you can always like just mouse over stuff to get more ideas like if I mouse over a game object it says well this is the base class for all entity entities in unity scenes or if I if I mouse over instantiate it gives me an idea of what the syntax should be when I'm creating something so if you're stuck or if you're if you don't remember what you should be what your code should look like it can give you a little bit of a boost up but right now I'm going to instantiate this this card one at a new vector3 and the properties of which are at the origin zero and it's gonna have no rotation and I'll explain what this means in just a moment so essentially what we're saying is that on this on click function in this on click function or method I want to create a new game object a private game object called player card and I want to set that equal to the instantiation or the the the creation of a new object so this this player card I'm instantiating a new object and that object it's value should be creating an instance of this card one game object the public game object that we've attached here in the editor so I'm basically saying this new method called on click I want you to create a new version of this card one from this card one prefab and then the the syntax of this essentially the unity it requires you to say well where do you want that that object to live and I'm saying well I want you to create a new vector3 and I want that to be at the origin at 0 0 0 and I have a an incorrect comma here which is why I have this little squiggly line down here and then unity also requires you to declare whether or not it has any form of rotation and this this final parameter quarter 9 identity essentially says I don't want to have any rotation we're not using that for our objects here so I'm gonna save that and then I'm gonna go back to this the editor and I'm not quite ready to go yet because I I haven't said I've created that in the script but I haven't told the button that that's what I want you to do when I click it I definitely called it on click but that's not good enough for unity you need to actually explain to unity in the editor exactly what you want it to do so you're gonna make sure you have this button selected you're gonna go down to this buttons script and you you'll see this on click field that says list is empty you're gonna add to that list and you'll see well there's there's no function or no method that you can use here because this might drive you crazy as it as it does drive me crazy you need to actually drag an object that has the script that you want a reference onto this field which kind of makes no sense to me but I mean I understand why it is done that way but it still drives me crazy so what I'm gonna do is I'm gonna drag this button on to itself into this field and basically that allows unity to access this script that's attached to this button which we're already working with so who knows once I do that you'll see that there's a drop down now that I'm able to select from I'm gonna select draw cards which is the name of our script and then I'm going to look for the on click function that we declared of this one over here and I'm essentially what I've told unity is that when I click this button I want you to use this on click function and then when I click click Play I click draw cards and nothing happens I don't I don't see anything happening well look over here on the on the hierarchy what we have right now is this card one clone and if I click it again it'll happen again I'm creating all these game objects from my prefab and but I'm not seeing them on the screen if I click over to my scene tab and then I select a my card one clone or any one of any one of them they exist somewhere in the game like at the origin where we told them to be but I can't see them and that's because they're not nested under the canvas layer which is what we under the candidate canvas object which is what we need to be able to see the the cards that were instantiated so we have a little bit more work to do I'm going to click play again to stop the game and then I'll go back over to my script so what we've done is we've successfully instantiating the object but we need to nest it under something else in the canvas layer so that we can actually see the object so what we're gonna do is we're gonna say player card dot transform dot set parent player area dot transform and don't say false what this means is that when you say player card dot transform every game object or at least to my knowledge every game object in unity has a property called transform which essentially means where where the card lives where it should be and and other properties above it and we're saying we want to set set its parent to be the player area transform so this is a long-winded way of saying that when we instantiate this player card object we want to set it as a child of this player area game object that we declared earlier and connected the dots with in the editor and then you just have to say false at the end of this because that's part of the set parent method okay so now when I do it I'm gonna click Play and I'm hit draw cards and we see that right here right in the middle of the the play area and then I should be able to say instead of just doing this once I should be able to write a for loop and say for their variable I equals zero and while loops we don't want that well while I is less than 5 and we increment I then I'm going to just cut and paste right in the middle here saying basically five times I want you to execute this code I'll save it and I'll click play and I'll hit draw cards well I'd still just instantiated one of them but if I go over to this player area object here in my hierarchy and I click on this little arrow i've actually instantiated five objects but they're all on top of each other because the player area is just an image it doesn't it's not allowing me to to see all of the images that I'm instantiating or all of the cards that I'm instantiating on top of it in an interesting and like card behavior fashion so I need to do a little bit more work this time in the editor okay so just to recap we created a script where we exposed these four game objects which we then connected the dots with here on the the component the script component on the button we created a method called on click that will instantiate five cards for us and set them to send them as child children to the player area and we connected the dots with that by dragging the button object onto this unclick field here on the button itself and then we selected that draw cards method here under this drop-down and that's all working well and good but I need something else that's going to help me to to make everything just work the way that I I want it to and that means I need to add a grid a grid layout group here and also here on top so that I am able to draw five cards and have them play side-by-side as I would if I were holding them in my hand this is actually pretty easy to do and we're going to do that for both areas so the what I'm gonna do here is I've selected my player area or actually what I probably want to do is select the prefab so if I had multiple of these areas it would affect all of the prefabs I'm sorry all of the objects that we would be using I'm gonna hit add component and I'm gonna look for grid layout group had that and I've done some some work on the backend to to just figure out what we need for this project your you might need something different so feel free to tinker around with this I'm just gonna skip ahead so that you can get an example of how this could work I'm going to change the cell size to the same size of the the cards that we made so there'll be 120 units on the x-axis and 177 on the y-axis I'm gonna have 2028 sub units of spacing in between them on the x-axis I want the start corner to be the lower-left whoops lower left I want to start access to be vertical the child alignment to be on the middle Center and the constraint to be a fixed row count and the constraint count to be one we'll see why that is in just a moment so I've done that and then I note that because I've changed the prefab it's also changed it here in the object it's cascaded down to the object when I click play and I click draw cards we'll see that now it's populated all five cards again but now it's populated in a grid so that I can see them distinguished from one another if you want to mess with this you could you know keep the game going and then select this this object and then you could say like I want to have more spacing between them I want to have a hundred units of measurement between them or I want them to the the children to be aligned to the upper left so you could do a lot of you know tinkering here to make it suit your needs right now we'll just keep it as is and then I'm because I've done that to the the bottom one I also want to do to the top one to the enemy area and this is where we might see that it's beneficial to us to actually make all the changes that we have to a certain type of object make it make a make everything that you want that is in common between two types of objects and then create prefabs because now I'm doubling back and I have to do the same work so I could have added a grid to the to the hand area before duplicating it and then creating an enemy area out of it but you know that's more for us and in our learning process for in the process of demonstrating this in this video so that I can also show you that if you instead of making changes to a prefab here you could click on the enemy area object in your hierarchy hierarchy add a component add a grid layout group we'll make the same changes here 1:20 and when 77 as the size we want 20 units of spacing we want the start corner to be the the lower left we want the start access to be vertical everything's the same here middle Center for the child alignment and fixed row count as the constraint and we want just one row so we've done that now this this hasn't been applied to the to the prefab this is just for this singular object here so if I go over here to this the top of the inspector and I click overrides you'll see that unity will alert me that the we've added a grid layout Script grid layout group to the object and that this hasn't been applied to the prefab so I can just click apply all and then now if I go to the prefab I see that it exists here as well great okay so now we have our grids we have a little bit more work to do in script because we want not only on the in the on click function do we not only only want the player cards to be instantiated on the player area we also want to do that on the the enemy area so I can I'm doing this specifically because I want to divide the two cards up into two different types of cards otherwise I you know there are there many different ways of doing this but I want to distinguish between my player cards in my enemy cards so I'm just going to declare another private variable called a game object enemy card and I want to do the same thing here I want to Constantia 8 them using card 1 let's say actually we want to do card 2 just for the sake of of color here and I want them to instantiate add a new vector3 at the origin with no rotation and I want the enemy card transform to be set as a child of the enemy area transform okay save that go back to my game click play draw cards and now I have three green cards here and three red cards up here so yeah so that's working pretty good well let's add one more piece to this let's say that I don't want to just hand out the same cards to myself and the same cards to the opponent actually I want to mix it up and we're let's say we're both drawing from decks of cars that cards that are randomized well we can do that very easily by using a list here back in the same script I'm gonna create a private list and this is just the we're just using this the c-sharp syntax that unity uses so this might look a little funny if you haven't used a list before we're gonna call this list cards and we're going to set that equal to a new list that the type of it will be of a game game objects and then in the start method meaning like when this when when the game starts and a button is created I want to add to this cards list card one and all so card two so we create a private list that takes an object that takes the type of game object and we're gonna call this cards and at the beginning of the game we're gonna add card one and card to that to that list so essentially when this button is created it will have card one and car two in that list and then when we when we instantiate an object called player card we do this five times each for player cards and enemy cards instead of instantiating the same card I actually want to instantiate them randomly from from the cards list so in here I'm going to replace card one with cards and then a random dock range basically the index is going to be ran a random range and that range is going to be between zero and card stock count and I'll save that I'm just going to copy that and replace the card to down here with that as well okay so what does this mean this means I in the cards list I want to select a random index a random number within that that list and that should be that the range of that will be between zero and the number of things in that list and once I have selected a random number then I want to which could be one or it could be could be card one or could be card two then I want to instantiate one of those and I do that for both my player card and my enemy card that means that now when I click play and I click draw cards I get a random assortment in both in my hand and also in the opponent's hand so that tells me that I've done my work correctly here and I've instantiated these cards correctly all right so now we're gonna deal with the dragging and dropping of our cards which is where things might get a little bit hairy I've done extensive research to research to figure out the best way of doing this for a 2d card game and there are many different ways of doing this and a lot of different scripts and methods that will show you ways of doing this this is the most elegant way that I've found and the simplest way so it may seem a little bit complex but it for me at least it is a bit more straightforward than what you'll find out there you can even download a template from I think it's on the unity essentials I don't know exactly like what it's meant to tell you but it's it's let's just say that it's super complex the way that they handle drag and drop from like an official unity perspective it certainly was more than I needed for the the types of card games and prototypes that I'm making so I mean it's worth downloading from the asset store and seeing what you know where it takes you and whether or not it informs how you want to do your drag-and-drop but for me it was just a it was just too much for for my purposes so this is this is one way of doing it and just keep in mind that there are many ways of doing it this is the easiest one that I found so I'm just going to stop the game for now and what we need to think about is what we want this to look like well I need to attach a script to my cards that allows me allows the computer to detect when I click on one and then when I drag it and then when I drop it and I want certain behaviors to happen when I do those things so the first thing that I'm gonna do is I'm gonna go to my my card let's say card one and again this is why it's easier to just like if all your cards are gonna have drag and drop we'll create your prefab from just this one base card that does everything you wanted to do and then you can change things later on because right now I'll have to do this for well I'll have to attach the the same script to two different cards but you know that's fine I'm going to add a component a new script and I'm gonna call it drag drop pretty straightforward and then I'll go into my assets folder and drag and drop this into my scripts folder and then I'll open this and you will recall that we have this start and update methods that are already here actually in this one I don't need the start method but I will use the update method to detect user input and I'm just going to start simple and create a private boolean which can be true or false and it's gonna be called is dragging and I'm gonna make that false to start with because the card is not being dragged anywhere and then the next thing I'm going to do is create under the update method I'm going to create a public void well that doesn't look like public at all public void start drag and I'm gonna do something funny I'm gonna say start position equals transform dot position and I get this squiggly line here which I'd like you to see because it it will tell you that the name start position does not exist in the current context that just means that well you haven't told me what start position is so like what what am I supposed to do with that information so I what I need to do up here before the rest of my code I need to declare a private vector to variable called start position and then Visual Studio will be happy we'll talk about why I'm doing this in just a moment but also under the start drag function or method I will call I will say that is dragging equals true okay so that's that's basically gonna be the basis of saying that like alright when we have when we call this start drag method we want the start position this new variable or vector to to be to be equal to the transform position again like I said we'll talk about that in a moment and we want to change the boolean is dragging to true in the update method meaning when it which is called once per frame which for our purposes is basically all the time we want to say that if is dragging which is shorthand for saying if is dragging is true transform position should be equal to a new vector to and vector2 takes two values in X and a y-coordinate we want that to be equal to infamous position dot X and the y will be input Mouse position dot y save it okay so that just means that every frame I want the computer to check if is dragging is is true and is dragging is true when this start drag method is called and if is dragging is true I want the transform position and remember the transformed opposition or just saying transform it references the object or the transform of the object which is which this script is attached to so right now this script is attached to card one so I want I'm essentially telling unity through visual studio that the transform position of the card or card one I want to change that to a new vector two which is equal to my mouse position that's a long way of saying hey if is dragging is true move the position of this object to wherever my mouse is wherever the pointer is and then I'm going to declare a public void and drag and I'm going to say is dragging equals false and just leave it at that for now we'll come back to this ok so what I now need to do is go into my editor and I'll click on card one I have this drag drop script and I don't see anywhere that I can actually apply any of the stuff that I just did so I need to do what I need to do is add an event trigger event trigger okay and you'll see that it adds this little component and we can add a new event type and we want to add to event types one is begin drag and the other one is end drag and that that essentially says when I when unity detects that I'm beginning to drag this object I should do this and when I end ragging this object I should do this other thing so the list as list is empty so I'm going to add something like we did with the button I need to drag this card one game object over to this field onto itself essentially and then I will select the drag drop script which is attached to it and I will click start drag which is this method that we declared and then for the end drag I will add to this list by dragging the same game object over to it and I will select the drag drop script and I will use the end drag function I guess you could call this begin draggin end drag or whatever you like but now these the script that is attached to this game object has been dragged onto itself so that we can access the methods that were we need to use and now when I click Play I'll draw cards and this follows me around which is pretty cool when I so what you can't really see as I'm clicking I'm beginning to drag when I drag it follows my mouse pointer and then when I let it go when I let it drop then it or I let go of the mouse pointer it stops dragging which is awesome there's a little bit of tinkering that needs to be done with the the hierarchy of how these things are displayed because as you can see when I drag this it goes under the draw cards button and it goes under the enemy area that's beyond the scope of this video I'll give you an idea have to do how to do that with our drop zone that we're about to to use but suffice it to say that the script that we're using allows me to click drag an object on the canvas and then drop it and then it it recognizes what I'm supposed to do which is great there's one missing missing component here which is where things get a little bit hairy is that right now I'm able to just drag and like drop stuff anywhere but you might have a different purpose in your card game you might say that like well once they actually drop something they shouldn't be able to pick it up again they should have a drop zone where they can drop their cards in the middle of the screen and then once they do that they're not able to pick them up again so we're gonna create that now we're going to go back and to this player area and we're gonna do the same thing we did before to create the enemy area and we're going to call this drop zone and we're gonna drag it up here like right in the middle of the screen just like that well change its color to let's make the ugliest thing that's ugliest game that we can we'll change it to this like banana yellow sort of thing and then as you can see it's covered the button so I'm gonna drag the button lower than the drop zone and that will when you do that in the hierarchy it'll appear in this way okay and then we already have a grid layout here we already have all the you know other things that we need the only thing that we we've done here is to to change the color and as you can see is the the color is not bolded which means this is different from the prefab because the unity thinks that we're using the same prefab as the the player area we've just changed the name of it in the color and I could override that but I don't really want to do that here because I want to create a different prefab from this so I'm going to drag this back onto the project tab and it says would you like to create a new original prefab or a variant of this prefab and I say no this is a new thing I want to create an original prefab so then now I have a drop zone prefab okay and then let's just say that there there are ways to let unity know that when I drag a card around the screen I shouldn't be able to drop it just anywhere I should only be able to drop it in a drop zone and I want that drop zone to be this thing right here there are many ways to do that and we're going to use one way which is by using colliders which just barely dips our toe into our toes into the 2d physics system of unity but we're really not going to do very much in it but the first thing that I'm gonna do is I'm gonna fix my script so that it says everything that I need before working with the editor so I'm gonna go back to my script and you'll just have to take a little bit of this at my word until you see it in action so we're going to create another private boolean called is over drop zone and make that equal to false and then we're gonna create a private game object drop zone okay so just basically preparing our code for for for later and then we're gonna go to our end drag function we're gonna change this script to say actually I want to leave is dragging up the up at the top here we're gonna go below this this line of code and we're gonna say if is over drop zone which is that boolean which is currently false transform dot set parent drop zone dot transform and false and if not else transform dot position equals start position and now all is right with the world because we're using this start position so if we look back at this earlier code we're saying that that when we start dragging something we want to log this start position we want to say wherever the the card started that wherever it's transform position is we want to store that into this start position variable and then when we end drag we're saying that if it's over as op drop zone change change its transform to set it as a child of the whatever the drop zone is and if it's not over that drop zone well return it to the start position this one that we logged up here we're essentially saying that if you if we're not over a drop zone just return it where it where it came from because we don't want it to be able to be dropped anywhere else now we need to go back to the editor to add a few things a few components to our through our cards into our drop zone the first thing we have to add to our and you might scratch your head at this as I did as well but this is just the way that it works there might be a better way of doing this but for me this has just been the the way to make it work the with the behavior that I want it to I'm gonna do a few things I'm gonna add a component here and remember I'm on the card one prefab here I'm gonna add a box Collider 2d and I'm gonna add a rigidbody 2d if you've worked with the Unity physics system at all you'll be familiar with these two components but a box Collider basically allows me to allows unity to detect when there's a collision between two objects and a rigidbody allows us to apply physic to those object physics to those objects so the first thing that I'm gonna do here and again I've done a little bit of work behind the scenes to get all this stuff right is that I'm gonna double click on this this card one prefab and I'm gonna click on the Edit Collider and you can't really see it but there's this like tiny like little button here that I can like drag-and-drop and usually I'll do it wrong so you can see like I'm dragging this thing and then it goes back to just selecting the object it's just a little bit finicky so what I'm gonna do is I'm going to set the size of this to something more acceptable which is essentially 120 by 177 the same size of my game object it is not in the right place so I'm gonna change the offset to 0-0 and then if I click on edit Collider again you'll see that it's right exactly match with the size of my game object essentially we're we're telling unity the the shape of the collider is exactly the same as my game object and then I'll go back down to this rigidbody component and everything's are right here I want to keep this as the body type dynamic there's no material for it it is simulated I'm gonna set the mass to 1 as it is I want there to be no linear drag or angular drag I don't want it to operate using gravity collision detection should be continuous sleeping mode is OK for it to start awake no interpolation and I need to add some constraints here that sometimes when you're working with unity it'll do weird things like your card will start to rotate or start sliding off the screen or whatever we want to prevent that so we're just going to click on constraints and then freeze freeze the positions in X Y & Z basically saying just leave the thing where it is I don't want you to mess with it and then I click Save I save my scene and if you if you're stuck in this prefab menu which we got to by double clicking on card one you can just find this little air back here in the hierarchy and click on it and you'll go back to your your game scene and I click on my card one and all that stuff still lives here now I need to click on my drop zone I can click on the drop zone prefab and I need to add I don't need to read your body here what I do need is a box Collider 2d and I'll double click on this one again and I'll click Edit Collider first I want to I want to see how what the size of the this thing is it seems that it's a hunt 15:01 by one 94.5 so I'll hit edit Collider actually I don't need to do that I just click 1501 by one 94.5 then I don't have to drag and drop anything if I click Edit Collider here you'll see that it's exactly the size of my my drop zone and then I can I don't need to edit this anymore I'll go back just to see my my full scene and I'll click play look I'll pause I'll click play and now I hit draw cards and then well I have a bunch of red cards here which I haven't added my drag drop script there if I drag my my green one here around and then drop it well nothing happens and why is that well we'll see I haven't done anything in my script to say what should happen when when the collision happens so I go back to my script and it may seem like we're doubling back on a few things and and you'll find yourself doing that because a lot of times in unity you not only have to work something out in the editor but you have to connect the dots in the in the script that's attached to the object or vice versa so now what we need to do is under the update method we're going to add a private void on collision enter 2d and that will Auto populate as taking the parameters collision 2d collision this is just the sin text that unity uses with this built-in function of on collision enter 2d this simply means when when there's a collision a 2d collision between this object and another another one it's there's going to be a a collision 2d and unity is calling it simply collision you could you could change that name to anything you like we're gonna say is right now there's only there's only two things this can really collide with it could collide with another card I suppose but right now it can only collide with the a card which of the script is attached to it can only collide with the dropzone so we're going to say when this collision happens is over drop zone equals true and the drop zone this this game object that we just declared over up here is equal to the collision game object so when there's a collision between this card and the drop zone and that's what this collision is called we're gonna set is over drop zone to true I'm going to say that this drop zone variable we're going to make it equal to whatever game object is involved on the other side of that this collision which we know is the game up is the the drop zone and then after but you know we want we want to make sure that if we drag over the drop zone and then we missed the drop zone or we decide you know I don't want to place that card down I want to I want to choose another card that means that I take the card away from the drop zone I'm gonna say private Floyd on collision exit 2d and then we have the same syntax here is over drop zone is false and this drop zone variable well it started out as null and I want it to stay no so that's that so now when I click play and I hit draw cards well now I've got a bunch of green cards here again we're having a little bit of trouble with this this drop zone here that it's appearing behind it but when I when I drop it on the drop zone it drops right in the middle right there at the beginning of the the grid and then if I drop another one well nothing's happening because I did it wrong so the the more that I do this the more that I see that there are little little things that are not working for me and we're going to take a look at exactly why right now what's happening here is that I've got a mildly functioning game where I can drag half of the cards the green cards onto this drop zone but I can't drag the red cards because I haven't attached the right script and it's sort of working where I'm dropping this on the drop zone but it's also seeming to be buggy in some ways and there's a couple of reasons for this the first one is is is pretty easy to to fix actually both are more easy to fix the first one is that my player area as you'll see here is higher in the hierarchy than my drop zone so I'm going to drag the drop zone above the player the player area and the enemy area so now when I draw cards it appears above the the drop zone just like that and that's working a lot better but I run into a problem here when I accidentally drag and drop over another card it doesn't seem to work properly or now these two cards are attached to one another it just it kind of messes up and that has to do with the the collision layers that exist in the game so let's clean this up a little bit first of all I'm gonna go to my my card card too and I'm going to add a component I'm going to add this script I can actually just drag and drop this this scrip drag drop here and then I'm gonna add a component which is the event trigger and again this is why you want to do this all beforehand with just one base game object or prefab so you don't have to do this on drew times and I'll add a new event type called begin drag I'll add a new event type called and drag I'll add things to that list I'll drag this prefab the card - - there so that I can access the script that's attached to it I'll go to my drag drop script I'll add start drag and I'll add and drag okay and then what else will be missing we're missing the box Collider 2d which we want to set the size to be the same as this one which is 120 by 177 we're gonna add the rigidbody 2d basically doing the same thing duplicating what we did before we want it to have zero drag zero gravity scale we want it to be continuous we want to freeze these positions okay and then for both of these we want to create a new layer which is called cards and the way that we do this is we go to a card we go to our card prefab we go up to this this area right here under layer and we just we just created it by saying add layer but now I'm going to add this two cards and then I'm gonna go to the edit project settings and under physics 2d I see this matrix here which this layer collision matrix would say is like well what should collide with what and if I look at cards I'm saying I don't want cards to collide with cards I actually want them to be too to not collide with each other so I don't want unity to detect collisions between these cards and give me an issue and now when I hit click when I click play and I click draw cards I have a bunch of these randomized cards here I can drag one here to the to the drop zone it drops right there I can drag a red card here and it doesn't work so let's figure out why that is if I go back to this card to that I where I created that layer I didn't actually assign it to that layer so then now that I've assigned it to that layer it should not collide with the other cards that are in the scene so I click play I click draw cards I get a bunch of random cards I drag and drop to the to the drop zone and you noticed that there the cards are now above the drop zone I can keep keep dropping and look I'll collide as much as I want but it the cards don't collide with one another and I do this a couple more times so now I'm just playing cards naturally as you would if you were playing a card game so there's a few things outstanding that you might want to tinker with and see if you can make them even better than this but by and large now we have a fully functioning base 2d card game where I can I have a player area I have an enemy area I have a drop zone I have a way to draw cards and a script that's attached to this to randomize the cards as they appear on screen I can drag these cards and drop them wherever I like and if I if I don't drop them over a drop zone they return back to their starting area and yeah I should mention that this is this is like a single player version of the card game so we're not like adding networking support or allowing players to see their own hands but not see other player's hands but the structure is there there's still a few outstanding things like if you wanted to add a rounded edges to these cards if you wanted to add images to these cards or if you wanted to make it so that I can't actually bring them over to your your hand area so that because they're behind your hand area right now or you or you know other functionality or you only want people to be able to play one card at a time like there's a lot of different things you could do with this so I leave that up to you to make it better and more awesome and definitely look better than this version of the game but hopefully this is helpful to you in your creation of a 2d card game in unity and also just gaining experience with the scripting community and checking out the canvas layers and some of the 2d features thanks so much for watching my video I hope you found it helpful if so please like it and subscribe to my channel and check out my books and we'll see you soon [Music]

Channel: M. S. Farzan

Views: 104,218

Keywords: coding, programming, learn to code, javascript, python, c#, c++, game development, html, css, 2d games, 3d games, learn programming, beginner coding, coding tutorial, entromancy, m s farzan, 2d game engine, react, unity, godot engine, game maker 2, construct 3, phaser 3, 2d game framework, what 2d game engine should I use, unity 2d, unity 3d, card game, tcg, ccg, trading card game, collectible card game

Id: 0-dUB52eEMk

Length: 70min 25sec (4225 seconds)

Published: Mon Dec 16 2019