Godot Card Game Tutorial: Part 1 - Setting up Card Template

hi and welcome to part one on the designer guard game design a card game tutorial using your dough so in this part we're going to set up the basic card formats first things first based on any project we have a pretty clear idea of what you want to do so I made a quick mock-up in PowerPoint and here you get the basic idea or well what he looks like some sort of basic battle map slots for cars to go and cars with this kind of format when each card you've got a name cost whether it's mill your range any special text attack and defense and how much health it has okay and again as it goes on these cars bows to snap into place in terms of layout of things really important that when you go for your layout of your cards you make it as clear as you can as best I can think of this is probably they didn't slay the spire so if we look at that you can see that when you start a battle aspire your cars brought really nicely from the draw pile and also if you notice they kind of arranged in like a little arc so the ones if you're holding those cars in your hands and as you can see you see you put your mouse over them they immediately zoom up and any relevant text isn't highlighting for you and it's realize that the cars will push aside so you can see the card that you want and of course any card you drag up it's really obvious when you can play it it targets pretty nicely and it makes it really a game to play so with this game even if we knew nothing about the rules to run ahead of the game we kind of get started and basically met around with it probably died pretty quickly but at least you have somewhere to start off with so we're gonna aim that kind of layout for a basic project when we quite as flashy I'll have some of the basic things go my Tommy finished his first section in terms of cars grown quite nicely in car zooming in we hover over them versus first will you do any of that we need to get our basic Carter top before you can go into that I'd explain what we start off with you there is a black thing the only thing of importance so far is assets some background some cards some more background stuff and a basic font type all this I'll give a link to in the description most important things I've got my cards split into card data units and cars not events and thanks to W tactics with me the green like to use some of that artwork for this tutorial most important thing to look with right now is this card database so databases or the database basically works a way to store all the information on each unit go for it really quickly this enon basically enumerates these things so if I look at item number 0 in my foot man that's my first second third and so on and so forth I've been ripped at the top just remind myself how I'm gonna store each data so let's look at unit info for now every unit info will say what type it is so they're gonna be units obviously their attack value their Italian value the health their cost their name whoever then may be arranged and then any special relevant text which is written right at the end well the really important thing then you may have noticed is that every single unit the name here matches to the name of the file down here that means if I plug in this information good ol have everything needs to import this picture so there's even a lot of hard work I just create one basic card template and then your dog with the rest of work for you ok so let's get started with that I am gonna create a new scene and I'm gonna have the route being a margin container these are based just nice little boxes we can use this make up quite a lot I'm going to call that will say card base with the base of all the cards and let's say that I want to put a new folder we're gonna call it cards I'm gonna save it there ok so I some there if I need it I'll also attach them script you sound a bit and first things first automation my card size is why I want this margin to grab spent my entire card so go to rectangle and the rough size for a card is 255 350 I also want the center all this all across here to be in a center sort of pivot my offset so I'm gonna half both these values to give me 1 T 5 and 175 that means if I scale up they'll fill it from the middle of the card which makes a few things a bit easier later on next we need to get a car looking right so first things first I'm going to look at another stuff I need in order to get my card database low we didn't get it used okay so up here my variables I'm gonna have a non read eval Tracy loads of as soon as you can I'm gonna call that to my card database and for that I just wanna preload my card database mileage it down here so I need to hopefully there for me right at the bottom is my card database so I'll load up all my cards I'm also gonna say now what card I want long as we call to my higher function just get things working I'm gonna say the card on a call we're decision girl got my first okay and then the next thing I need to do is is load up that info for just a foot man from my card database so another on ready bar info I want to go to my card database if we look at my card database we want to look at the data and then I want to tell it to get that card by the name of footman the way I do that is square brackets for an array want to go to the card database itself and we want to get whatever the card name is so if I just run this now I'm sure that's actually working it's my ready function I'm just gonna print my card info and I feel it's really quick you run that you can see the bottom here it's given information that I need to say that I've loaded up a footman okay now I'm going to add some notes I'm gonna add a couple of sprites right so top one is gonna be the card itself other one is gonna be the board around the outside of cars important to know with these flight notes is always draws on one at the bottom on top any ones that higher up so the board to be drawn on top of the card with the border that's very sweet for words so drag in the texture color border and I don't want it centered now looking at my card base these two don't quite match up so first thing I'm gonna do is look at stretching this so that it's gonna fit in okay i we could have this manually I could alter the scale until it fits Russian do it in code just go change the border later on I both skip they're all ready to go so into here I want to add a bear that is going to be the card size and for that we would have it in card base so I'm just gonna call rectangle size okay if you're not sure that comes from if you look in card base in the inspector size over here before over it Torian is called Rex eyes okay so this would be the car size that give us the vector of how big it is I wanna see now is just scaler up I'm going to get my no daughter and I'm going to change the scale and I'm gonna times it by so x equals x itself by I'm going to times it by the cutter that wanted to be I'm going to divide it by the current size it's going to times it by cart ice and I'm gonna divide it by the current size of this texture here it depends what text of this is so I've got a call this texture file here so I need to divide it by get my border node for the text John I think it's just text just sighs - against ISIL now if I run that that should automatically scale up my border that's list the right size but anyway but it might be hard to see yeah I feel it's working on those kind of hard to tell we are now gonna load up the card image so if you've noticed I included what unit this wasn't recorded units rather than unit the reason for that was I wanted to match my folder name okay so what I'm gonna do now I'm gonna load up the image of that card so in order to do that I'm gonna have another on ready bar and that is basically going to contain the info for my card image location we'll call it card image for now my only change later on all I'm going to do that is I'm gonna write the path where it is that's gonna be a string so let's look we're going to be starts off in my directory next it is in my assets folder next it is in cards now I've got an option it cannot be events or units and I want to tell it to call it based upon what this card info is so I look here the first thing in my card info Tommy with units the way strings work you can just string no pun intended a bunch of stuff together and it will all basically join it together let's see what's next in the path after that I will want to backslash so let's put that in my string and then after that I want to call its name and its name here is footman that's just gonna be the card name itself so the way Mike the way my code works is the name here isn't always the same as a name here because when I've spilled in his pictures I've often just kept them with one single word and lastly we need to finish that off and he noticed all my files are dot PNG so kind of helps if you've got a uniform while storing system so last minute add dot PNG together so doesn't look like a bit of a mess but it's gonna join all that stuff together check is working if I just want it in print again so it's nice but a test using a print function yeah looking down here we've got the perfect direct your name to call that form an image so now we can load that image as a picture putting fish on the ready function okay so I'm gonna say that if I call my car function and pictures no surprise always with textures but that all I wanted to do is load up my card image then load the car image and put it in there if you've run this now record look horrendous come to my sizing Jett yep what we can do resh wanna skated the exact same way I've scaled my border so Carl scales maybe this I want to divide about a card size if you run that now still it working enough because I have not offset it I'll have my services so cancel offset so now if we change the images that bit cold water might make move the border and the card look in the same size next we need to do if I go back to my sort of PowerPoint really rubbish template we're gonna add in all this information here and that's gonna do now quite as look at the articles a bit clearer you can kind of see it's neatly divided into bars so she got this top bar which has his name and its cost then a gap then another bar takes information down here and then a final bar kind of this information here we can use that same thing and get dough so up to my card base I'm gonna add a child and that is gonna be in vertical bars or B box container there we go oh just a bit short if I've been later on first things first I want to add a little gap at the top so I need to add another margin container and I'm gonna go to the rectangle mint size I'm going to say for now let's have a 25 gap so that gap would be left completely blank I'm gonna call that top gap just it's really obvious to know what's going on next underneath these an elitist top gap I want to add some horizontal bars so I can fit the name and also the cost over here so go back to my father a child and it's gonna be a hate box so space sounds for horizontal bars in a row we can just call that the top bar for first things first I need type of a marquee obtainer just because I don't want it to start right at this point here I don't leave a little gap so rectangle mean size will call it 25 again that means we can only start drawing from this point onwards well just a little left gap it again keeping me who really clear why I'm doing back top bar now we're gonna add the first name so this is another margin container a lot of money thinners here that is gonna be the name I want my name for background behind it so I'm going to add a child node and that is gonna be a nine patch of rectangle okay there's a basically a scalable texture I'm gonna chuck a background shader into that texture so automatic all that no matter how big it is next in my name I need to add some more suppose you give it a size I'm now gonna add a center container which I think will work and for that I'm gonna add a label to label my basic text and if I pull this foot man yeah you can see that our nine patch rect has drawn behind that a little border to it however that text is really small changing the font you have to do this bit of a pest custom fonts new dynamic fonts so that you then do something weird with it there we go go down to font font data new font date no load on data go into my assets font this one here okay so that's a bit bigger I can make it smaller if I need to and I've got a tiny bit smaller also looking at that this rectangle is really strict on to it so I might at some point had a few more martins to this I'll leave it like that for now just nothing too long and this and that is his name the advantage of doing it this way is that if I then import Archer I can just change the name to Archer will automatically wrong we have to go through all these steps again I want the cost over here so I need to add you can guess it ain't about the margin container just to be my mid gap I'm gonna let this be as big as it wants to be in order to fill any empty space so I think it's got the size flags you want horizontally you want it to expand your it means big as it can be remember the card base goes to here we made a situation this this board up here that's my middle gap now on to squeeze the cost over here and then in the little gap over here so it's not be pushing right to the right so I don't want to add the cost look that's not too bad because that's basically the exact same thing we did for the name so we just duplicate this we have name - this is gonna be the cost bring that down put it below middle gap and I wanted to have a cost of one so if I go to my label one al-qaeda named a cost okay again let's write the right hand side we don't want just look at a left gap we want to be right hand side gap again so back to my top bar last margin container and this is gonna be my right gap and I went out to a minimum size so rec time in size away from 25 so it's dick about for them so if I run that now you can see if now I've got the text and the cost right now you might with all sizes and font size this and any sort of them kind of parenting to these things in the bits right now we'll keep that that's my top bar done after the top bar we then had a gap so we add of course we do in large container we call it a mid gap and in rec snow in size flags we want to be the bigger than want to be so vertical I wanted to expand so that'll take all the space in wanting now we want to fit in the sort of text that goes in the middle copy all of this put it underneath my middle gap and this will be special text it's always say where there's many arranged or anything else special about it I can delete all the costs so nothing over there I've also to leave the right gap because the middle gap will take care of it for me and in this case sort of name will put down no pull it tight and the footman's type is Mellie because he's hand to handle not arranged so we're getting there we're pretty much done all we need to do I think I want another gap there I'm basically wasn't sort of a smaller gap underneath it that's going to be a thick size so we have another margin container I'll put it lower gap I don't say always will have a gap of at least we'll say 40 this time on the white so it's pushing many up and now underneath that last way to do with a top bar we know how to duplicate that shrink that down drag it to the bottom that is going to be the bottom bar so here we're going to tall the let's go back to our PowerPoint attack retaliation and health so here so named we have attack retaliation as call it attack I'll call this a and our photography nation and the footman is one of each cost cost as the health hell and the footman's health is too and lastly if I run that that doesn't quite look right because this stuff here is right at the bottom so just so we had a little lower GAC here on another gap underneath it so keep the Kate it right the end okay donut quite big we'll just have a min size of 30 again with no tweet later on if we need to unless see how that's looking so yeah that'll do I think my text is a bit smaller a couple of spaces I might push this up later but for the rough idea that should be everything we need to do I'm just going to do one more thing so if I go back to my base and I say rather than a footman it isn't Archer and I rerun it so for the only thing that's changing is the image all this text is staying the same what we don't really want you wanted to be able to update all that text Boris I'm going to do all of that in this ready function so let's just remind ourselves what card info we get the wooden again time to put the card info hmm and this is my Archer what you want to do now is import all your information attack-defense cost etc into these Bart already gone that company just filled with the footmen stuff right now we do that all in the ready function so let's get a list of bears what everything is so if I go back to my card database and so everything was what it was so first to our attacker retaliation that's Mike to my one so their attack is gonna be hard info one okay and also any of that has a string want to call that a string card into one just so displays as a text rather than just a number the number two sorry in this case same thing for my retaliation to this three refers to its health poor here hence the refers to the cost and lastly five is big seating so fiver says Archer so I 0 1 2 3 4 5 that's right and 6 is ranged and the mutilation those things combined together that's what called a special text social the best special text and that is gonna be 6th we don't need to call the name again because that's already called life the starts missing knowing that one we're going to do now is when I go into these bars and we're gonna say everything up according to what it is whose duty to deep dive down these note paths to work out what I want so first things first I'm gonna get the name sorted out okay that names would've anything up here can't name so get node bars I want to go to my top bar I then want my name sent a nickname that won't quite do it if I go into that you'll see that all the label stuff is stored under text so back in my code I need a dot text that was my pardoning my mission to do this another I think it's four times two three so next I've done the name I need to get the cost that was the exact same it's a cost as written twice cost is cost at least we'd just left with attacker metalli ation this one study awkward because it is two things combined together we can handle that absolute you find just by using these strengths which we used earlier to get this card image working so that text it's gonna equal strength or first I want the attack comma and then just want a slash key I'm doing it wrong because that attack should not be in - there's already a strength but this - should be and retaliation so that should be it and think it's upset because I can't have a NR as an expression like a and our theater sort it out yeah it seems happy let's run that and see if that's working so she now it's give me all my arced information and it does so it's called an archer cost - its ranged immune to retaliation attack - Italian one and has health of three and now that'll work ever card name we go in here first do one more example that's for the mentorian see if that's working all right yeah the mental costume there's the text washing this hotel that at some points putting that for now and that's attack defense and health so we'll leave it there for part one with a basic card if I'm running and next in part two we'll start our overall play space where we can sort call these cards into a play space and have an actual hand of cards okay so I see them

Channel: Adventures in Godot

Views: 19,623

Keywords:

Id: WjT5sLMD7Kw

Length: 27min 53sec (1673 seconds)

Published: Sat May 09 2020