Hello and welcome to another episode in the Godot basics tutorial series. In this episode we will be taking a look at. Buttons. Why exactly do we need buttons. Well for one thing buttons are great when we need to have passable UI items. Think about the main menu screen the pause menu screen and perhaps even a back button on your credits screen. Before we get into buttons let's take a quick look at these states of clickable UI items in general. So in the middle we have a new item it's a clickable UI item. And generally there are many states. However I just want to introduce six general states. You may find with UI items the most common one is the default state. And what that means is when your UI item for example your button item is not doing anything it will show this default state and that could just be a simple primary color for example blue necks.

And this is probably one you're most familiar with is the active state. For example when you click your blue item again blue being the default state or rather the default color for your default state when you click on your button your clickable UI item changes from the default state into the active state. Another way to think of the active state is the clickable or pressed state. In many cases the color will turn into a darker shade of the color set to the default state. Another clickable state you may be familiar with is the disabled state. Disabled means that the clickable UI item does not in fact do anything. In many cases the color for a disabled state for your UI item is normally Gray. The next state is the hover state however just means that your is over the UI element and to let the user know that the user can potentially click on the UI element. In most cases the hover state is just the brighter color of the default state. The next state is the focus state and all the focus state really means is that the user has already clicked on your UI element. The color varies for the focused state. You'll find that most people will set the focus color to purple but that is not always the case. The last state I want to introduce to you in clickable UI elements is the loading state. When you click a button you are expecting something back perhaps changing a page while some buttons allow you to set a loading animation inside the button for example or other UI elements that let the user know that the application is in fact doing something and is just simply letting the user know that it needs to wait.

Now the button node is just basically the Button class it has its own sets of properties and methods and the Button class inherits from the base Button class which inherits from the Control class meaning that the Button class is in fact a UI element. Keep in mind that the Control class also inherits from the canvas item class and most importantly even though I graded out the button does in fact inherit from the node class which means that we get the basic script life cycles on top of an additional script life cycle given to us by the Button class. Now the button node is a great way to prototype UI elements for your game. The button node comes with five states. The First State is the hover state. The next state is pressed also known as active state. It also comes with the focused state. A disabled state and a normal state. Keep in mind that the normal state is what Godot uses and it refers to the default state for your button UI element. Now the button node comes with a few available properties we are able to edit directly in the inspector.

The first is text and I said its value to click me and all it does is it displays the text in the center of the button on both the x and y horizontal axis. We also have an icon property which takes any a texture value. For example you could just drag and drop the icon PMG file right here and it would in fact show that pin gene inside your button. Now the aligned property just lets you know where in fact you want your text to be centered and by default it has center. However you can set its value to left or right alignment and the last does expand icon. By By default it it's set to false. Moreover if you set this to true what you'll find is that your icon if you set an icon will expand or shrink based on the size of your button. Next you have custom styles. And again you're given five different states hover pressed focus disabled and normal and by default it's set to empty. However they take in a child of the style box class. So this is a basic example of a button you can see that the Texas centered in the middle because we had the line center I set the text to click me and so that is what is displayed on top of the button.

By default the color you're given is a grayish looking color. When you press on it it will darken. Now what if you want to change the colors. Well you need to pick a style box class that you would like to add to an individual state for your button. In this case we selected hover and it gives us four options. The first option which is style box empty basically does nothing it's just an empty style box and that's literally it. Now most likely you just want to change the color or add color to the borders or add colors and the border along with shadow onto your button and to do that you're going to pick the style box flapped class and that will give you all the features and functionalities of the style box flight class that will give your button whatever color you'd like to give it. The next one is the style box line and all that does is either add a line on the X horizontal axis or the Y horizontal axis. You may want to use that when you want to create line separators. And the last one is the style box texture which just takes in a texture value. For example you could add an image here and what that does is it expands your texture to fit all four corners of your button giving our button a specific color is great and all but in most cases we would like our button to do something. For example we may want to get information on the state of our buttons. Well in order to get the state of our buttons we need to access properties and methods available to us in the base Button class. Now with a script attach we can get the following through properties and methods. The most important one is the pressed method which happens to be a virtual method. That means that every time our button is pressed whatever code is inside the pressed virtual method will run the next method is the is hovered method and all that does is lets you know if your user has their mouse on top of the button.

We can also change the disabled property by setting its value to either true or false and we can also retrieve whether a button has been pressed through the press property. The most important thing about the base button is it provides us with three signals button down button up and pressed. In most cases you may want to end up using the pressed signal. By the way we're going to take a better look at this in the next step aside. Now what if we want to use images for our buttons. Well Gordo offers us the texture button node and texture button as a child of the base button. So we get all the functionality and features of the base button which includes the virtual pressed method on top of that we also inherit from node which means we get all the basic script life cycles as well. Something to keep in mind and texture buttons are great when you want to have amazing looking buttons for example when you want to hire an artist to create you a custom looking button and the texture button known gives us five different states for a button. They would include the hover pressed focus disabled and normal state.

So basically the same five states we had for the button node we have for the texture button node however the difference is the button node. We had to set our states with a style box or rather a child of the style box class whereas the texture button node needs to take in a texture for each individual state. And as you can see here we have our five different states and our textures class. If you look at the inspect during Godot and they would include normal press hover disabled and focus and by default they're set to empty. But you need to drag and drop your texture file in order to represent what the button will look like based on its individual state. Now in the next episode we're gonna take a look at code using buttons to do or rather perform some action. Well that's all I have for you in this episode. Thank you so much for joining me. Thank you for clicking the Like button and thank you for clicking the Subscribe button. If you have any questions or comments please feel free to leave them in the comments section down below. I look forward to seeing you in the next episode. Have an amazing day