 Okay, so we have our title bar from the previous episode, if you haven't watched it you can follow the link in the description, now let's improve this a little bit, instead of having everything here on signals and with text instead of the icons, I did here quickly some vectors with the images so I can export them, get them into Godot, they have a transparent background but since I'm working with white I wanted to have something, this program is Figma, it's free to use but it's not open source, so yeah I'm not gonna go into making icons, you can probably download them from any place as well but they are quite simple, so I exported those and save them here and Godot as PNGs, so now for our buttons, instead of going with the text let's go with the close for the close one and minimize, let's remove the text, let's load an icon, minimize okay we have these two buttons now, so since we want them to be always on this corner and organize, we can create one of the control nodes which is container box container and H horizontal box container, this will have them all very tidy and organized in the corner for us, so okay let's see, let's put this close one inside and minimize inside, okay so we have them now, the order of the buttons is gonna be the order of this list so if you are you know on mac and you want to have them on this side you can change the order but yeah, okay so now that we have this element let's make it as small as possible which is going to respect the size of those buttons and now as a layout let's anchor it in the top right corner, so we have now the buttons there and I think it's a bit better organized, okay so this is a pair bones toolbar you know like how we have it and let's say we want to change the color for this for this toolbar in the future and we want to reuse it, so what would be a way of making it, what we can do on any script is create some variables that will be editable from the inspector itself, the same way you can change the color from here or you add the alignment from here you can create your own as well basically you need to type the name of the variable that you want to say background color and now how the default value is going to be let's make it black and now we have this variable so to expose this to the inspector you can export at the beginning and in parenthesis you need to add the type of variable that is going to be this in this case gonna be a color so now that we have this if we save it and we select our title bar we see that we have this variable here this is great for making tools for other programmers on the team or if you want to keep things easier to manage for instance this title bar now is an entire scene and when I'm on a program and I use this title bar and I included you have this value here so if I modify it and I want to go back to the default I can do it from there and you can have different properties without modifying the main scene now that we have this new background color setting let's do that every time that we modify it the color node that we have here the correct color is going to be equal to the background that we selected okay so let's say we want the color to be green and let's try it out yeah it's green but it's not very useful when you are working with an editor like this and you don't see like the changes happening how can we make those changes to happen instantly well to do that you can add at the beginning of your script the word tool and once you add this this word tool this will expose all this code to the editor so this is the editor it will run here as well as on the game so now let's create a function that updates that for every time you change it do that doing the set get and now you name a new function which is going to be update background so in this new function we are gonna get a value which is this one is gonna be sent as the first argument so let's go ahead and modify the variable that we have saved to the value that we set on the editor and now we can do the color right color equal to the background color we can remove this now and we save it so now that when we are here we can see the changes happening already and if I modify this value you see it changing as well on the editor this is great for when you want to customize different elements so you don't have to touch the children so okay so let's go back to default one okay we have now a selector for the color and let's start doing something that we couldn't do in our previous video which is the maximize function let's add a new button here that will enable us to maximize it let's create a button inside here we can actually clone this one with control d i duplicated let's call it maximize button let's go ahead and do the anchor again top right okay let's set the icon now title bar icons maximize okay and we want to disconnect this one and create a new one new signal on the title bar on maximize button press so there is already a function in the os window maximize you see here if you want to check the documentation of of anything you can press control like I did press click and now here we can go to control here window maximize and we see here is window maximize set window maximized okay so we can use this function from the os class so os set maximize true so when we press that we should be maximizing it oh set window maximized sorry my bad okay now it should work let's go and yeah we get it maximized problem is we cannot change these values and there's a lot of cases that we need to update so let's go to restore the value we have the is windows maximized function so let's use this one to test it out and to toggle it oh if it's maximized let's set it to true sorry forgot the os here okay else we set it to false so this way like you will check and if it is maximized sorry let's check it false and if it is not let's go let's try it out pick small big small yay it is working okay problem is I am think that the screen recorder is not liking this because it's detecting the window as maximized so apologies for that but it is working as intended I just have a problem with my screen recorder okay next thing we want to do is to update the icon so we select the let's rename this one let's rename it to buttons okay that should work let's also remove the button side from it since we know everything inside here will be buttons okay this looks cleaner okay so now let's select from the buttons the maximized one and the icon is gonna be if it is false which means that it's a default one we want to show this one and otherwise maximized icon let's gonna show the restore one let's see okay sorry I forgot we need to load this before doing that that way you're telling uh got out to load it as a resource because since it is an image you need to get it there okay and maximize it okay oh the screen recorder is getting it right now that's great apologies again for the problem so now we have the maximize the minimize and the close what else do we need well on every good title bar we want a label with the name of the program so let's add a label here which is gonna be my title bar and let's make this the entire size vertical line to center let's add some room there and since it's in the top left corner we don't need to do much more we have the title bar there okay so if we are using this on a regular program let's pretend this is my program and you're using the title bar as a separate instance you can either have editable children or let's continue making this a tool so let's create another export variable which is gonna be a string gonna be the title the default is gonna be my program my title bar and set get update title let's create now this function with a value and select the label which we're gonna call title here title label so it's more precise so title label text is gonna be equal to the value and and the title is gonna be equal to the value as well let's see so now we have here my title bar yay okay let's go back to the default okay so this is the one we have as a custom scene and on our serious business program we can go here and say this is the welcome screen and we can set the color for it because we want to have here a red title bar for some reason okay next potential thing that you can add is an icon as we have which is gonna be just an image and on the next episode we're gonna see how to do the resizing of the window right now this custom window doesn't have any resizing except for the maximizing and we want to change that I want to make a shout out to the rocky dude who posted on reddit and he built an awesome title bar so you can see here and it's great so if you have any creation you want me to display on my videos I would love to it's great to see what you guys are making in godot so if you want to send me something I'm really really excited to see it so you can see he was able to add also the icon and everything which is nice let's hope that our next tutorial helps him complete the entire thing and we get the maximized and the resizing there and I would like to thank everyone for the comments and if you have any suggestion to any others that you would like me to cover write it on the comments I would like to thank my patreons it's awesome to have your support and see you guys next time