 Someone requested me to create a portal-less window. If you see here you have the program when I run it you see here the windows border and sometimes it can be ugly maybe you want a more minimalistic program so let's create a portal-less windows and let's style it so that we can have the same features that we have here. First let's go and make some room for this okay I'm gonna select everything let's move it down a bit because we want some room for the toolbar okay yeah actually this is starting to look clunky we're gonna have to do another video on how to properly size these things okay but for now let's go and on the project settings on window we have here the borderless section we can activate it and when I play the program you see like it doesn't have any let's move this some other way let's open the code okay so you can see it better so I don't have any border here but I cannot move it because Godot doesn't like give you any options to it and you can only close it from the terminal or from here from the stop button so let's create now a control node that will allow us to move it around let's see let's create a node a control node okay this is gonna be our toolbar our like menu or whatever you call it let's set it to the right size over there yeah since we don't have resizing on this window I'm doing everything manual but otherwise remember you can stick on the you know like this kind of properties let's do it like this okay this is our tool bar okay now let's call it title bar and let's start with some code title bar that GT okay and let's do it everything I don't know if you guys prefer me to show you the last version of the script or go with me as I code it you can leave that you can leave a comment telling me if you prefer me to have everything ready from before and show you why how it's done or if you want me to go line by line but let's go it let's do it all school like the other videos okay now we will need the signal from here from this node which is the GUI input and it will give me the input event this will capture everything that can be considered like an input that's connected with this title bar and as you can see like we get this let's print it out so you can see maybe we have a surprise here as you can see on the output we get the mouse motion when I click I get the mouse click and everything related to this so we can we're gonna capture this information to make the window move now that we have the event let's create a global variable which is gonna be following which is gonna be set to false this will be checking every time if we want the window to follow the mouse or not and also we will need the dragging start position just gonna be a vector 2 but it's gonna be empty for now okay now we check the event and we check that it is an input event mouse button so we are only checking for any mouse button you see here we have the input event mouse motion that means that means that this event also triggers all the time when I'm moving the mouse so I don't want to use that for now I want to get that it is a mouse button and once we check that it is the like the event is a mouse button we want to check that is the mouse button number one we only want the left click to move windows and not the right click that's how they usually work on any other window so event we can get put an index this will give us from this event like what button index it is and we want to check it that is the first one now following I want to set it to true and the thing is that when I press when I keep pressing it's gonna be one event and when I release it is gonna be another event so here it would be nice to have a toggle that means that if it following is true let's set it to false and if and if it is false let's say to true you can do that in almost any programming language by doing the this is the opposite of what you have so if it's true let's say to false and if it's false let's say to true this is always going to be following the click down and click up and let's capture the drag in position which is gonna be the local mouse position I'm going to explain you why we need this later on on every step we want to now move the window let's go ahead and do the underscore on the delta that way the debugger is not gonna tell us that we're not using this I'm doing this on the process because when I tried doing this moving of the window inside this event it had some weird weird bugs but yeah I think this is the best way now I want to check on every step if we are following remember like this variable is global so we can check it everywhere and now let's set the window position and let's get the current position now let's get the global mouse position and let's remove the dragging start position okay this is a little bit confusing but basically when you click on an element you get the relative position to this corner because this is what Godot sees so what I'm doing is basically like moving the window relative to the point to where you click so if I click here I need to move the window from this position so that means that I need to also take into account like the X and Y position of the mouse so I don't imagine if I don't do that when I press here on the window and I start moving it this point will automatically jump to my mouse position and go if you do it like this it will only follow relative to where you click it let's try it out and yeah I can move the window now and it's very smooth actually so yeah now that we have this let's add the rest of the functionalities what do we need we need a close button and minimize so let's go ahead and create a node button yeah we want it to be an X you know I you can create icons for it let's move it inside this and let's put it on the top right you can create icons for this but I'm gonna use the keys because it's easier right now and let's make it flat so it looks like like that now let's call it close button let's connect the pressed signal to the title bar and now on the title bar we can just go ahead and get three and quit this is how you close your game from code I get three we'll get the top node and that top node has a function which is called quit that will close your game and let's try it out I can drag and drop and if I press here the game closes okay pretty simple for now let's create another button let's call this in my button let's use the underscore key to show it let's place it like this again like you should be using this but since we are not resizing this window it's okay we should be fine like that let's do it flat connect the press signal to our title bar and now we need to set window minimize to true pretty straightforward let's try it out okay we can move we can minimize yeah we have the focus there so that means that you can access it with the keys I think you can change that but I think that for now it's okay if they want to use the keyboard only I think that's all maybe we can do a different color on the background so you can see better where it is and I'm gonna use that to teach you another thing let's add a child node which is going to be a color wrecked let's going to be a full wrecked it's gonna be covering everything let's set the color a little bit brighter or darker no brighter is I think it's okay something like that maybe it's too much but it's okay let's make this a little bit smaller okay like that and let's move it behind all these buttons so we can see them again like they should be better to be done in a different way but okay so now that we have it let's try it out the first things you will notice is that you cannot move it and why is that and that's something that like to me so long the beginning the title bar is the background after this color wrecked and all the control nodes have a mouse section which has a filter that basically tells Godot what is going to do with the mouse input so basically if you have a note covering something the mouse click will stop at the first thing it touches so since we have a color wrecked here and I click here it will touch this but the mouse input will now go to this node that is behind it you can change that here on the filter you can set it to pass ignore or stop since we don't have any actions here we don't really need the pass we can do the ignore even but I think pass is safer and now that we have the pass it will not stop the mouse input to go to the title bar so let's try it out yeah it is working okay so this prevents you from having notes covering other stuff that is not supposed to be visible or for you know ordering the notes but yeah it's a little bit hidden and I don't think that stop should be the default on most of the notes but it is like that on the control nodes so it's something to take into account when you go into a project so I think we achieved our goal we can move the window around we can minimize closest and I think it looks more Godot you know like this will be the same style in all the operating system so if you are on Linux or Mac you might want to change you know the icons here you can do so you can do that the same way as we did it here like checking for the current OS getting the host name and depending on which OS it is you set different icons so it they match the styles of those operating systems you can save this node to reuse in any other projects so if you have any other application you can come here and download this node I just plug in next steps to add would be a resize function so we can actually resize the windows but yeah that is all for today remember that I have a patreon so if you want to support me you can do that in there and if you want me to cover anything else just leave me a comment I'm very very very grateful for all the views the subscribes and the likes so I want to thank you once again and see you next time