Every UI Node Explained in 12 Minutes !

all right all right all right everybody Welcome Back part four of every single note with Ino explained today we're taking a look at every single UI note with Ino my next video is going to be every single note with inao in one video it's the big project I've been working towards this month so be sure to subscribe for that there's a lot we're going to talk about today so let's get into it hello it's editing lookie from the future here I wrote this whole script starting off with the control note and explaining every detail of the control note setting the control note is basically the note that all UI element inherit from but most of these settings you're never going to use and they're very boring to hear about so I didn't want to start off the video of this boring long essay about these complicated settings so I put the control note all the way at the end I'm first just going to list off every note like I usually do in these note videos and we're going to start with containers so we're working from the outside in container notes basically determine the layout of a UI and then the inside elements like buttons and text are after that and then all the way at the end of the video I'll explain the control node and all these complicated settings that every control node has all right let's get into it the the container node the container node is the base class of all different types of containers a container is a type of note that holds other nodes within it and determines how they are positioned the aspect ratio container the aspect ratio container is a type of container node that sets an aspect ratio so no matter what the resolution of your game is or how your UI is resized this container will keep its aspect ratio it's great for things like images or videos that need to be fully displayed the box container the vbox container and the hbox containers the vbox and the hbox containers are your br butter of most uis everything within these containers will be aligned horizontally or vertically most uis can be boiled down to vbox and hbox containers the center container the center container is super simple and super useful all the children within this container will be put perfectly in the center the flow containers the flow containers allow elements to be positioned in the same way that text would be positioned meaning it will put them from right to left until they reach the end of the container at which point it will create a new line underneath just like words in a sentence in a text box the grid container the grid container is kind of self-explanatory but it displays elements in a grid most used for things like inventories you can set the amount of colums in your container and the elements will be added in a text-like manner meaning from left to right and then onto a new line the HS split and the vs split container the split container allows you to split your view with this little handle in between the Gau editors build up of these split containers a lot of software is build up like this yeah might be very useful if you want to display a lot of data the margin container this container allows you to add custom spacing to your elements very simple and by the way the settings for this container are in the team overwrite they're not in the noes property but yeah down there kind of confusing but yeah panel container the panel container is a very basic container uh it's basically the base container but it has a little background like a panel can be used for grouping things together visually the scroll container the scroll container creates a container that can be scrolled using the mouse wheel they can be scrolled horizontally and vertically but please take note that there's only supposed to be one other container within the scroll container container meaning that you'll need to add a v box or an hbox and then add your elements within there for the scroll container to work properly the tab container the tab container will set up this tab based system all the elements within the tab container will get their own tab so again it's meant to be used with other containers within the tab container uh the tabs can be accessed here at the top and they'll get the name of the note uh that is in the tab container so those are all the containers by combining these containers and putting containers within containers you'll be able to create almost any layout you can take think of now we're going to get into the elements that you're going to put inside of these containers the label the label is the basic text display of gdau it allows you to display a single line of text or whole paragraphs the rich text label the rich text label is almost the same as the label note only it allows for things like bold text a t text and other text highlighting using these tags the color wct the color wct is just that it's a rectangle that you can set a color to it's great for backgrounds or just blocking out UI the texture direct it's basically the same as the color direct only instead of a color it displays an an image the video stream player the video stream player allows the user to view video within your UI the separator the age separator and the vew separators these are just little Lines within your elements you know they're also used a lot in text documents just these lines to separate certain parts yeah very simple the panel the panel is basically the background component of the panel container I don't recommend using the panel on its own it's better to be used with the panel container but in case you just need a panel like a random loose panel you can use it here the nine patch wed these are actually very nice the nine patch wct allows you to set up a responsive texture it basically keeps the corners of the texture intact and then stretches the sides and the center to match the panels width and height now we're going to get into input elements I'd quickly like to explain how you use these uh every input element has a signal meaning that if you go to the inspector to the Noe tab right here then you can see all its signals so basically all different types of input and by double clicking them you can connect them to any script you want in these scripts they will then create a function that is called when you're using the input very simple the base button the button and the textured button these are all your basic buttons they do what you expect the base button is sted using a team or its team overwrite and a textured button can be given a custom texture these are great for like your special big play now buttons the link button this is just another basic button but it is styled like a link meaning the text is in bold and it's underlines how you would see links in a web page for example the checkbox and the check button these are toggle buttons meaning that they can be on or off and they will retain their state great for binary settings the menu button but the menu button opens a little menu and pressed you can build your menu here within these parameters the option button the option button opens this little drop- down selector the item chosen within this drop down becomes the current item you have seen this type of button used for things like resolution selection within games the Color Picker button the Color Picker button opens this little Color Picker menu you can select the color it's all very straightforward the line edit the line edit is a single line text field it's got properties for formatting and max length and it also property for rendering it as a secret for things like passwords the text edit and the code edit the text edit and the code edit are both input text Fields meaning they allow for multiple lines of text the code edit is actually kind of insane it's got a whole setup for setting up code completion gutters line numbering setting break points it's basically the build-in code editor of gdau range the following notes are all range notes meaning they're used to display or take input of a value within a range the progress bar and the textured progress bar these are super straightforward progress bars are used a lot in video games for things like loading bars and health bars the spin box spin boxes are these little number input Fields with have the arrows next to them allowing you to increase and decrease the value by clicking the little arrows the scroll bar the H scroll bar and the V scroll bar these are the scroll bars at the sides of the scroll container in case you're building some crazy custom UI and you want to add your own functionality to these loose scroll bars you can add them in most cases however you're just going to want to use the scrollable container and not these loose scroll bars the slider the H slider and a v slider these are your sliders allowing you to grab the handle and select the value within a range very simple the item list the item list allows you to create a clickable menu of items that again can be created here within the expector it's basically the menu of the menu button without having to click a button to open it the menu bar the menu bar allows you to set up a row of drop- down menus you will need to use popup menu notes uh for every drop down within the menu bar and it can be populated the same way as the menu button or the item list the tab bar the tab bar is basically the top of the tab container in case you want to build your own functionality and just have the tab bar instead of the whole container you can use that here the reference rect the reference rect is a debugging note it just renders a wct in the editor and can be useful for positioning notes uh within empty space the tree the tree node renders a tree the same way the hierarchy of your scene is rendered great for displaying branching data like complicated quest lines or something the graph node and the graph edit the graph node and a graph edit can be used to set up and render graphs however they're going to get a big overhaul in the coming updates so I would not recommend learning them now but instead holding off until the new updates to learn new ones and finally the touchscreen button all of gd's UI elements work with a touchcreen by default but in case you want to map actions like in your input map to unscreen buttons you can do that with the touchscreen button the control note this is like I said before the base note of all UI notes everything inherits from this node and it's got a lot of parameters uh a lot of these you're never going to touch and you should never touch but I'm just going to explain them anyway so you'll know everything about every note at the end of this video clip contents this parameter determines whether UI notes within this notes will be cut off when they're outside of the note meaning that if a text overflows outside of its text box for example it will be cut off or you can still see it out of bounds custom minimum size this parameter sets a minimum size for your UI Element no matter what the element will never be smaller than the size set here layout Direction This determines whether the elements within this element are aligned from left to right or from right to left it also contains a setting for copying whatever its parent has for a layout direction or based on the current localization layout mode this parameter determines whether the node's location is set with a hardcoded X and Y value or by its anchors Now setting a UI El position by a hardcoded X and Y value can be useful in some rare cases but 99% of the time you want to set this to Anchored mode anchored mode allows your elements to be resized and repositioned based on the viewport size making them responsive so a lot of the times you're going to want to use this but in case you're making some Jam game that only is going to run at one resolution you might want to set your elements hardcoded now you can set your layout mode and anchor type within this menu here but a way easier option is to use the little menu at the top of the UI right here the transform here you can find your size position rotation and scale of your elements you can tweak these settings by hand but once you're using the anchor system these values will be set automatically and you can touch them or you won't need to touch them localization these parameters can be set if you want the text with in your element to be translated to another language you have set up in your game the tool tip the tool tip is the little message that pops up when you're hovering your mouse over an element you can set this in the parameter here focus a UI element's Focus basically means it's selected in wellmade uis you can navigate between buttons and inputs using tab or the arrow keys in this parameter you can set up the notes neighbors meaning what element should be focused next when you press the tab key or what the next focused element should be when you press the up or the down key when you're building a game for a PC and you're using the mouse it's not necessary to have a good Focus layout but it's very easy to set up and once you have it set up you gain instant control support because with a controller you can navigate focus of a UI the mouse the filter and force pass scroll events are a bit complicated and in 99% of the cases you will not need to change them but I'll go over them real quick the filter determines how the note handles Mouse input signals by default it is set to stop meaning that if you click on an element the mouse click stops there and the click doesn't go through to the elements underneath it you can also set it to pass meaning that your click will go through this elements and click on something underneath the elements but like I said in 99% of the cases you just want your mouse to stop on the the element that it clicked on and not go through it then the force pass scroll event is there because we want to make an exception for this behavior when scrolling your mouse wheel because if you're scrolling and you're hovering over a button you do not want that scroll event to stop at the button you want it to go through to the scrollable list so that the list can scroll don't worry if these last two don't make any sense to you the default settings are what you're going to need for most UI cases the last parameter in the mouse category is surprisingly very simple it's the cursor shape so you can have like the little loading icon or like the canceled icon or all the different Mouse pointers you can set whatever you want up in here the input this one only contains one parameter the shortcut context uh in gdau you can set shortcuts for buttons so for example contrl Z would be an undo button somewhere on your screen and within here you can set an element that needs to be in focus for this short cut to work so for example if you need to be focused on your main window when pressing contrl C or contrl V you can select the main window here so you don't copy and paste everywhere at once I think this setting is more used for like software or like really complicated uis and not that much in game development but yeah that's what it means team teams are just that they allow you to create custom UI teams by creating one right here and then in the team menu right here you can pick a new element with the little picker and change all its styling options however you don't need to build a completely custom team for every type of styling that you want to do as every element also contains team overrides meaning that in the inspector here you can set its own parameters so without a complete theme just for this button or just this text label however if you're planning to build a bigger UI system building a complete custom team can be a great all-in-one solution all right so that were all the UI notes with Ino I know the end part was a bit boring and long that's why I shifted the whole video at the end but yeah thank you guys so much for watching thank you guys so much for all the support on this uh Series so far next video is going to be the big one hope you guys subscribe and until then [Music] bye

Channel: Lukky

Views: 40,645

Keywords: godot, godot4.0, godot 4.0 stable, godot4.1, godot 4.1 stable, 2023, godot release, new, tutorial, getting started, start, learn, course, godot engine, gaming, learning, godot 3d, first person, godot game, gamedev, devlog, free, unity to godot, godot tutorials, gettings started, fps, nodes, every node explained, every node in godot, all nodes, nodes 3d, physics, visuals, ui, godot ui, settings menu, save menu, godot menu, ui nodes, game menu tutorial

Id: sPfoZy-cW-E

Length: 12min 55sec (775 seconds)

Published: Wed Nov 15 2023