 Hello everyone, today we have two goals. First of all, let's go into save the game whenever we close it so we can keep the progress. And the second one is making it look a little bit nicer, adding a custom font, making the buttons feel a little bit nicer, and let's see what else we can get in there. So first of all, what I'm gonna do is to remove the base because it looks very bad and, you know, we already have something better, which is the graphics. And let's add a new node, which is going to be a control node, a color rect. This is only a rectangle with some colors, nothing else. To make it feel the entire screen, remember we can use the layout and full rect. And now move it to the top of the tree, so it's going to be behind. Now I'm going to pick a dark color because I want to have some good contrast between what the copy, you know, the text is and the background. So let's go with something like this and maybe with shades of blue. Okay, one tip, additional tip, never use completely black or white. Like if you go black, it doesn't look very natural to the eye. We're not very used to seeing those dark colors. And I think it looks much better if you just get just around a very, very dark gray area or a very bright area for the whites. Of course, this is not something that you have to do, but I recommend it a lot. Okay, so this looks a little bit better already. Now let's import some fonts. I have two downloaded. I got them from fonts.google.com. First one is Enriceta, which looks kind of medieval or something like that. And the same for Cinsel, which is, I feel it's like an open version of Trajan. I'm not sure, but it looks very similar. And I'm gonna be using this one for titles and the other one for the rest of the text, I think. Here in Google Fonts, you can select any font that you want to download. And whenever you have the font selected or anything, you can just download and it will give you a zip file with the files that we have. I already did this, so I'm going to open the folder. Here, create one new, which is going to be fonts. And I'm going to paste them inside there. So I have all the fonts that I want. Let's open got it again. And we should have them here in the font score, okay. So first of all, let's make this number. One of the things that was bothering me, like if it gets very big, if you see it is not properly aligned. So let's make it big enough, something like this. I think it's gonna be bigger. And then also alignment center. So whenever the number is getting smaller or bigger, it will always be on top of that button. And let's do our custom font. To do that, here we have custom font. Let's create a new dynamic font. When you do that, you have to click here in font again. And here, finally, we can load the font that we imported. In this case, since I want it to be prominent, I kind of like a title, I'm gonna use scene cell. And let's make it bigger, something like I don't know, 60. And that's too big. So maybe 40, yeah, that looks okay. And also an outline, I'm gonna add an outline of one pixel, which is going to be dark as well. Let's do the color, here in custom colors, something like this, yeah. And okay, it already, I think it looks better. Let's see, let's try some numbers. Yeah, that looks so much better than the other number. Okay, let's try to see how it looks inside of the game. Yeah, look how ugly this button is. We have to change that as soon as possible. Okay, now let's continue styling this button, okay? So whenever we have one of these buttons, we can either use a global theme, which is making changes to all the children from that, or a custom theme just for that button. I'm gonna be doing one specifically for this one because the button that you click all the time, I want it to be different than the rest. But if you want to know more about how themes work, I uploaded a view so you can click in the corner and yeah, you're gonna be seeing this tutorial. So let's go. To do that, you can go here to the custom style, the same as we did with fonts, but just with style. And you have different states for the button. Normal is the one that we're seeing, hover is when your cursor is on top of it, and pressed, focus, disable, you get the idea. Let's go ahead first with the normal one, and from that we're gonna copy them and do the other ones. So new style box flat. This is the one that we're gonna use because we're not gonna be using any special images or anything like that. So new flat, and it goes to a very ugly state. Let's go ahead and open it. First thing, the background, let's see. I want it to be a little bit like, I don't know. Let's see what looks nicer. Red maybe, something that insights you to click on it. Yeah, maybe something like this red, but also I will make it a bit smaller. And let's change the caption. We don't have exactly the name of the unit that we're editing. So since you're kind of like a death lord which can reanimate corpses, let's say like we have soldiers or yeah, make a zombie, let's say zombie, make a zombie. Okay, that's gonna be our name for that. We can change this later. Now let's add some border, maybe some border on the sides. Let's see, three on each side. What color? Maybe a darker, I'm gonna, yeah, it looks better. The radius, we're gonna be doing a bit of radius, so it's not that square. Let's see how it looks with four. I'm entirely convinced, but yeah, oops, moved it. Okay, it really looks better. Let's change the font to see if we get more inspired. Let's see, custom font, new dynamic font. Let's select it again and let's go with the regular one and we get a medium, yeah, maybe bold, let's see. Now let's change the size. Yeah, this is starting to look better. Okay, it doesn't look very clickable yet, so maybe if we add some yellow here or blue, since it was the color, let's see, something like that. Let's add some action, okay. And darker, blue, something like that. Okay, well, I'm not sure if this looks clickable, but you get the idea, you have all these properties here and it always helps. It's absolute shadow, okay. So now, let's see. Now that we have this style, we can actually save it. Once we save it, let's create a new folder for styles and let's say main button. Now that we saved it, we can use it for the other ones because right now we have the default, so if we try the game and we hover, you see we change the style to the Godot default style and we want to change those as well. But if I have to do it all again, I have to copy all these properties and that's just a little time, so let's load style main button. So now we have it. What is the issue here with this approach? The problem here is that if we want to change, for instance, the color of the shadow, let's say that when we hover, we want to make it yellow, bright, something like this. So you know that you're hovering it. This looks terrible, but you get the idea. Let's see, something like that. The problem is that seems I'm modifying the same main button thing. It's gonna change also the regular state. So what you have to do is when you're copying this and you already open it, you can press here and make unique, which will make a new style, which is not saved and specific for hover. Now we can go back to the normal one and remove it. Okay, so we have the normal one as we wanted it and the hover with the yellow outline. Let's see if it carried through. Yes, okay. The click doesn't look that bad, but okay, I'm gonna keep it for now. Another thing is that I want the cursor to be the hand because with the mouse only, it looks kind of weird. So you can change that from here in the control node in mouse, you have the cursor shape and we want the C pointing hand. Okay, pointing hand. Let's see if it looks more clickable. Yes, super clickable. Okay, I'm happy enough with this. I'm not gonna continue making changes, but we want to make changes to these buttons as well. Let's see. We have here the auto clickers and remember that they are a separate scene. So since we're modifying a separate scene, let's go and open on one. Okay, we have the scene here, the button, it needs to be more clickable. Let's use the same base that we have before or create a new one. Let's see, custom fonts, first of all. New font. Oh, sorry, new dynamic font. Click on it, font, font, font, font. You have to click on that so many times. Okay, let's go and get that regular. Oof, this looks so bad. Okay, now we have to move the price a little bit there. We also have that zero, which is the label. Yeah, this looks ugly. Okay, auto clicking. Now this number over there and for custom styles, let's use the same one for normal. So load styles, main button, but let's tune it up a bit. Let's make it unique. So we are only modifying this version of it and inside of there, I'm gonna remove so much shadow. I don't really want that much. Like, that is okay. Maybe making it even more subtle. Okay, whoops. And also making it a bit bigger. The font also needs to be bigger so it's easier to read. Okay, now let's move the units per second. Oh, sorry, with the container here. Again, you can click here so the children are not selectable. It's gonna make it easier for us. And you know what? Since we're gonna be using the same font for several elements here, let's go ahead and save it so we can reuse it. So this custom font is gonna be Enriqueta font, something like that. I'm not very creative with name. And let's apply it to this. So here in custom font, load Enriqueta font, same with the value. Custom font, load styles, Enriqueta font, okay. And same with the price. Price, custom font, load styles, Enriqueta font, okay. And the color, let's make it better green. That green looks kind of weird. Okay, maybe change it to yellow, which I don't know, it could be like gold instead of green, more liking, like new games, something like that. So let's say like this yellow is gonna be it, okay. But also I want to make this price a little bit different. This looks very bad, this zero. We'll have to change this. Yeah, let's see what we can do. Maybe an outline or a shadow. Yeah, shadow looks better. And remember don't never use that, okay. So this already looks better to me at least. Let's see how it looks when I save it. Let's go back to the main game. Okay, they are definitely taking more room. So we're gonna be making room, but it already looks better. So since this is the amount of things we have, right? Okay, this is the amount of dose that we have, right? Yeah, so instead of adding it inside there, let's make it like here, like a number, like a thingy. And for the disabled, we also need to do styles and for hover as well. So let's add those, let's see. Auto clicker, first the mouse. We want the pointing hand, we get this, okay. Now for the, here this label was how many we have. Let's get the same font, custom font, load the same one. The alignment is gonna be centered, remember. So it doesn't change the position a lot. And now let's add like a new, let's see, color rect. Let's make it the same color as the background of the other one and move it behind the label and the button. Something like this, yeah, okay. And now, yeah, it's gonna, I mean, I don't like the solution a lot, but it's gonna look better, I think, than what we had. Let's save it and see how it looks. Yeah, let's add more room to them, okay. They are taking too much space, so maybe we can be a little bit more creative on how we display them. Oof, no, okay, so we need to be more room. We need more room, let's make it there. The units per seconds will be there and maybe making this font smaller will be a good idea. If we change the size here, everything will change, yeah. Okay, so let's change all the font, okay, smaller. Units per second, okay, okay, maybe like this. Let's see, over there, okay. Now let's do the other styles for a button. Let's save this one as auto clicker button. Let's do the disabled version. Okay, we load the same style and we make it unique. Okay, so if you want to preview one particular style and the editor, you don't have it, you have to set it to that node. So right now, let's set it to disabled and we're gonna see how it looks. There's like a default on the font which is making the copy a little bit transparent. I don't really like that because you don't have the control exactly to change that, but it's a good standard, so I guess it's okay. What I'm going to do is just remove color on this one and also on the outline for there, okay. So that way they look like you cannot click them, okay. This seems good enough. Also, I want the hover style, so let's set the disable and for the hover, you have to kind of figure it out like I don't know a way to preview it. There's probably one, so if you know it, leave a comment. Hover, load, let's open the same style. I've looked at the button. Now, make unique and the background is going to be a little bit brighter, like so. We have here the preview at least, so yeah, we get that at least. And maybe the shadow, I also want it to be a little bit brighter, yeah. Let's see how they look. I'm going to save this, I'm going to test the project. Okay, yeah, this looks better. Now have one, okay, nice. So it doesn't look terrible, but it doesn't look very nice either, but at least we have something better there, so now we have a better base. You already understand how you can be creating your own styles to your buttons. And let's go ahead and save this number. Since we don't know exactly when the player is going to close it, we're going to be doing that every second. So I'm going to be using here on main, we're going to be creating, no, it's going to be a timer. This timer will be called saving timer. The properties is going to be how to start because we wanted to start whenever it's existing. And the wait time is going to be one second. That's okay for me, saving every second seems reasonable. Let's set this node, the timeout is the signal that gets called whenever that second ends. So let's connect that signal to the main node, which we have on this scene. And now we have this timer, and here we have to do the saving code. So what is exactly the thing that we want to save here? We want to save the count, which is the variable that we are editing all the time. So instead of starting with zero, we want to start with the previous saved. So first of all, since we know that we're going to be saving all the count for now, but in the future we're going to be saving some other stuff. Let's prepare a little bit for the future and let's create a new variable, which is going to be data. It's going to be a dictionary. And inside there we're going to have our variable, which will be count equal to count. So right now we're creating just a variable which will contain our count. This is what we're doing here. Now we need the file, so we can start saving things. So our file equal to file new, this will create a file where you can save stuff. So file open, it's going to be our user. This is the folder where you save it. And now save that to the XT, whatever. So I use the XT because a lot of editors already have it. So if your user wants to go inside there and modify it or you want to do it, that's just easier. And then for the flags, you have the flag which is called file right. And that should be it. If you want to check on that, you remember you can press control and click on file and you have here all the information you need. For the flags, we have here right, which is number two. So you can use either two or right. Now that we have the file open, we can save the information inside. To do that, we use file store line, and we want to save our data. The problem with this is that our data is just a Godot dictionary. And that's not something that can be translated easily to text. So what we can do is transform it to JSON, which is very similar to what the dictionaries are, but a more general purpose way of saving dictionaries. You can usually use JSON files on websites, on signals like that. So it's a good standard. That way you can encode it to JSON and then you can decode it from JSON when you load it in the future. And after using any file always, you need to close them. So that way it will release it from the memory. If you don't close it, the file will still be being used all the time and it can lead to a lot of problems. I'm sure you already had that issue whenever you are trying to delete the file and you get the windows warning, like this file is being used, but you said like where? So that's probably because somebody forgot to close the file in some code. So this should create the file with the count inside of it and save it as a JSON information. But we also need to, every time we load the game, load this information. So let's use the ready function. And here inside we're gonna be opening a file, same as we did before. So file, new. And we're gonna have an extra step because we don't know exactly if the user is the first time that you do it or not. So we're gonna check if the file exists. So if file, file exists, and now we do the same user, save.txt. So this way we can check is the file actually there and if it is there, we will go ahead and open it. File, open, save.txt. And sorry, for flags, we want to read. That way it will allow us to read the file. Now we create the new variable, which is the data. Remember that this variable that we created here is nowhere else. So you have to create it, but to load it we have to now file, get line. Remember here we store a line, we save it and here we get it. But before we use that, we need to get it decoded from JSON. Fars, JSON to whatever the result is going to be. So this is gonna give us that information encoded. Here we decoded and now we have the variable data which has a variable inside of it, which is count and that's the variable that we want. So once we have that, we set the count, which is this one that we're making right now. It's going to be equal to whatever it is stored inside the data, so data count. That should be it, let's try it out for now. Let's hope it works because I did a lot of things without testing. So let's see, we have three. If I close it and I open it again, it should load and it has three over there again. That's great, now let's see, 18. We close it, nothing open, open it again and it's 18. Okay, the next thing that we're gonna have to be doing and we're gonna do that in the next tutorial is every one of these, now if I have like two auto clickers here it's gonna be augmenting it, but whenever I close it and we open it again, we don't save that. So we don't have to be saving those, all those, the price, how many auto clickers we have, how many units per second they generate, that information, we have to store everything in that zip file, that way we will continue doing that. That's it for today, I hope you were able to follow through. If you have any questions or anything, leave a comment below. I'm really happy to answer and help you with anything you might have, any question you might have. I also want to really thank my Patreons. I know that I haven't been uploading as much as I wanted but I'm back on track, I also, I'm preparing a bit of like a green screen and I'm really on top of everything just to make the videos better and make them easily. So yeah, that's it for now and see you guys next time. Bye.