 Hello again and welcome to part 4. Let's go and fix one of the main issues with this program right now. We have everything in place here and it looks nice on the editor. If we try it, you know, we see here the text and everything that's like as we expected. But as soon as we resize this we notice that the text box is not following the screen. Why is that? It's because the window resizing is changing the viewport that what we can see from here from our scene. And right now the values on this box is set globally, like it doesn't have any awareness of where the parent control is or what the camera is. We can see here the small blue box thingy here, it's marking where the camera is with the initial resolution, which we can also change from here on the settings window. Here we can change the size, the default one. We can also select if we want to resize our other screen options. Going back to this example, how would you go and modify this so it always follows the camera or the windows size? To do that you can on any green node that you see here, when you select it, you have this layout option over here. When you press on here on the layout you have a lot of options on where you are going to place this relative to its parent. Right now, if we see here the control, the control node is set by default to full rect. That means that it will always occupy the max size of the screen, so it will be always full screen. So, we want that for our text edit node as well. Let's try it out. We go to layout, we go to full screen. And of course, you notice the first problem here is that if we make it full screen, it's going to be over those buttons and we don't really want that. But let's try it out for now. Let's see. If we resize this, it resizes as well the rest. Let's go ahead and open a document like this one. And we can see that, yeah, we see the scroll value everywhere and it's always full screen which is what we want from a text editor. So now, let's add some margins to this to make it look kind of similar to what we had before. If you see here on the inspector, when you select one of the control elements, you have the properties and if you were not aware of this, you have the individual text edit properties here and then the control properties here. All the nodes that are green will have this control section because it means that the control node is apparent so they inherit all those options. So if we select the label, we have the label settings and the control settings. So let's go back to our text edit. What we want to do now is add margins and we can select them here from the control margin settings. And if you've been working on web development, you know how margins work, but you're gonna get a surprise because what you expect to happen is that when you select the top margin, which is this margin from here, that if you add that number is gonna go there. The same you expect from this side, which is if you add the left margin, all the content is gonna go there. So you assume that from the right, you're gonna get the right margin going there and from bottom, you get the bottom margin going there. Sorry for my amazing drawings, but what happens actually in Godot is that everything goes only to the left or to the bottom. So the top margin, if you add a number is gonna go down and the same is gonna happen for the bottom and with the left and the right margins is gonna do the same. So let's go and modify it so you can see it. If we add here 40, for example, it's a nice number, like more similar to what we had before, but if we add 40 to the bottom, it goes outside of the view. So here in bottom, since we know it's gonna go to the other direction, we just add a negative number, for instance, minus 10. So we get a minus 10 gap there. With the left, let's do a 10 as well and the right, let's do a 10, nope, minus 10. So it's a bit confusing, but okay, we have this element occupying the entire screen with the margins. Let's go and try it out, we see it and yeah, it grows and gets smaller as we resize the screen. Okay, of course, this is only one of the layout options you have. You have many of them and they have a few asterisks, a few things that you have to take into account. Let's create a new scene so we can play a little bit around with those. Okay, so I created a new scene, an empty scene, let's gonna add, let's see, let's gonna add a panel, okay, we have our panel here, which is just an empty container. And let's try it out. If we set the layout on the center, it's gonna keep the size and when I resize, let me save this, play ground, okay. When we resize it, it's gonna be always in the center. This is very useful if you want to do something like, I don't know, like a name on a 3D game, things like that, I don't know, you get that position. Same is gonna happen if you get the corners, you know, again, you can combine the corners with the margin. So if we get on the margin 10, you see that we're gonna get this size. Right now the numbers are weird because I resized it, but yeah, don't worry about that, you're gonna see it when you are moving these elements. Then we can do, yeah, center bottom, all the directions. And with these ones, I had a lot of features before because with contents like this that they don't have any content inside, so it's just an empty box. If we select those options, you see like, so if you do it with an element like this, it's gonna get to zero because there's no content in it. But with other elements, for instance, if we get a label, and let's say we want to say hello world on this label, we can set the layout to the left and it's gonna be the minimum width, which I think it's set from here, the mean size. You can set it like for elements like this one. Let's try it out. Rect minimum size 100 and 100, that's gonna be the minimum. Let's try it. Yes, I cannot make it smaller. Now let's use it as layout on the left, yeah, and we get it there on the rise or the bottom which again, the bottom goes out of the screen, not ideal, anyway. You can play around with those things, you can try them out. It's kind of complicated to explain, it's better for you to try it. Just create one of the elements that you want and start playing with those. And some other notes that I recommend you to explore as well are the containers because when you have a container, you can start organizing things and also use the layout functions to those. So for instance, we want to have here the label, hello world, and we're gonna have another label which is gonna be goodbye. And this container is always gonna keep them as one inside. If you see like one in the size, like you see like when I try to move them, it is not letting me move it. So here you can have the alignment for those elements, it's gonna be always in the center but they are all separated like that, let's duplicate it, say here test, bye, okay. So it's like a grid with columns. So you can group different elements inside that space. Let's add a button, just a regular one, the order of course, yay, okay. So as you can see, the button also grows depending on the size but yeah, this is how you can use the box containers and you can combine the box containers with the layout positions and you can do all the good stuff that you want to. If you want to have floating UI, this also works for video games like it's not only for programs for the UI of the game, it's very useful. So yeah, I encourage you to play with all those variables. There are so many to cover but it's very hard to explain if you don't have any goal and I don't plan on making a very complicated UI for the text editor. Right now what we have is I think enough for a simple program and yeah. Maybe I think that I would like to add, it's just a background color. You can change the background of all the scenes from the project settings and then you go to rendering environment, here you can select the clear color, which can be whatever you want to. Let's do white for now, oh that's too much, I don't know how people can get the white but yeah. Or you can also use another element, let's create a new child which is the color rectangle, which is just an empty color rectangle. Let's set this to, I don't know, let's get the color from the text editor and make it a little bit brighter and bluish, yeah, something like that. Now we want this to be of course full size and the order is going to be the first node so it's behind everything and we get a nice background color for our app which is looking better already. What I'm gonna do now is refactor a little bit the code and add some shortcuts. If you want to, you know, get shortcuts on those elements, I spent some time researching how to do that because the documentation is not well written and there are no examples online that I could find so yeah, there's probably a better way to do it but this is the only way I've found. Let's go to the code. Let's try to add an action to the quit event, you know, like here you have like the control queue and you see you have here the shortcut information, let's do the same here. So to do that, we need to create a new shortcut and an input event key. There are different options that you can set from here. The first one is what key is going to be, you know, that the main key for instance here is the O, here's the S, here's the W, so how to get those keys? Well, you get the input event key instance that we created and set scan code, it's not even in the autocomplete but okay. Now here you can use a number but they are all stored if you search on the documentation on the global scope, here you have all the keys for the scan codes, like for instance, let's say we want the key, the queue, it's very simple, let's see, it's just key underscore and the name of the letter and it says here that the number, so you could either use the number or the variable name, this time we want the key, queue. So that means that this shortcut is going to be triggered with queue and now we want to also check for the control key, okay. Now we need to set the shortcut and this is like the confusing part because you have to set the shortcut to the input event key. So now when you apply this shortcut, it's going to check for the key queue and the control key at the same time. Now that we have everything, let's add it to this item and you can access the menu button file as we did before. Now we need the index, 0, 1, 2, 3, 4. Now what's the shortcut that we want to apply? The one we created, so we can type shortcut which is this variable right here and now if you want it to be global or not, that means that if you want to be able to execute that from anywhere or not, since it's the quit one, yes, we want it to be global. So let's try it out. There's a bug here, okay, I want you to know before but so you can see the quit the label disappears when you apply one of these and I believe this is a problem with the layout of the theme that we are using, so we're going to try to fix that in a later episode. So this shouldn't happen but it is happening on the current version. Let's try it out, let's press control queue and yeah, it is executing that command. Of course, we're not going to be creating one of these for each of those like this. It would be better to wrap all this inside a function and apply the shortcuts for each action in a different function call but we're going to leave it like this for now. When you start seeing in your code that you have the same line over and over and over again but only with one element that is different, that means that you're doing something weird. In this case, we can make a loop for I in and I got them already done. I don't want to bore you typing. So this is basically an array with all the actions and now we can get instead of typing it all the time, we just use the I. I guess you already know how to use for loops. Otherwise, you can, there are so many tutorials about it but yeah. So this looks cleaner already because I have them all in two lines instead of so many. Let's go and do the same with the help and another thing I'd like to do is to create the signals I will add them together. So since they are the same almost okay. We should really move this to a different function. So let's go ahead and so we can do instead of doing this like set the shortcut here, I can do key Q. This means that I'm gonna send this as a key. The key is gonna be the scan code. We're gonna return the shortcut which is gonna get applied to this and this should work. Let's try it out. Yeah, I can see it there. I can press current. Okay. Okay, how to make this even better. We can for sure improve this loop and add the shortcuts to those. So instead of having just an array, we can have a dictionary with values and different shortcuts and names but since I want to fix first that bar, I want to make sure that it's not something I did. We're gonna do that another day. For now, we can keep it like this. And as we'll suggest this here on this comment, I should replace these ellipses when they start to get big with the match statement and which is like a switch if you've used JavaScript or Game Maker maybe or other languages as well. And yeah, it's gonna keep it cleaner instead of having the item name. Item name since we're always checking the same variable, we can use the match. So this should look something like this. Okay, this should be it and it looks much cleaner. Let's see if they work. Open, yeah, save as, yes, I get the save as new file, new file. Okay, I could do the same here, but since there are only two, I'm just gonna keep it simple for now, but you get the idea. It's a nicer implementation. Okay, another place where I could find some errors is here in the entitled. If I'm typing this like several times and I'm using it to check as an empty file, let's create that in a separate value, which is gonna be a constant called entitled. That way, I will make sure that I don't make the mistake of writing it differently everywhere I have it. Okay, let's check if I'm doing this and I want to save. It's giving me that, so it's basically working. That's a quick test. I think that's it, but by reading everything, now I notice that this here really doesn't do anything because we don't want to update that. And honestly, if I keep doing things, this video is gonna get too long, and I don't want to make super long videos for now. But on the next one, I'm gonna be covering the style, like how to make a new theme and change the fonts, the sizes, and colors of all the elements. Thank you very much, everyone, for commenting. I keep making videos about this topic, and if there's anything in particular that you want me to cover, just leave a comment. I use it already requested a save state to check before opening new files, things like that, but I'm not sure if I'm gonna add it on this tutorial because it doesn't touch anything with the UI. I want to keep these tutorials mostly for the UI elements that you might need for a program. I won't keep you here any longer. Thank you, and if you want to download the code of the project, I have a Patreon page where I will be posting all the versions there, and otherwise, I'm sure you can just recreate it by hand in no time. But yeah, just if you want to help me make more videos like this one, I would really appreciate it. Okay, leave you here with the end cards. Bye!