Godot Card Game Tutorial: Part 2 - Player's Hand and Drawing Cards

hi and welcome to part 2 on the designer card game tutorial before we get started I changed a couple of things on the end of part 1 and I changed my name was defined just because some of my units I did make the name just one string and got any spaces so I'm just easy coding why he's sort of a difference but I did it anyway gonna have to redefine a name also out of a couple events which might place one in this tutorial and I've reloaded all these images using lower quality files just occasionally during do you want to tell her to yourself make it a fast lifetime for you okay let's get started now the end of part 1 we had fathers layout done had loads of mess with my two containers re Nuggets so we can load up any card fairly well very well I say to give us our unit set up what we're going to do today is says my play a hand so you have a certain amount of cards and also set like a play space but you can then draw those cards into first I'm going to start with a player hand just looking through it all is I want a constant of card lists and then I've just got five cards there but for now one of your cards I'm gonna draw it from these list of five possible you want me to the card base much anymore at all and we are now going to start a new scene and I'm gonna call that my play space basically any allowed your cards that's been going there let's save that will keep our root directory I'm gonna use it quite a lot it's always had a child node I'm going to add a blank node and I'm gonna call this cards so basically any way anytime I want to create cards they'll be created as children's of this node here just as I set for an easy to find one I'm here I'm as well add a sprite and I'm gonna have a quick background you know is is now it's just I get bored of having this horrible great space the entire time let's have a nice bright terrible background just some sort of brightness base with it that'll do that'll be okay into our play space let's attach some script and let's get started so first wanted to I've got a cup of things I want to load and it is gonna be my card base scene from part one and the player hands that I just wrote over here so let's do that those bogus constants on a consulate card base preload always gonna preload just it can save rendering times if you're not loading the same thing loads and loads of times and so card base is here so it's in my directory down in the cards folder and it is caught card base with a capital B yep doctor TSE and the scene orogeny then the exact same thing or my player hand and that's in the same directory and it could play a hand with an underscore between it to wrong extension there like should be job BD so let's see what we can do with this so so far we load in these cards let's see we actually get something that's baby who actually won so I'm gonna jump straight into the Delta function actually not I'm going to write an input event I'm gonna have an input function I'm going to say if we click the left mouse button we then want to create a card so today's need to go project called accepting input map out of the bottom left click which is my left button so whenever I release the left mouse button we'll have let go of it I'm going to spawn a card listen how we're going to do that first things first I'm gonna out of there and that's going to be new card and I want to instance my card base it's gonna be a card base so instant just basically means make a copy of it but all the copies can be slightly different next let's decide what Harvey wants so just to start off with I want to pick as carton a member if we go back to our card base that card name basically to find everything to find where we loaded it what we loaded it at what information at hat so here we'll just load a footman took quite a lot of them and let's give a position keep doing this Polly on the downside of me using a margin container for my face is that position is actually stored as a record position so make sure where that I understand what the spawn area right now I was gonna say wherever the mouse is it can spawn right there and last thing like I said I want to add it's a child of the card node main leaders are you want to always know where the argues with Lou someone to all my cards and also cell to know how many cars have been play I mean just count how many children of got this have note here so videos help our two separate the aspects of your gaming separate nodes add child and the child is you can't okay let's see if that worked so let's run this and if I left click yep that is falling the footman so it's a malt exporting here just uncommon that now if it's my card base somewhere yeah regarding folks it was common that he was a later on first I noticed was those units were massive okay so over here I'm gonna create a new card size and we're saying right now we'll just have them as half the current size the 125.75 does mean in here I want to scale them according blacks rectangular scale this load last time you want to times it by the sighting one tucupi now we want to divide it by the size it currently is I think I direct sighs yeah okay so if you run that that has fixed size problems we've got us like officer issue but I'll fix that later on so we can now spawn basic cards next time pretty handy to do is if we could spawn cards from my play hand for my list of five cards so to do that when I create a card here I want it to be based upon just a random card from this list here so we can get that straight away very easily okay we're going to create a chair lift out of what heart elect I have blank for now and I'm also gonna create a new there which is getting my deck size this I can actually call now that would just be sorry if I go play a handbook card list that will give me this list here these five things and I want the size of that so if I could play a hand or card list dot size that will give me how big my deck is how many cards a minute back because it's must one after I loaded it this has been already Val we can stop it progress now I'm going to call castle X down here I just want a random number going up to my deck size so for random numbers we do that just using the round i I've into a whole number and we want that to be in the range of my deck size so now let's collect a random number anywhere from maybe from zero to four so it's nice to start at zero and this and from there we get as Cardinal we want to go to our player hound dot part list again and we want to call the number that we just selected so however unless we should be able to get a random card from our section of five which we do however what's going wrong here is I'm not erasing my cars after I call them so let's work that out now pull into a race a card or all apps think a frappe the trial to it I'm going to say go to my player hands and my card list I want to erase that heart and I want to raise this cart thing here copy this bit of text in here and that should work out our shredded ocean a protocol five cards one two three four and a crush on the fifth card which makes sense because I haven't updated my deck size so happen here is it tried to call like the fourth or fifth card if you count zero as a card but it's building in one card left talking to add on capitals I want this to go down by one after each time I call it okay and that's gonna be the first part to it so right now we can call five cards PI plus exactly upon calling the six we get a division by zero error okay now let's move on I think be a bit nicer if we now add a deck add a child node no 2d I'm going to call that my deck in that one another child and I'm gonna use a texture button so text buttons video for buttons then all see this very nicely magic textured buttons plugins textures whether your texture it's just normal line around there as it precious hovering you're gonna sign different textures to it so we go into our assets yeah but a back texture for now I'm going to copy all of those into normal pressed and hover for disabled on the throwing gold border for now it's basically when there's no cards left I wanted to show this gold border instead to make it really clear that I'm out of cards okay I'm going to call this texture button that war for now just as they the obvious what's going on with this you know attach a bit script and this is gonna do much first thing I do want it to do I want to update its size so be handy is play with a dis script if everything's running from the same size to this we have this code and we hope you used it absolutely turn so far my we skates these skating code is here I think just poppy that cross and let's throw that in the ready function and we are gonna say scale I think it's just scaly this time rather than rect scale notes Mexico still ret scale x equals I wanted to be card size but that is two notes higher so just say get node good one directory up two directors up and that needs to keeping folks to directories up and pull the card size and I want to divide it by my rec size I think yeah so I run that fish in now scale across what's going to move this slightly so let's drop them both now we'll just take it over here for now so when that Dutchman lb the right size yep lovely and I'm gonna add a bit of code in here that's going to draw the card for me instead so to do this we can use a function and we're going to use a GUI input that's the one and we're gonna say just before if you just released the left mouse button is actually just release left look first things first we can only do this if the deck size is greater than zero although decks license isn't pulled yet just make it really quick there and it counts after zero a break it through the other extreme I don't see my initial deck size is infinitely big we're then going to do if we go back to play space we had all this text if I left clicked I'm gonna get rid of that now indented left once and I want to cause a function I'm a toilet a function draw card and then from depth or so from here I want to call that function so get nodes rotation marks I've got two nodes again and I want to call that function okay and we don't need classic variables to that however I need to update the deck site here so I go back to my player space I'm going to tell it to return whatever the deck size coming is late that means index or an out date it so we can now use the if deck size is greater than zero part and to say that deck size equals out lastly I need an extra sleep this has to go after this code I come back in an else or anything so they want additional check to check if the deck size is zero on tothat straight away rather than running another loop of the earth loop and if a deck size is zero I don't want to play this able this true that means it will then make the card image go blank and always be a code along be able to run so let's see if that's working for us one in our play space 1 2 3 4 5 and then it's on black ok and I can't pick it anymore so we're getting there a subclass of absolute awful positioning I see started look quite nice so let's sort of the positions now and that is gonna be all angle here why call rectangular position I was it in part one it's really nice if we have a nice arc of cards if we look at what they did in slay this fire you can kind of sort of see why thing they've done is it kind of all made an oval shape here and then they sort of plot those cards alongside that oval so I'll show you that you're gonna see this back to matches really nicely just so you'll sort of fits perfectly cards and also notice they've basically got a minimum and a maximum I say angle that they can go along in order to do these cards so that's trying to do the same kind of thing now first thing we have to know is how to know if they describe points on an oval I will link now to video my other channel which those are the basics of that doesn't pretty hairy mess and uses stuck with polar coordinates I'll try to bridge it really quickly now in polar coordinates everything's defined as a radius and an angle rather than an x and y coordinates if we were doing a circle for the x coordinate you would have the radius highest right cos of the angle and the y coordinate you would have the radius times pi sine of the angle okay that'll give us a circle again like I said you want an oval the difference with this from oval you basic up two radiuses of radius 1 and radius 2 and was the exact same thing radius one bit of radius along your x axis and radius 2 will be this radius here okay bosun's gonna play around with when we started looking fairly nice let's code some of that stuff first we're gonna need to code three things first things first I want to Center I want to know where all these arrays the center of my oval is wonder where this point here is looking at it it's about halfway along the x-axis and I say about an extra 30% down so we're going to code that in now another I'm ready bar I'm gonna call this sent a car over Pretender cars my ovals I want to call the whole viewport if I change resolution nothing's gonna break from that I want the size of it and I want to change this lighting at times it by vector to I said I wanted halfway to 0 to 5 on the x coordinate and I want as an extra 30% so ties it with 1.2 my Y coordinates so that would be a point specially off my screen I then want a couple of radiuses I'm gonna have a horizontal radius I'm gonna have a vertical radius both of these will comfortably get DuPont stuff for the horizontal radius I just want x coordinates and for the birth grades I just want the y coordinate let's try some rough numbers for these like screen back around I'll say my radius the x coordinates looks beat just under half of the whole way across and it's actually the same for the Y's maybe a bit less than half again let's throw some numbers that we can always change these I'm gonna say I want this to be 45% and I want this to be 40% and I also gonna have a starting angle I want my starting angle to be 90 degrees and for godot whenever this trigonometry it always assumes in radians let's convert from degrees to radians and that's how last 90 degrees that'd be PI by 2 and Godot but so go in here when it gets to this position we are going to change that now so let's comment that for now let's add a perfect position okay we're gonna start from our Center I now want to add on what's gonna base to be the angle vector using these two radiuses so in fact let's try me a fairly clever we'll call that a new variable this is go over angle vector that's going to be a bet - now it's off to plan will appear okay let's just let's define that now so over Langille vector 2 that is going to be the radius ties by the hole the horizontal radius sorry times by possibly angle and then for my Y coordinates I want a vertical radius ties by sine of the angle yep I want to add this on to my new position for saucer Center add the vector I've been last thing we need to do we need to offset it based on this card size here so this new card has a size when it wants to draw it it's going to want draw it from the top left so if I minus this back to here that should then help us offset that mess up of drawing let's see if that's working nowhere to be seen but they have been drawn so let's see what's going wrong oh yes the objets nut so in your doing all code in languages when you make white bigger you go further down on the screen I wanted to go further off the screen here well I needed a minus here hopefully that will fix it yeah there's our card looking about right and happy with him there I like to stretch him up I'm not shifting up actually so rather than 1.3 here this have a 1.25 just be slightly higher yeah that's pretty perfect for now problem is now is if I keep clicking that all the cars go in the exact same position so that's I'm going to do today we're going to add a bit of code that says once you've got an angle down here let's just add on the angle so I don't walk them to radians and we'll just see how that fits yeah let's looking fairly nice we think I'm gonna make a bit bigger actually and we'll tweak it so it starts on this side to get like a nice arc of cards so rather than not point to let's try not four three and I'm gonna minus two dots of apps and wireless nor point six and we'll see how that's looking okay probably on a bit to vlog right now okay that'll do well the students absolutely fine it's just want to do one more thing today if you go back to slow the supplier we can see the card angle slightly based on which side they're on they don't angled much we're going to quickly add that in just looks a bit nicer so what I'm gonna do I'm gonna add a little rotation here so if I go to my card base that's the money to call it that is going to be rotation or rect rotation of course this is one of the reasons why I have to pivot our offsets so any rotation now goes about this center here rather than the top left center he sees rotation about the center which is dropping once again to my place base my place base code a new card got rep rotation let's see how that looks if that just equals angle horrendous and that's because I have got my angle beam and radians and the rotation would have been degrees so let's just do a quick addition made it two degrees oh yeah that just need to be offset by 90 degrees well this should be working there we go that's kind of working however that's 32-bit as far too much tilt okay so that angles far too much so let's just divide the whole thing by four and I should make it a lot less severe should look a bit better there we go happy with that we've got a slight tilt but nothing too severe we will leave it there for this part in part 3 we will add it so they automatically take their space especially you've got one card always going to Center two cars we go side by side and then of the five cars going this way right here I lost quite basic transitions this will move from the depth to that position okay thanks for listening

Channel: Adventures in Godot

Views: 7,318

Keywords:

Id: gUNhn5BJlJ0

Length: 26min 16sec (1576 seconds)

Published: Sun May 10 2020