Godot 3.2: Let's Build Memory! (Part 2)

hello and welcome part two of let's build memory in this two-part mini-series we're creating the card game memory in the godot game engine and if you're not familiar with the card game memory well i've got it here on my screen in fact you can go ahead and play it for yourself at born cg dot it dot io forward slash memory but if you go ahead and try it out you'll see that when you press play on the splash screen well you can now see 52 playing cards face down there is a heads up display at the bottom which is counting up in seconds right now and what i have to do here is flip over two cards at a time and hopefully eventually find a match so if i click on a card it flips over there's a queen and i'll flip over one over here no that's a queen and a two so not a match so they flip back over and i go ahead and try finding two more matching cards no and no that was a jack wasn't it and a jack there we go i found a pair they have grayed out so they count towards my score and once i reach a score of 26 because there's 52 playing cards well i've won the game and i'll see a pop-up window that tells me how many moves it took for me to find all the matching pairs and how many seconds i completed the game in so again you can go ahead and play that for yourself at bournecg.h dot io forward slash memory but more importantly if you have not seen part one of this two-part long-form mini-series well i'll put a link to that video up on the screen right now if you want to go ahead and create this game along with me from start to finish if you would rather just go ahead and download the project the whole folder to follow along with me in this video well i'll put a link to that zip file in the description area below this video on youtube so you can go ahead and download that zip file and then unzip it and then i'll show you what to do in just a moment if you are new to my channel my name is colin hello i'm a high school computer science and digital media teacher and i've been teaching here on youtube primarily both in blender 3d animation software and in the godot game engine for about 11 years or so in total now and i've also been a creative technology summer camp leader and manager for the last 15 years or so so let's go ahead and jump into godot i've got my project folder here i've got godot here on my desktop if i double click on godot it'll open up i don't have any projects in my project manager so i'll go ahead and press this little x here to get the project that you may have downloaded into this godot project manager list i'll go ahead and go into that folder and then there is a dot godot project file right here and if i just go ahead and drag that into my project manager of godot you'll see it'll be listed right here and i can go ahead and double click on it and it'll open up in godot when you launch the godot editor of course you have your list of files down in the file system dock on the left bottom corner and you have scenes we have a game scene if i double click on that well and i pan over you'll see i have my my blank table here we don't have a lot in the game right now because we will generate a deck of 52 playing cards that will be laid out in our grid object here this is a container that will lay the cards out if you select the grid and go over to the inspector you'll see there are 13 columns in this container and if we put 52 items in this grid container there'll be four rows of 13 playing cards each so if i go ahead and now with my game scene open i double clicked on game.tscn and i press the play scene button well i'll have my deck of playing cards up and if i click on a playing card it flips over we have a semi-working game if it finds a pair of cards if i flip over two nines well it'll fade them out and that's about as far as we got if you keep on clicking in this project you'll see that in fact all of the aces are in the first column all of the threes are in the third column they are not shuffled at the end of the last video i teased well we'll start off by making these decks uh or these cards in the deck all shuffled and that's exactly what we'll do now just a reminder that in our project we are creating cards based on a class that's one of the new things we did in the first part of this two-part video tutorial mini-series we made a file called card.gd and if i double-click on that you'll see it'll open up in my script workspace and you can see we use this class name this defines what a card is we're not going to edit this at all in this video the other new thing that we did was we made a game manager which is a singleton which is basically a global file that we can manage our whole game from so i double click on gamemanager.gd it doesn't have anything special in it in terms of that would identify it as a singleton but if we go up to our project settings you'll see that under the auto load tab we have that game manager loaded in so anytime in any code that we say the word game manager we can access anything in this file from any object in our game which is kind of cool if i make this workspace bigger and scroll down to a section called deal deck this is where it takes an array of cards that we've made and we are dealing them out onto the screen what i need to do here is look up how do i shuffle an array we have an array variable up at the top it's called deck go figure if i hold ctrl on my keyboard and i click on a keyword or a word that's part of the td script in this editor if i click on array with the control key held down you'll see that it'll open up the documentation of gdscripts array object or uh data type in ngd script and if i scroll down and of course i can always go back to my game manager code but you now have array uh documentation open you can see there's a little book right there that's open to a page well if i scroll down you will see eventually the word shuffle shuffle is a method built into the array data type in a gd script and we're going to use that where to go shuffles right there if i click on the word shuffle it'll zoom me down to a lower part on the page it says shuffles the array such that the items will have a random order the method uses the global random number generator etc so i'm going to go back to my game manager and i'm going to say right before we deal the deck out we are going to shuffle the array so i'm going to say deck dot and this is in my deal deck function and it's the first thing i'm going to say deck dot shuffle and this is a method call so i need round brackets there and that's it now when i go ahead and press play scene i have my game scene open if i press play scene it'll play my game scene and now if i click on two in the same column they will most likely not be the same value if i go ahead and put a hashtag where i click in that line and i press ctrl k ctrl k makes a hashtag at the beginning of that line or a pound sign uh you can tell i've been talking to teenagers a lot in the last few months in my in real life teaching job a hashtag as a pound symbol and if i press play uh you will see now that that line is commented out it will not count so now if i go ahead and click on two cards in the same column they're the same but i might go ahead and leave it commented out and now if i go and see look at it you know there's a four and a nine and a six and an a so they are shuffled now that's how you shuffle but i'm gonna leave it commented out control k on my keyboard so that it's easier for me to diagnose the game and see if i can find a pair or not okay the first real thing i want to do in this video though is make a heads up display i'm going to close this output dock at the bottom a heads-up display for my game that is that panel at the bottom of my game that has a counter for the number of pairs that i've found it has a clock or a timer in seconds that's always counting up it tells me how many moves i've taken to find or how many cards i've flipped over in the game to find all the pairs so moves means how many pairs flipped and i have a pause button and a reset button on the right hand side when you make a heads up display in lots of games chances are i'm gonna be using that heads up display in many different levels of my game in this game we only have one level it's just the game memory but we're gonna stick with that principle of reusability and make the heads up display that will go down here in a new scene so i'm going to press this plus button to make a new empty scene i'm going to make a new user interface based scene and i'm going to call it i'll double click in its name and type in hud hud which stands for heads up display i'm going to now go ahead and make a panel a panel is an area that you can style so i'm going to select my root note and press plus i'm going to search for panel and there it is i'll double click a panel is this dark gray color by default and you can make it any size that we want but i'm actually going to with it selected go up to this layout menu and select full rect which stands for rectangle which means we're gonna be pinning it to all four corners of the screen and we're doing that to help us later on when we want to be able to change the size of our screen it's a good common practice too it's not called pinning it's called anchoring an object in a user interface object the corners of your screen now i don't want to be the entire screen obviously so i'm going to drag this top pink little handle down what that does is it actually changes a margin property of the panel so what i'm going to do after dragging that middle handle down is select my panel and go over to the properties dock or inspector and i'm gonna go over to the margin settings and you can see here 557 means that this top edge is 550 pixels away from the top i'm going to change that to about 580 if i recall correctly and i'm going to say the left margin is going to be oh 40 and i'll press tab a few times and the right margin will be negative 40 that'll push it to the left by 40. and then bottom i'm going to say negative 40 as well so there's our bottom panel i'm going to go ahead and save this scene now control s to save we'll call it hud.tscn right in our project folder i'll press save and when i go back to my game of course it's not there until we create an instance of that scene so the nice thing about making instances of course is that when you make an instance of one scene in another you can keep working on the original scene and the updates will also propagate out to the scenes where you've instanced that hud scene in this case too so if i go to my game and i select the root node of my game and i press the link button it's important to select the root note first i can select the hud and press open and you can see my hud is now down here okay if i want to get quickly from my game scene into the hud and edit the hud well i can click on this little scene clapboard icon and it'll jump over to this tab here if i have it open already or it'll open it up okay this panel needs to have columns in it in fact it's going to have four columns the rightmost one is going to just be a small little column with two buttons for pause and reset but we're gonna have a score we're gonna have a timer and we're gonna have a moves or pairs flipped which i'm gonna call moves counter so i'm going to add into this panel a container that i'm gonna select the the panel and i'm going to press plus i'm going to call it or search for the word container and what we need to find here is one that's called hbox container because containers like this organize other green user interface elements on the screen an hbox container stacks things from left to right so it makes columns essentially which is what we want so i'm going to select hbox container press create and it's not big enough for sure it needs to stretch the entire size of this panel so i'm going to select the hbox container and i'm going to go to layout and we're going to do the same thing again we're going to say full rect and what that means is it'll expand out as far as it can go to all corners but in this case because the hbox container is a child of the panel well it only goes to the edges of the panel which is nice okay so we have an hbox container and whenever we make a child of this hbox container they will form columns side by side nicely for us hopefully but it turns out that i want things to be stacked one above each other in four columns i want to have a label that says second or score and then below that i want to have another label that is the actual score in a big font and text down here and i want to do the same thing over here in the middle or second column i want to have a small label that says um timer or seconds and then i want to have a big counter of the number of seconds that have passed and so i want to have vertical stacked columns now here so i'm actually going to select my hbox container i'll double click i'm going to call it sections okay that kind of defines what we're making here and then with that uh node selected i'm gonna press plus and i'm going to search for container again this time i'm gonna make a v box which means vertical box container right there so i'll double click on that and you can see it's not taking up much room because it does not have many children or any children right now what i might do though is i'm going to name this section score with a c spelled correctly section score and with that section selected it's a vertical box container so anything we put will get stacked one above each other i'm going to select it and press plus i'm going to add a label which is just a piece of text in a user interface and with that label selected i'm going to type in score and you can see it's right there if i select that label what i want to do is i want to make it stretch out to as much room as it can possibly take up so it's not just tiny that way we can center it in an area so with that label selected i'm going to go down to the property called size flags and i did talk about this in some detail in the last video in part one but if i check before both horizontal and vertical fill and expand you will see that it should expand out to as much room as it can possibly take up i want to make sure this um section score is the same so i'm going to select my section score and go to size flags and do the exact same thing aha okay so you have to remember unlike me to for both the section itself the column that's going to have things stacked vertically to make sure you have fill and expand and fill and expand for both horizontal and vertical for that one and the label there we go for in the size five section of both okay now that i have that i've got a little tiny label here that says score i'm gonna select my section score as well in fact i'm just gonna duplicate this label right click on it duplicate and now i have two labels stacked one above the other i'm gonna put in this label two i'm gonna put two pound signs or hashtags there um and that's because that's where i'm actually gonna say how many uh pairs the player has found now i'm gonna in a moment uh after we've made our columns start styling this and you'll see the text get bigger but just for now i'm going to select that lower label and give it a better name i'm going to call it um score actually because that's where my score is going to actually display and should we make it bigger for now i think we should i'm going to select the score label and i'm going to give it a custom font i'm going to go down to custom font and click next empty and say new dynamic font and when i do that i can click on dynamic font hopefully you've seen this process before it's a little bit finicky when i open up this dynamic font that i've just made i can give it a font i can drag a font in from my assets folder over here by the way if you started this tutorial series off with me you would have gotten a link of downloads including fonts and user interface pictures and all the playing card images as well to follow along with me but i'm going to drag the font nunito bold into the font data section and now you can see this font is now a different style it's bolder and if i change the settings of this font i'm going to change it to about 80 for now it'll get considerably larger maybe i'll even go up to 90 or so okay and maybe with this label i want to set these up as best as i can before i start duplicating this section i'm going to make the score also have a font so i'm going to say custom fonts new dynamic font i'm going to open that up i'm working on my label now which actually just says the word score in it i'm going to go into my font and drag in nunito regular right there and i'm going to make it a little bit bigger in fact i might use bold as well yeah and i might make the settings uh size but bigger maybe i'll make it let's make it 24. there we go now what i probably want to do here is select both of these labels and center them and i believe those properties the center text are up at the top so if i select this top label you can see it aligns left but if i say center it'll align its center if i align it i'm actually going to line this one to the bottom so i have a little bit more space up at the top and i'm going to line this one the same way except i'll center it both align left and right and centered up and down as well okay so i've got this section called section score it looks pretty good to me obviously it doesn't say the numbers in it yet because we're not playing our game and we're not counting uh cards yet but we'll get there i'm gonna say i'll take this section score and right click on it and i'm gonna say duplicate and when i do that of course it makes a copy and you can see because this section for score and this section which is going to be my timer so i'm going to call this section timer uh they are next to each other because they are in a hbox container which puts things side by side okay this label up top this one i'm gonna rename it two seconds and there we go and i'm gonna name this label seconds okay just so we have a different name on this one versus this one let's go and do that again i'm gonna right click on section timer right click duplicate right there this one's gonna be my moves so i'm gonna call it section moves this is for every time a player clicks on two cards that's considered a move so on my label which i'm not gonna bother renaming it because we're not going to access this through code it's just a label for the sake of being a label for the user to see what that's for i'm going to call it pairs i'm going to make my caps lock turned on pairs flipped there we go and i'm going to call this this uh this node moves i'm going to turn off caps lock moves okay does that make sense we're going to do one more section here so i'm going to duplicate section moves right click duplicate this one though i don't want two labels in so i'm going to delete them right click delete nodes okay right click on this one delete nodes here i'm going to put my two buttons it's gonna be my pause button we're gonna learn how to make the game totally pause and be able to be unpaused um and we're gonna make a button for resetting the game so this is gonna be called section buttons and i'm going to select that node and i'm going to press plus we're going to add a button but it's going to be a texture button this is exactly the same kind of a node that all of our cards or playing cards are based on it's called texture button and it's right there notice how my card is right below it we don't want to add another card though we want to add just the normal texture button okay when i do that i need to make sure that i go down to my size flags and turn on expand and expand so i've got fill and expand on for both and that will make that button take up as much room as it can i'm also going to go up to the texture section and open it up and i'm going to go ahead and grab an asset that i've given you it is in the ui folder in your assets folder it's called pause.png it's our pause icon for the pause button this is going to be our pause button so i'm going to drag that in with my texture button selected i'm going to drag it into my normal texture and there it'll be um can i set it to stretch differently yes with a texture button selected one of its first properties is how it'll stretch the the picture that you put in it in this case we're going to say keep aspect centered and i'm going to say expand turn that on you have to turn that on for this to really take effect and there we go we have a button it has a texture in it it doesn't do anything yet but we're going to add another one so i'm going to right click on this texture button up here and say duplicate and this one i'm going to name it button pause and this one i'm going to say button reset so you can gather what that one's going to be with that one selected it's the bottom one because it's the second one i'm going to open up its textures and drag in my return icon by the way i got all of these card images and i believe the play pause and return icons from kenny k e n n e y dot n l uh they have amazing resources there including game sprites including game assets of any type for user interface elements 3d models sounds fonts you name it they sell packs and they give packs and individual sprites and game assets away for free as well but they obviously have some things that you have to pay for but once you get any of their assets i believe you can use them in your game without any licensing at all forever okay they're not a sponsor of this video at all or me at all i just appreciate what they do so there you go so we've got our button reset and our button pause a thing that we haven't done yet is style this heads-up display but just to note if i press ctrl s on my keyboard to save this whole scene if i go back to my game there's the updated heads-up display okay so if i save that as well ctrl s everything is nice and saved my heads-up display needs some styling and one way you can do styling is by creating a theme and if you make a theme well you can actually style a bunch of different user interface elements like fonts and labels and pictures anything that's basically a green element you can style it in one file and then you can reuse that file in different parts of your game so that's what we're going to do i'm going to select my root node of this scene the hud in my hud scene and i'm going to go down to the theme section in the inspector and i'm gonna make a new i'll click on little arrow a new theme when you make a new theme that's what you get you don't get a lot but if i click on that theme you will see this bottom dock pops up and it shows me how everything will look it's kind of a weird way of of having a user interface this is what my default theme is it's the old godot i think it's 202 maybe theme if i'm wrong correct me in that in the comments below it's this purpley theme and as i change things in my theme this the look of this area will change how do i change the look of these things like buttons and the background panel color and anything well i'm going to click on edit theme and there's not a lot of options here the one that you want to select is add class items if you select a different one i'm not going to help you out this is the one that you want add class items if you click on that you can now select it's a not a great interface here i think you can click on the two little dots and you can select the type of thing that you want to create a new style or edit the style of in this case i'm going to style how a panel looks so i'm going to look in alphabetical order for panel there it is i'm going to select it and i'm going to press i don't know why it says add all i'm just going to press at all but it we're just adding a style for panel here that's just one thing so at all and uh well what it did is with this theme expanded out over here you can see now i have this panel section which i can expand out and i can keep expanding and this panel has no style well what i can do i'm going to scroll down so you can see my panel here i'm going to give it a new if i click on the little arrow next to the style panel i'm going to give it a new style box flat and when i do that aha things change or at least the color change and the color change down here if i click on this again i know the user interface is not amazing especially since you have to expand so many things and you don't really know what you're doing in here you can't really do much in here except for test it out and see what things look like down here but everything that you change is a property over here in the inspector once you start making and adding class items into your theme this is kind of like editing a css file if you're not new to web design and you know what a css file looks like where you're defining perhaps classes or you're creating rules with different properties well when we went to edit theme and add class item we basically made a new rule for a specific thing in this panel and now over here in the inspector we're editing it so i'm going to make this have a different background color i'm going to make it a lighter background color i'm also going to change its corner radius so i'm going to type in 20 and 20 and 20 and 20 and i'll press enter you can press tab to go through all of them one by one so there we go um i'm going to add a background uh or a drop shadow so in the shadow section i'm going to change its size to maybe uh well we have to maybe give it an offset as well i'm gonna say uh three and three you can see a little shadow there maybe i'll try five and five there we go and i'm gonna make the color a little bit more transparent i'll turn the alpha channel down there we go okay so i'm fairly happy with that you can also give a theme a default font if i collapse my panel settings here we can give the default font a new dynamic font and i'm going to open that up now and choose a font i'm going to use that nunito bold font that i had before and if i go to my font default font theme settings i can change the color settings no extra spacing no can i change the default font color no because i think that's a property of the individual item unless i'm missing it on the screen right now i think it's not something you can change right here or at least not there's an outline color but i think that would be on a label or something like that in fact that's what i will do here with this theme before i move on is i will add another class item and i'm going to add a i'll click on the two dots i'm going to add a label style and so i'll press add all and now in this section over on the right if i collapse everything else i have in my theme i have not only a panel section i have a label section now so again it's not that obvious if you expand things out you can't really see where things are but here's my label section now if i go to colors you can see now i can edit the font color of all the labels in my heads-up display so i'm going to make that a darker color and now all the text should be that color you'll notice sometimes you change things over here and they don't show up here what you need to do is do a quick control s to save if that doesn't automatically change them if you have another tab open well you can switch over to that scene and then just switch back and then it fixes it i wish that problem didn't exist but i've experienced that a lot in the last uh several months and years that i've been working in ghetto i might make the theme have a slightly lighter font color something like that and again i'll save and then switch back and forth and there we go i'm going to leave this white because i can't easily change that but what i will do is with that section buttons i am going to make that section if i can go to the size flags section yes for this sect this column here i can go down to size flags and i can change the stretch ratio which means i can define how wide this column is compared to the other columns the other three that are making up the sections of my hbox container so under size flags i can just turn this down and i like that a little bit better lastly in this heads up display for now we are going to save that theme so i'll go under theme i gotta select my hud and i'm gonna go to theme and i'm gonna say save because we're about to use it again i'm gonna call it theme that's a good name theme dot t-r-e-s t-r-e-s is like a dough resource i'll click save it's in my project folder great if i go back i'll save control s go back there it is if i press play scene with my game scene active you will see that now i have a heads up display that doesn't look too bad of course it doesn't do anything right now and i can't even click my cards anymore why is that well i have a large heads up display control section in here and even though there's nothing in this larger area this is a part of my control node up here so i believe i need to go to mouse and filter and say ignore and if i'm right about that i'm not sure if it's a pass or not but if i'm right about that i'll do a quick control s to save i'll go back to my game i'll press play scene and now i can click hopefully on my cards and hopefully i can find paris and it lets me interact with the cards through this section so i'm going to quickly keep going here we're going to make a pop-up that's going to show up at the beginning of the game with a splash screen and instructions and a play button and that's also going to double up as a you win congrats this is how long you took to play the game this is how many pairs you flipped over so i'm going to quickly make a new empty scene we're going to make a user interface a node we're going to rename this pop-up with a capital p and a capital u in camel case notation i'm going to press plus we're going to add a container it's going to be a center container because we're going to center that pop-up in our screen if i press create with center container you can see it's right here i'm gonna select that center container and go to my layout menu we're going to make it a full screen rectangle right there and i'm going to add to it a panel and so i'll press i'll select it i'll press the plus i'm going to add a panel i'll search for it up here panel and my panel needs to have a size now this is where you can get into a little bit of trouble with centering a panel inside of a center container you would think that well you could just give the panel a rectangle size well that's not quite how this works you want to give it a minimum size in this case or at least that's what i found works best for me so i'm going to give the panel a size of 900 pixels wide and you'll see it'll be nicely centered hopefully i'm using min size and not size okay and i'm going to give it a height of oh let's say 600 and let's see how that looks i'm okay with that if i want this panel to have the exact same styling as my heads-up display which i probably do i want to select it and then go to its theme and then load in click the little arrow load in my theme dot tres and press open so now it has the same themes and when you apply a theme to a user interface element like this it'll affect everything that's a child of this panel so it'll affect everything that we make on this panel okay this panel is just going to be the background for a vertical container so i'm going to select my panel i'll press plus i'm going to search for i'm just going to use from my recent vbox container so i'll double click because we want things to be stacked from top to bottom we're only going to have three things we have a big picture we're gonna have a label which will act as both the message when you win including you know how long it took you to win how many pairs you tried flipping over etc and we're gonna have a play button or a new game button but this vbox container needs to take up the entire size of this panel so i'll select it go to my layout and i'll say full rectangle to stretch it out i'm going to add to it so i'll select it i'll press plus a texture rectangle right there texture wrecked i'll select it and with it selected i have an empty texture slot over here i'm gonna go down to my file system dock and in my user interface folder which i've given you uh in the previous videos downloads i've got a title.png i'm going to drag that in the texture of my texture rectangle and there it is it's bourne cgs memory i made this graphic in inkscape which is another open source graphics illustration program and i want to make sure i am expanding it or enabling expanding and i'm going to say keep aspect centered and if i save control s this scene it'll name it popup which is my root node's name and i'll press save can it show up if i flip back and forth no i believe that's because i need to change its size flags to fill and expand and fill and expand and there we go i've noticed that if you don't have other tabs open and you can't do that little trick sometimes nothing works and so you get frustrated and you delete and you try things 10 times but know that you need to turn on expand keep aspect centered and then open up your size flags and make sure the top two are selected for vertical and horizontal and then you should be able to save and flip back and forth and it should work so there's my a label which tells the user what the game is i'm going to go and select my v box container again and i'm going to press plus we're going to add a label and because this is a child of the v box container which is child of the panel well this label should have the same theme as my heads up display which is nice this i'm just going to say temp text and that's what it looks like down there if i select it is it going to have a font well it should have the custom font that i set up before at least in my theme i'm going to go ahead and make that a little bit bigger you can override the styling properties of things in a user interface element like this panel like my heads-up display or like my pop-up here that already has a theme or style applied from the theme you can override that theme with new things over here in the inspector so i can make the text bigger or i can give it a different font if i want to even if that it needs to override the theme hopefully that makes sense so i'm going to select this label i'm going to make sure it's aligned centered and centered and i'm going to make sure that this label has a bit more breathing room so i'm going to make it taller so i'm going to go to its rectangle properties and i'm going to say min size for the y i'm going to make it 60 to give it more room and this should automatically scale to fit because that's the option that we selected i'm going to go over to the labels um i believe i need to go to its custom fonts and i'm going to give it a new dynamic font because i want to make it bigger and uh so i'm going to give it the same font nunito i'm going to use bold i think for all of my fonts here and i'm gonna give it a font size of uh 24. and uh i think that looks fine to me what i'm going to do is i'm going to give this text the correct text at least for my starting splash screen when the player starts or first opens up my game so i'm going to say instead of temp text i'm going to say flip over matching cards to earn a point find all 26 pairs to win okay that seems like a pretty good message to me in this v box container which is stacking things from top to bottom we also need a play button so i'm going to select my vbox container press plus i'm going to add a normal button not a texture button this time we're just going to put text in it so a button will do it's going to be down here i'm going to give it a text i'm going to say play now this text property of a button puts that text on there and i'm going to make this button have a different rectangle size i'm going to say the min size is going to be 60 as well maybe even a bit more than that maybe 80 at the bottom and things this picture should shrink automatically upwards now the text is not the right size and i don't want this big uh dark default button thing looking there so i'm going to select the button and i'm going to go up to the top and i'm going to turn flat mode on and when you do that basically the entire button will disappear except for the text and it'll just be a text based button which is pretty standard in lots of video games but my button needs to have bigger or a bigger font so i'm going to go down to custom fonts on the buttons properties in the inspector go to font make a new dynamic font i'm going to use the dynamic font needs there we go i need to open up this little blue outlined section there it needs a font i'm going to make a new oral dragon nunito bold there we go and i'll change the settings maybe up to 60 or so maybe 50 or so and i can also give the the button a color or text color for both the default state and when you hover over and when you click the button so if i collapse the buttons font settings you can see there are custom colors and i can give the font a color maybe i'll use something that looks a little bit like that same gray color but when they hover their mouse over it this is the font color hover color well maybe i'll change that to you know a greeny kind of a play color so if i were to save this scene i'm going to do a ctrl s to save and if i play this active scene you'll see that oh you know what i can't do that because my game needs me to play my game scene when i first play so we'll have to see you later on one last thing i'm gonna do is i think i'm going to give the whole panel a drop shadow if it doesn't already have one it does but i'm also going to make the background darkened around it so you can't see the game very well and this is a common thing you'll see with light boxes on the internet light boxes are where you know you have a pop-up window that's part of the website and everything else turns dark if i just go to my root node of the pop-up scene and i press plus i'm going to add a color rectangle it's called a color rect there and if i double click to add that it will be just another node that's a root node of my uh or a child of my root node and then i can give it a full screen size so i'll use my layout button and say a full rectangle and then i can change the color to black but i can also change the alpha down a little bit to make it see through or transparent black and lastly because this color rectangle is on the bottom of this list it's in front of my pop-up i don't want that so i'm going to drag it up above be careful you don't drag it on too but right above to just create a blue line there to switch the order of these two so now this color rectangle is behind my pop-up and so that's what it'll look like okay so i think that's my pop-up scene done we will be adding code into a little bit later so that we can change the picture to the other picture i've given you which says game complete or something like that and we'll change this message to say that you know you completed the game in you know x number of seconds with y number of pairs uh or or tries or turns or pairs flipped over in search for all of the 26 pairs next up we need to get into coding so that when you play the game if i go back to my game scene and i press play scene well our hud actually needs to do things so let's go ahead and revisit the game manager code if i go down down to my file system doc i'm going to collapse that assets folder there i have a file called gamemanager.gd this is where most of the logic of my game is i'm going to make this workspace bigger and i'll collapse this output section at the bottom and you can see at the top here besides having a whole bunch of variables here and i'm going to kind of collapse these up a little bit so that there aren't these extra spaces in here you can kind of get a sense of what we have here if you didn't follow along with the first video we have an array which is basically a variable that can hold lots of variables for our deck and this array will hold all of the cards which are their own type of data because of a class that we made we have a card one and a card too because we need to flip over two cards and look at them and compare them and make a decision based on that we have a few timers for when the cards need to flip back over or fade out if you find a match we need to keep track of a score we need to have a pointer to our actual game scene and we have functions to do things like well set up the timers in our game fill the deck with playing cards we also need to deal the deck out to our game scene we need to look and let the user be able to choose a card and then we need to well check the cards to see if they match we need to be able to turn over cards we need to be able to turn the cards or fade the cards out and score in our game if we find a matching set of cards so you can see our functions are fairly well named but what i need to do here is make a few more variables for the different aspects of well the huds especially functionality that we don't yet have we have a variable for score right that keeps track of how many pairs we've found but we'll also need to add a variable so i'll make them right now a variable called seconds and this will keep track of how many seconds have been played because we have a timer on screen on our hud and we'll start that seconds counter at zero we also want to have a variable called moves because that's how many tries or pairs the player has flipped over looking for matching pairs and of course i'll make that assign it a value of zero as well also i need to make a pointer to the three labels in my heads-up display that i want to change again and again one of the big concepts in programming that we are practicing in this two-part mini-series is the idea of pointers being able to have a variable that points to something else in your game so you can easily reference that other thing in the game in this case well if we're looking at our game and we want to point to this label here with the two pound signs or hashtags in it well we can do that using a variable in our game manager so in our script i'm gonna say var and i'm gonna make one for each i'm gonna say score label i'm also gonna make a variable called timer label and lastly of course we're going to make a far moves label now because our heads-up display has lots of elements to it that we need to set up basically we need to take all three of these variables and access our different labels in the hud and put these variables in those labels or on those labels in the hud we might as well take all of that code and group it together in a simple function so right below my ready function i'm going to go ahead and make a new function called func setup hud with hud being in all caps this is going to be a function that we can call from our ready function we'll do that in a few moments but of course i'll end that line with a colon and i'll press enter in this setup hud we need to make the score label we'll go from left to right uh score then our timer then our moves label we'll we'll make our our game script or our game manager script point to each one of those i'm going to make my score label equal to and this is where we need to point and find the label in our game so i'm going to say game recall that we have a pointer called game which actually points to our game scene our tscn file so we're going to make in our setup hud function a pointer to a node in our game so i'm going to say game dot get underscore node and get node as a function so i'm going to put round brackets and in this function i'm going to point to or put include the path in single quotes or you can do use double quotes i think as well where you find that label in the hud now if i go to my game if i unmaximize my workspace if i'm in my game scene if this is the one that's active and i go down into my hud now i can't actually see the children of my head like i can here i can see the hud and everything that makes up the hud in my game what i can do is i can just right click on my head and i can say editable children now be careful you don't actually want to edit the children of the hud from the game scene directly like this but if you want to be able to see where what things are you can do this so if i right click and say editable children you can see they're all kind of grayed out but they're here so if i want to make a pointer to my score label well there it is in fact if i click on it it'll it'll select it it makes all of its properties red warning you that you are now changing the properties of something from another scene which can cause issues uh so don't but if i right click on this now i can say copy node path so this is in my game scene i've made it so i can see the editable children and now i can copy the path to the score label which has the hashtags in it or pound signs uh copy node path i'll go back to my script and i'll go back to my game manager and make this bigger again i'm going to say the score label is at this path this is what i just copied a moment ago okay i do the same thing a few more times so i'm going to say timer label it's going to equal game which is my variable from up top which is the pointer to my game scene dot get underscore node i put my round brackets put single quotes i'm gonna go back over to my uh scene tree and i'm gonna say seconds here right click on it copy node path is what i want to do and so now if i go back to my script i can paste in there it should start with hud if you did it wrong if you went to your other scene into the same thing this is my timer label if i copy that node path and i go back to my script and i were to paste that in this is the wrong one it wouldn't have the hud there because the root of this note is hud and so it would just ignore that but in your game you have to say look in the hud and not just in the actual scene okay so make sure you've done it from your game and not the original hudson okay lastly i'll go back to my game manager we need to of course make a pointer to the moves label and i'm going to make it equal to my game dot get node and around brackets and single quotes and my moves label right there i'm going to right click copy node path and then go back to my script and in here paste so if you need to pause the video at any time of course pause the video and make sure you have very similar code to me and you've done things the same way as me for the most part but let's go ahead and keep moving on once you have pointers to all of these labels well we can actually put text in those labels instead of just seeing pound signs or hashtags so i'm going to now that i have pointers to those huds say well i want to make the score label this is what i can actually do now i can use the score label and say hey make the score labels text so i'm going to say scorelabel.txt equal and this will actually make the score label display whatever i want now i want the score label to display the score and you might think i might just say hey make the text equal to score but that won't work because the score is a number it's a zero and this piece of text the label is expecting a string a string is a word or sentence or or piece of text it's characters this is a value number so it won't work we have to convert a number into a string using the str function and that's what you do you put the score in round brackets of a call to the string function and that should work so i'm going to do the same thing for my timer label label dot text is gonna be equal to the string of the timer and uh it's actually not called timer it's called seconds and i'm gonna say moves label dot text is equal to the string or we're going to convert the moves into a string so now if i were to save this ctrl s if you need to pause the video of course please go ahead and do that but i'm going to press play scene with my game scene active and now you should see we don't i was going to say we should see the numbers in here but what i've forgotten is we have this function called setup hud which we haven't actually called at all we have to call this function called setup hud from our ready function which is a function that gets called automatically when the game first loads so right here i'm going to call setup hud bracket bracket and so now if i do a control s to save and i press play scene hopefully now we now get our heads-up display with zero zero zero if i were to change these values to let's say one two and three and i press play scene i get one two and three okay so it's showing the values that i've assigned to the variables in my code so let's go from left to right here if i take a look at my game of the score is the first label i want to affect and this is an easy one because we just need to add one to the score variable and then update the score label every time you find a matching pair so i'm going to go ahead and find that section in my script and of course i've got this little preview section that i can just drag my my workspace viewport up and down to find that section and i believe we have a function called match cards and score this function gets run when you find two cards i believe there's a delay or a timer that calls this because you want to wait a second before it actually fades the cards out but we're not just going to print the score out we're going to update the score which we have actually already done right here i was going to add that line in but now i'm going to say score label dot text you've seen this before is going to equal a string version we're going to convert score into a string using str and score just like that so if i were to save this ctrl s and because i don't i believe have my shuffling turned on that's why i've left it commented out with a pound signer hashtag you can see now that if i find a matching pair lucky sevens the score goes up to one if i keep going hey i've got a score of two and hopefully now a score of three so we have done one out of three seconds we need to create a timer to let us count in our game each second that has passed that is pretty easy because if i go over to my scripts uh my script workspace and i collapse the bottom panel you can see that we already have a function called setup timers we have a timer for flipping over cards we have a timer for matching two cards which we'll wait a moment before feeding the two cards to make them darker this one waits a moment before flipping the cards back face down to look for two more cards we're going to create another timer remember that we have a timer variable up here it's actually an instance of work we're creating a new timer node type i'm going to make a new var called seconds timer i'm going to make it equal to a timer dot new recall that a timer is something you can also add to a scene by going over to your scene tree and adding a timer it's an actually a node type but we're doing it programmatically because it makes sense not to actually have it somewhere just to make it in your code whenever you need it okay so we need to set this timer up and actually add it into our game it's called seconds timer i'm going to go down to my setup timers and i'm going to be a little bit lazy here i'm going to copy and paste we made a match timer so i'll copy that ctrl c in the same function i'm going to paste it this time i'm going to call it seconds we're going to talk about seconds timer and i'm going to connect it which means that when it times out after each second it's going to call a function in our code which we have not made yet i'm going to call it count seconds do we need to make this counter or only run once in other words is it going to be a one-shot timer which the other ones are the other ones only count down once and then stop forever this one we wanted it to keep counting so i don't need this line which makes that timer a one-shot timer no we're going to let it count again and again and again and the default for every timer that timer note is one second so i don't even need to adjust that at all what i need to make sure i do is make it add added to the scene so i gotta make sure i change this from match timer to seconds timer like that i also need to though make sure it starts because the other two were triggered by an event this seconds timer needs to just keep counting as soon as the game starts again and again again and the default is one second and that's exactly what we want so i'm going to say seconds timer dot start and start is a as a function call so that's what we need but we don't have a function called count seconds like we're telling it to run here every time the second timer runs out so we need to make this function i'm going to put that function right below this set up timers uh why not it's visible right here so i'm going to say a funk and we'll call it count seconds and we need to every time we count a second to add one to our seconds which at the beginning of the game is set to zero so we're gonna use that seconds variable here i'm gonna say seconds plus equals one that's the quick way of adding one to a variable with this increment operator here plus equals adds whatever you put on the right into the variable on the left and then we need to get the timer label i think it's called timer label yeah i wish i called it seconds label but i didn't dot text is gonna equal we're gonna convert seconds into a string str and then round brackets and seconds there so hopefully now if i do a ctrl s to save and i have my game tab scene active and i press play scene hopefully now it will start counting up and it is and if i find a matching pair hey i've now got a score of one and it keeps on counting next up we need to of course make our pairs flip count go up every time you find either a matching pair or even a not matching pair it should count up by one so right now in my game i found two fours and i found a not matching pair so this should be at two where should we add that code well i'm going to go ahead and collapse this bottom dock and look for well the function that we have called choose card when you find a card when you click on a card and it's nothing that means we don't have it chosen yet and we haven't chosen any card this is basically saying hey flip over our first card and this alif is flipping over our second card if we are flipping over a second card it's then going to check them even if it checks them which is right here even if they match or don't match we need to count that as a move even if they match or don't match so we could put the code to count up our moves in this check cards function but we might as well do it when we're choosing the cards right there right before we check the cards right here i'm going to say moves move those moves plus equals one and i'm gonna say moves label equals the string of moves so now hopefully when we flip over two cards no matter what we'll add one to our moves if you need to pause the video please do that's in our choose card function i'll do a ctrl s to save i'll press play scene and now hopefully it'll count if i find a matching pair it it didn't quite update so i'm going to quickly pause this video oh you know what you probably spotted it before me i don't need to make the moves label equal to the moves variable converted to a string i need to make the moves label dot text property so i forgot the dot text here that's an easy one to forget so without that you're actually trying to make the label itself or a pointer equal you know a string of the number of moves but we don't want to do that we want to actually assign the text of a label to equal or display a certain number so i forgot that okay so if i do a ctrl s to save and i press play scene and if i go ahead and flip over to cards you'll see that it identified that i flipped over two cards there's one pairs flipped and now if i flip over a matching pair hey i flip two pairs that's true but i also now have a score of one and i've been playing for this number of seconds so it seems to work pretty well let's tackle these two buttons the easier of these two is the pause button if you want to pause your entire game in godot well of course you need that button to actually do something i could go ahead and make that button in my hud actually call code in my game manager or somewhere else to save a little bit of time i'm gonna go to my hud scene and i'm just going to give that button itself called button pause its own code i've been avoiding that in this project but for now let's go ahead and select that i'll press plus to add a script to it up here with that button selected button pause and it'll be called buttonpaws.gde in our project folder that's fine um i'm going to say no comments as my default template here and i'll press create so here is our button script when we want to check to see if a button has been pressed you could use a signal so if i go ahead and select oh let's say the button and i go over to the node tab over here and i go down to this pressed signal i could set this up this way instead what i'm going to do is i'm simply going to use the underscore pressed function of the button just like underscore ready runs whenever you first load this object into a game that's what the ready function does on any kind of an object buttons have a special function built in called funk underscore pressed and i didn't know about this for a long time amazingly i'm actually not sure if it works for all buttons or not or just texture buttons i don't see why not but whenever you click on a button this function will be called if you've implemented it what i want to do if they press the button well first off let's just go ahead and test it i'm going to do a quick print and i'm going to say pause the game and exclamation mark why not i'll do a control s to save if i go back to my game and i press play scene well if i click on the button it says pause the game so it works but obviously we don't want the button to just say pause the game we want to make the game actually entirely pause to do that we're going to call a function called get underscore tree you would have seen this before in previous videos of mine in godot or if you've used godot obviously to change a scene in the game get trees away you can access basically the root node or the tree structure of the game your game project itself accessing the game tree actually allows you to access a function called a set underscore pause and when you call set pause you can either put in the this function calls round brackets true or false if you put true you are setting the game's pause property to true which makes the entire game paused let's go ahead and do a ctrl s to save and i will press with my game tab active the play scene button and now if i press or don't press the game at first you'll see the seconds counter is timing or counting up if i press pause hey the seconds paused and i cannot click on cards none of the game works because it's all paused the problem one of the problems is is that the pause button itself is now paused and there's no way to undo it i'm clicking you can hear it i'm clicking and it does not work to stop that from happening every single note type that i know of in godot including if i go to my game and in fact the hud itself and if i select that pause button and go to the inspector every node type that i know of including the button or texture button has a section called pause and the default value is inherit that means that this button inherits the pause attributes or this pause property from its parent and i believe the default for almost everything is just inherent or you know pause when the game is paused don't work when the game is paused to stop this button or allow this button to continue working even when the game is paused so you can unpause the game we're going to turn this to process and i'm not sure why that's named that but if you have that button to process now you should be able to unpause your game or at least access the button and be able to click on it the problem is now though that i even though the button will work it only knows how to pause the game and not unpause it so i'm going to go back to this code we're going to do an if and an else if statement here i'm basically going to say if the game is paused unpause it but before that i'm going to say if the game is not paused pause it if we have that if and that elif there we can also change the texture on the button because i want the button to turn to a play button if the game is paused and if the game is just running normally you'll see the pause button so that's how it will work if i go back to my script of course i'm going to make an if here i'm going to say if get underscore tree and this is almost the same if i want to check to see what the pause property is is underscore pause and that will return true or false if i want to check to see if the game is not paused well what i have to do here is put an exclamation mark if you're familiar with other programming languages you'll know the exclamation mark means not and so this basically now says if not the game is paused or if the game is paused is not true in other words the game is not paused then i want to make the pause to be true so i'm going to indent that line there so if the game is not paused this is the result it's tabbed in we're making it paused and then i'm going to go and out to my next line i'm going to say l if and i'm going to copy and paste this i'll be a little bit lazy if the game else if pardon me we get the game and it is paused i want to make it not paused so i'm going to say set pause to equal false so hopefully that makes sense if the game is not paused make it pause otherwise if the game is paused make it not paused but if the game is not paused i want to pause the game that means i want to take the texture on that pause button if i go and look at it i want to turn it into a play button because when the game is paused you should press play to make the game resume so i'm going to go back to my script and i'm going to add another line here we're going to say a set underscore normal and i think we've seen this before in the last video set normal texture and because this code is on a texture button we can use this function call to set the normal texture i'm going to load in a new texture here so i need my round brackets of course load is a function call that needs its own round brackets and in here i'm going to put in a double quotes i think i think i could use single quotes too the path to a texture that i want to put on the normal texture of that button now i'm going to go into my assets folder i've given you all these pictures here it's going to be the play button picture so i'll right click on that and i'll say copy path and now i'll paste that up in there so now if i want to make you know the picture change this is how i would do it and i'm going to be a little bit lazy here i'm going to copy that line ctrl c if the game is paused and i press it well i want to make the game not paused and i want to change it back to pause i think that's what it's called i'll unmaximize my workspace yes pause.png so that should be right let's go ahead and press play scene i'll do a ctrl s to save first place scene and it is not working because in my game project you have to be working on or have your your active tab your active scene as the game in fact this would be a good time for me to press the actual play button and it's going to say hey no main scene has ever been defined select one when you press play you have to say which scene is the first scene of your game i'm going to select that now i'm going to say my game is my main scene so i can just use i'll select it and press open so now i can just use the play button and hey i can press pause and it switched to the play button it works if i click on a card hey nothing happens if i press the play button now the counter resumes and i can click on two cards and they flip over if i click on two cards and quickly press the pause button they don't flip back over because the game is paused the seconds isn't counting up if i press play again well the game will resume exactly like that so that's that's what i want i want this button to work even when the game is paused and for it to switch the way it looks next up i want to make my splash screen that pop-up actually show up when the game first starts we'll get to this reset button probably last in this video coming up pretty quick but when i press my play button i don't want to just get into my game i want to see that first splash screen to do that i'm going to go into my script and i'm going to go to my game manager in my game manager i am going to make a new variable that will load in that pop-up so up at the top where i have all these variable declarations i'm going to make another one i'm going to call it var pop-up and i'm going to make sure it has a lowercase p and then an uppercase u and then lowercase p be careful because there is an actual node type called popup and you might see it as you're auto completing a line so that's why i'm naming things with specific capitalizations to avoid any conflict there okay when you want to load in a scene to use an instance of it later on well we're going to use preload and this lets you load or before the game actually starts load in a whole scene into another scene like we're doing right now i want to pre-load in the scene i can actually go into my file system doc over here i'm going to load in the popup.tscn so i'm going to right click on it and say copy path which is right there i couldn't find it for a sec right click copy path and then i'll paste it into single or double quotes i think and it'll put res colon slash pop-up with capitalization proper matching that one dot tscn there so now when my game first starts i want to make a new pop-up obviously and that's going to happen when the game first loads so i'm going to put the creation of an instance of this pop-up scene down here in my ready function so after i set up my whole game i'm going to create a new instance of my pop-up i'm going to call it var splash it's called a splash screen it's that screen that comes up when the game first loads and i'm going to make it equal to a pop-up you see how there's some green ones there i don't want that i want to make sure i'm using the lowercase one dot instance and i gotta put my round brackets there of course and of course i need to now add the pop-up scene as a child or into my game as a child of the root node of my game scene this code is my game manager which is not my game but my game manager does have a pointer to the game so i'm going to use that i'm going to say game dot add underscore child and i'm going to add the splash screen as a child of the game's root note so let's go ahead and do a ctrl s to save and i will press play scene and as you can see now hey it has a dark background and it has a play now button and now i can see that green hover that i might want to change later on but if i click nothing happens wonderful so that's a problem and you can see it's counting below the splash screen i don't want to start counting until we obviously are actually playing the game and not when we're looking at the splash screen so a few things we need to change there in fact what i need to do is go to my pop-up scene and we're going to give my pop-up root node some code one because we need to change some of the things on this splash screen when we complete or win the game like this message and the picture in it we also want when you see this we want the game to pause so we don't get that counting and we need the button to work and i might as well put the code for the button on the root note of this scene and that is a good choice for us to do because when you press this play now button it actually deletes the instance of the pop-up from your game and that's you actually play the game and see the cards below it so let's go ahead and select the root note we're in our pop-up scene here i'll select the root node i'll press add script to it and we will call it popup.gd that's that's great so here it is without any comments in it first thing we'll do is i'm going to win this scene first loads we're going to get the tree of our game and we're going to set it to be paused so i'm going to set pause true and uh that should work we also need to hook up that play now button it's called just button and make it actually run a function when we click on it so i might as well do that right in this pop-up code here i'm going to make a variable right up above the function called var play button and i'm going to make it equal to play button we're going to make it equal to or point it towards the node where it actually is so i'm going to say get underscore node and in there i'm going to put the path to where i can find the node in single quotes i'm going to just go ahead in my pop-up scene right click on the button itself and i'm going to say copy node path like that and i'm going to go back to my script and i'm going to paste that path right there it's in a center container right there it's in a child of a panel it's a child of the v box container it's a child where it is the button okay so that's that's the accurate path there might as well make that a little bit bigger on my screen so you can see it we also need the play button to be connected to a function so when you click on it it actually does something so right below that line i'm going to say a play button dot connect and when you want to connect a button to something this is how you do it if you're doing it from somewhere else in other words another another node's a script you can point to that button you can say dot connect and then you have to put three parameters here you need to say what signal you're hooking up on the button well we're using the pressed signal and then i'll put a comma and i'm going to say where are we calling a function well we're calling a function in this code file so i'm going to write comma self and lastly we're going to in our third parameter after another comma name the function that we want to call when the button is pressed so i'm going to say we're going to name this function new game that seems to be a good name now we need to be very careful here because we have paused the script and or our whole game and then we are still running code so in order for the button to actually work i need to have the button already set up before we pause the game so i'm going to cut that line control x and i'll put it right below control v so that this code will run and then we'll pause the game i also need to make sure that if i go back to my splash screen and i'll unmaximize my workspace there that i select that button and i make sure that i turn on its pause pardon me it's pause function i'm going to turn on to process in fact i'm going to select the root node of this scene and make it also process while the game is paused okay so everything in here will still be active including the button which is good because the script is on the root note as well so hopefully that should help so now when we press on this play now button when our game is running we need to make this whole splash screen disappear and we need to unpause our game and we actually have to in the background reset our game you'll see why in a few moments but let's go back to our pop-ups script we said in our ready function that we are connecting the play button the new game button to a function called new game that does not exist yet so we better make that before we try running this at all so down here i'm going back to the beginning of my line i'm going to say funk and then new game and i'll put my brown brackets and my colon there i'm going to say get tree and i need a set pause and then i'm going to say false because i do not want my game to be paused anymore and i need to get rid of this splash screen that you're looking at right now that's on top of my whole game so when i press that play now button i need to say q q u e u e underscore free and uh it's a method call or a function call so you need to put round brackets when you call cue free it will delete the scene that you're talking about in this case this code is on the root note of the pop-up and it'll delete it as soon as it can okay that's why you're saying basically q which means line up to free this from memory to delete it so it'll delete it not maybe immediately but very very quickly okay so if i press ctrl s to save if i press a play am i going to get an error yes i am because i forgot the period there okay i'll press stop i'll press play and it should work i've got a darkened background it's not counting up i can see those the bottom of the zero there if i press play now the game starts i'm counting up i can find two cards those ones don't match these ones do look at that and i have flipped two pairs in 10 seconds and i have a score of one now i should have a score of two and i've flipped over three pairs in 15 or so seconds so that's what we have so far looking pretty good what about that reset button at the bottom if i go back to my game and the hud this button here this is a little bit more tricky than you might think because when you reset your game you essentially need to delete your whole deck of cards you need to make a new deck of cards you need to deal them out to the screen and you need to reset all of your score your seconds and your pairs flip to zero and refresh the labels in your hud it would be nice if you could just refresh your game level like switch to a new scene i have not gotten that to work but i think this is a nice practice in coding so what i'm going to do is in my script of my game manager i'm going to make a whole new function that resets my game and i'm going to call it go figure reset game where should i do this i can do this right below my ready function it's going to be called funk reset game now let's think about this a little bit logically we have a array it is full of cards and those cards are really their own objects their own things in in code and i need to delete them all but the deck which is an array still will have all those pointers even if i get rid of them um off the actual game screen when i press play you can see them all if i press oh you know what i've got this reset game i need to have a pass in it until i actually put real code in that uh that's what you need to do you can't have an empty function in gd script it won't like that very much so if i press play now i have to delete all the actual cards and the array i need to reset it to basically have no pointers to cards in the array of 52 cards and i need to make a whole new deck and fill it up first let's go ahead and write a loop i'm going to use a for loop this time i avoided that in the last video a for loop is very quick in this case because i can make a variable on the fly called c i'm going to say 4c and if you haven't seen this kind of syntax before just follow along and see if you can kind of understand what's happening i'm going to say 4c in range and i could put a number here like 52 but instead i'm going to do this a little bit more intelligently hopefully i'm going to say in round brackets i think i'm going to say deck dot size and this deck of course is my deck array and when you want to know the length or number of items in the array you can say the array's name dot size and size is a function call that will return how many things you have in your array this is going to be a loop because we have a four and for each card that's what the c stands for in the array we're going to delete that card so i'm going to say deck and then to access a a value in the array or one of the objects in the array i'm going to put dec and then square brackets and then c in the square brackets basically this will count from one or zero to the the length of the array arrays usually start counting from zero and go up to uh one less than their actual overall size i'm not going to get into it this coach should work i'm going to say deck c which is you know going to be deck the first card in the deck and then the next time it loops it'll be the second card in the deck and then the third card in the deck this is going to be a number this variable when you make it in a for loop is is a number that i think starts at zero so i'm going to say deck c dot q q u e u e underscore free and when i call that it should delete that card and then it'll loop through 52 times the size of the deck and delete all of the cards i also need to make sure there are no more pointers existing in that deck so i'm gonna say deck dot clear and this is after my loop has finished so the cards are actually deleted now i'm deleting the pointers i'm going to now reset the score to zero seconds to zero and the moves to zero and of course those are just the variables we need to update the labels on screen so i'm going to say timer label dot text is going to be equal to the string of the seconds and i'm going to do this in the right order i'm going to say the score label dot text is going to equal the string of the score and last but not least i'm going to say moves label dot text equals the string of moves there we go now that i have an empty deck and all the cards are off the screen i need to make a new deck of cards fill up the deck and deal the deck onto the screen luckily we already have all of that code separated out into their own functions so we have a fill deck function and a deal deck function so i'm going to call those two rate from this reset game function so i'm going to say fill deck and deal deck there we go when are we actually going to call this reset game function well there's a couple of times we're going to call this function when in our game i'll go ahead and look at my game when we press this reset button this reset button we're not going to actually add code a code file onto it like we did for our pause button in this case we're just going to make it work by pointing to it and connecting it to a function right in our game manager so back into my script i'm going to make a variable right up in the top of my game manager before any functions called var reset button and then down in my setup hud function i'm going to set up and connect that reset button that's in my head that's why i'm doing it here in my setup hud function to a function that we've just made called reset game so i'm going to say reset button is going to be equal to this is when we're actually pointing this variable in our code to actually be a pointer to the actual button in our game we are going to point it to a node so i'm going to say get underscore node and i'm going to put in single quotes i believe and the node is going to be in our game i often forget that so i need to put game dot and game as a capital g because it's our pointer variable that we made up at the top of our code in the first video we need to go and get the pointer to the reset button in our game so i'm going to go back to my 2d view it's right here the reset button so i'm going to go over to my scene tree right here and right click on button reset and i'm going to say copy node path and then i'll go back to my script and i'll paste that path right there it is in the hud it's in the panel in the hud it's in us in the sections section it's called section buttons and then it's called button reset right there so that is a valid pointer hopefully then i need to connect it to a function that we've already made reset a game i think it's called up there so i'm going to say reset button dot connect and you've seen this before in this video i'm going to connect it to this button's pressed signal i'm going to run a function on this code itself so we're not pointing it to some other code file and i'm going to call the function called reset game i think that's what i need i'm gonna go ahead and press ctrl s to save i'll press play is it going to work well if i press play now i can play the game i'll find a couple of pairs and maybe i'll flip another couple of pairs that don't match so i have some settings over here if i now press the reset button hey everything reset i have a score of zero my cards flip back over my seconds timer went back down to zero and i have zero pairs flip so now i can find more pairs and it just works does this button work when i pause the game no and that's up to you you could go and change that pause property to uh not inherit and it would work but i'll leave that to you one other place that i might want to reset the game is when i press this play now button now obviously right now when i'm first launching the game and i press play now the game has already been reset the game is fresh it doesn't have any cards left over obviously things are set to zero zero zero but when i win the game that same pop-up is gonna show up we're going to when it shows up uh in a moment change the graphic on it and change the message on it that text to say you know how many seconds we uh took and how many pairs we had to flip to win and final 26 pairs but that play again button should reset the game in case you're seeing that other version of the pop-up so i'm going to go to my pop-ups code and when i press the new game button if it calls this function called new game before we unpause the game or maybe after we pause the game before we delete the pop-up we're going to say game manager dot and then reset game and again that's a bit redundant when you first start up the game but it's going to be useful for us when we're seeing that win message which is what we're about to create now so if i press ctrl s to save and i press play scene it should work just as before but obviously i want to be able to win in our game manager's code i'll go to the game manager and scroll up and down i'm going to find the code i'll get rid of this dock at the bottom where we are deciding if we win or not and the most logical place for that right now is this function called match cards and score this is where if you have a set of matching cards you add one to your score you update the score you make the cards faded out and then you reset your card one card two to null and you print the score we can get rid of that right here we're gonna do an if statement and we're gonna say if the score is equal to and this is where we can say you know 26 if we want to make the full version of the game but for testing what i'm going to do is make a variable called and this is going to be a little bit of a cheat for me i'm going to say var goal and i'm going to say 2 later on we're going to change it to 26 before we finish the game okay but for now we'll just make it a variable up here so we can change it up here later down at the bottom i'm going to say when my score or if my score is equal to the goal which normally should be 26 pairs it's the goal number of pairs you want to to flip over then we want to create a new instance of that splash screen and show it up on the score make it show up on the screen up at the top i have pre-loaded i think the pop-up so i can just make a new instance of it that's the name that i'm making an instance of that variable pop-up with lowercase p at the beginning so down here if my score is equal to 2 which is the cool right now we're going to say var windscreen equals pop-up dot instance and be careful with that pop-up there's another a node with the same name but different capitalization that's green when you start typing that so be careful and so the pop-up should show up and if i do a quick control s to save of course pause the video if you need to to get that out for yourself if i look at my pop-ups code when i first lower a pop-up it pauses the game so that should be fine that should work if i go back to my game manager if you need that code again there it is but i'm going to go ahead and press play if i now press play it'll hide that splash green pop-up if i find two pairs there's one pair oh there's not a pair and there's a pair and that goes away oh you know what i forgot to add one line of code here if my score is equal to two that means i've flipped and matched over two sets of cards i not only need to make a new instance of the pop-up which i've done right here i also need to add it into my game so just creating a windscreen isn't enough you need to actually add it into your scene tree which i forgot to do there's one more line here i need to type game which is my game obviously dot add underscore child and now i'm going to add the wind screen as a child of my root node of my game so that should be what i need if i do a control s now to say of course you need to pause the video to get that for yourself please do but i will press play and the game loads i'll press play now i'm going to find a couple of matching pairs and maybe that's not matching one and i will find a matching one and hey the game has paused i don't see that counting up below i have my splash screen it tells me what to do all over again and i can press play now and it'll reset the game which is what i want which is why i added that extra step in there so now i can find two matching pairs and it'll let me win the game again and you can see it's working pretty well obviously i'm going to need to go later on to my top variable called goal and change that to 26 but i'll leave it at 2 for now just to test this game out the last thing we need to do before we uh can basically be done is when we see that pop-up message when we have reached our goal we don't want to just say the same thing we right now have in our pop-up screen if i go and actually look at it we have the title of our game and we have instructions for the game i don't want that i want to say well level complete or game complete or you win and i have a graphic for you of that and i want to say a different message on the screen i want to say you found 26 pairs in 500 seconds and you tried 300 pairs or you flipped 300 pairs to get to and find all 26 pairs to win so we're going to change the text in this label essentially so in our pop-up code right here so in popup.gd i'm going to make a new function called win so funk win and we need our round brackets in our colon of course and the first thing i want to do is select this image texture and change it in my assets folder i've given you in the last videos downloads a set of pictures one is title.png and one is complete.png which is the other version of this picture and so what i'm going to do is switch out the texture property which is this property right here of this texture rectangle so i'm going to in my pop-ups code say i'm going to put a dollar sign and now i'm going to point to this node and when you put a dollar sign it will let you point to a node it's just like get underscore node but the dollar signs a quicker way of doing that so i'm going to use my arrow keys and find the texture rectangle there aren't too many nodes in this scene which is why this is a good way of doing it and there we go it's right there and i'm going to say dot and because the last item here is a texture rectangle when we put a dot we can now access any property we want of the texture rectangle in this case i'm going to run a function that's on texture rectangles called set underscore texture i believe it is and in that set texture round brackets i'm going to put a load and a load needs its own round brackets just like that and here i'm going to put in double quotes the path to the other picture called complete.png i can right click right on that and say copy path so i now have the path copied to this picture in my project folder it'll start with res colon slash so i'll paste that control v right there so that's a long line i'm going to make this a bit bigger on my screen there it all is and that should change that we have our texture now replaced next up let's change that middle line of text this one right here so i'm going to have to do the same thing in my popups code in this win function i'll put a dollar sign i'm going to get the label i was a bit lazy when i named it i didn't change the name i'm going to say label dot text is going to be equal to and this is where i'm going to just type out what i want to say and then i'm going to concatenate in some variables to make it actually customized so i want to say something like you found 26 pairs in 100 seconds and flipped 500 pairs of cards okay so if someone flipped 500 cards in 100 seconds that would be amazing obviously these two numbers are not what we actually want we want to use the variables from our game manager we have a variable called seconds and we have a variable called moves we want to concatenate that means insert those numbers into this string here so i'm going to delete 100 from the middle of that sentence and instead i'm going to put the end of my first quote right here so i'll add in a quotation mark there i'm going to put a few spaces i'm going to start the end of my quote with a new quotation mark right there so i got rid of 100 i put in two new quotation marks double ones and now i can use the plus symbol to concatenate concatenate means to insert from different types of data into the same location or string in this case and i'm going to use from the game manager what am i putting in here well i'm putting in the number of seconds so dot seconds now seconds is a number and we need to put a string into the middle of this string so i'm going to put str round bracket and close the round bracket right there so we're converting that we also need to change this one this is how many moves they took to do that so i'm going to this is getting a little bit frustrating get rid of that word 500 i'll use my arrow keys i'll put an end quote and then some pluses and then the beginning of the end of that sentence and then in here between those pluses i'm going to put str and i need to convert it to a string and then in the round brackets game manager dot and this will be moves so it should read uh in that center label in the pop-up right there it should say you found 26 pairs in you know 327 seconds and flipped 102 pairs of cards make sure when you're concatenating that you remember that there should be spaces around those numbers and right now i don't have that so when it says you found 26 pairs in you know 500 seconds you need to have a space between in and 500 same thing after 500 space seconds same thing and flipped space you know 300 space pairs of cards okay that's one thing people often forget to make it look good so let's go ahead and do a ctrl s to save i can scroll back and forth i can't show you that entire line in one thing but in my game manager if i go down to where we actually call the win a pop-up which is down here in match cards and score in my game manager script we're saying if the score is equal to our goal which is two right now make a new pop-up called windscreen and show the windscreen before we show the windscreen or right after we can see if it actually works just to change it after we're going to call the windscreen dot win and that's that function that changes the picture and the message to the win message that says how many seconds you took to win the game and how many cards you uh flipped over your number of moves in other words so that line added that should do it if i do a control s to save and i press play i should now be able to press play now and flip over two pairs in fact i'll flip over a three and there we go it says you found 26 pairs in five seconds and flipped three pairs of cards that's all true it says game complete now instead of memory by born cg and i've got a little promo here so people know where to learn how to make this game if i press play now hey it resets the game second started from zero again i can find more pairs and last but not least i think everything is done except well we need to make sure we are shuffling our deck of cards which is when we are dealing the cards which is right here i've got my pound signer hashtag ctrl k should get rid of that for you i'm shuffling my cards now and i need to make sure i get rid of that number two and change it to and that should do it so now if i press ctrl s to save and press play i have a working memory game i might want to customize the colors a little bit better i think i might make the background of my panels in my hud and this pop-up a little bit brighter and change the font colors and things like that i don't like this green but it says the instructions when i first play i can now play my game i don't know where the cards are this is literally just me playing the game and i got a score of one that's great they faded out that's great and i can keep playing and obviously it's gonna take me a little while to win does the reset game button work yes it does if i find a matching pair or in the middle of playing can i pause the game yes i can i can walk away and then resume the very last thing we need to fix in our game project is when we press play and if i go ahead and press play now what happens when we change the window size of our game if i grab the corner and just stretch the window to make it smaller or bigger well less than ideal things are happening right here this is happening because of the way that we set up the anchoring in our game to make the game table the green background and the grid container that contains all of our cards we anchored all these things to the corner of our window but our heads up display used margins to define how far away the top of this heads-up display is away from the top of our game window and we scale our game well the cards get spaced out in different ways which doesn't look too great and the hud kind of collapses if we go too far so let's fix this let's go ahead and change some project settings under the project menu we go down to project settings and then under the first general tab we'll scroll down on the sidebar to the section called display in display there is a subsection called window and this is where we can of course change our game windows resolution we set ours at the beginning of this uh two-part video series to 1280 by 800 and we made the window resizable and that's okay you could turn that off but when you export your game to the web well your game might be changed in its size by the website that you publish to so you might want to deal with this now rather than later what you should do is under this display window uh sub section you should go down to the stretch section here we're going to change the mode from disabled the way that the game stretches to 2d i found this works the best it looks the best when you make the game smaller or larger and we're going to make the game when it stretches keep the aspect ratio and that means if your window it changes in its shape like how wide it is versus how tall you will get black bars on the top and bottom or left and right but at least your game will not stretch so i'm going to go ahead and say keep for that 2d and keep i'll go ahead and press close and now if i press play and then i change the size of my game i'll go ahead and press play now you can see that well my game does not stretch in a not that nice way and everything kind of stays in place i could also go back up to project settings and go down to display window and i could also try besides keep i could choose ignore and when i do that 2d and ignore and press close i'll go up and press play to play my game and if i press play now you will see that if i stretch my window the game gets distorted but the spacing stays the same and i believe i actually used this option when i exported my game to h dot io where you've been able to play it before i believe the game will stretch so either black bars or stretching that's up to you but that pretty much will be it for this video if you finish this game project for yourself or you complete another game in the kettle game engine and you want to learn how to publish it online to each dot io i use itch because it's a very easy and popular platform where you can of course play this game at bournecg.h.io forward slash memory or justborncg.h.i.o will get you to my profile page where you can see all of the games that i published which is only a couple at this point i actually already have a video tutorial on youtube on how to export your game to html5 and upload it to ishta io i'll put a link to that video up on the screen right now so check that video out of course my name is colin and thanks so much for watching this long form video or perhaps both of them if you watch them back to back if you like this video or learn something new please go ahead and click on that like button below this video it really helps out me and my channel and if you want to see more videos like this one in the godot game engine or in blender or other technology click on that subscribe button if you haven't already and the bell icon will notify you whenever i upload a new tutorial check out my facebook page and my instagram pages that's where i post sneak peeks and previews and i talk to you guys the most outside of here on youtube but that'll be it for this one thanks so much for watching again and we'll see you in the next one bye you

Channel: BornCG

Views: 5,146

Keywords: tutorial, lesson, beginner, godot, engine, godotengine, game, code, gdscript, coding, programming, card, cards, playing cards, playing card

Id: sJ-icrkrM2s

Length: 108min 15sec (6495 seconds)

Published: Sun Feb 28 2021

Reddit Comments

[u/BornCG]

Part 1 of the tutorial is here: https://youtu.be/A60dT7RJfO8... Edit: and the Playable final game is here: https://borncg.itch.io/memory *(Edited to fix link)