Hello and welcome to another episode in the Godot basics tutorial series. In this episode we will be taking a visual look at the Button node. So on the scene tree we have a node2D and we have a button as a child node. Notice here that the button node is in fact a type of control node. However it is not attached to a parent control node in order to use those benefits we get from margin and anchor because in this episode I just want to take a look at the button node only. Now over here we have our button. Nothing too special about it it's just the regular stock button that comes with Godot. And to do that you just click the plus button type in button you're gonna get a button from the control node notice how we have other options for buttons. But in this episode I just want to take a look at the standard button. You can go ahead press create and voila we've got our button. I'm gonna go ahead and delete this. Now that we know how to add a button to the scene let's go ahead and take a quick look at the features provided to us by the button node as you can see here in THE INSPECTOR We have a property called text and we can edit or text here and as you can see we are reflecting our changes on the inspector onto our button that is shown in the scene. We also have a line we can go ahead and change its alignment. I'm gonna go ahead and keep it at center and if we scroll a little down we're gonna see base button. The first option is disabled. If you click that you'll notice that our button will be non clickable when we run the scene. And it is also reflected on our scene. One important thing is if you want to use the pressed property provided to us by the base Button class you need to turn on toggle mode. And from here we can switch and if we go ahead and run the scene tree what you're going to see is that every time we click you can see how it toggles between the normal state and the pressed state and all the pressed value does is it lets us know what state we would like to be in when we run our scene.

Now the most important thing here is going to be in our control section again because we don't have a parent control node we don't have the ability to really use our anchor and margin. However we still have rectangle. And so if we were to change it we would change its position. I'm gonna go ahead and reset that. And of course we have the same for size. You can see here I changed it and in our scene it's reflected that we have in fact changed it. I'm gonna go ahead and change that back. However, we're not really interested in the behaviors provided to us by the stock button Godot provides us. We would like to in fact, change it. And to do so, we need to go to custom styles. Now by default it's set to empty and Godot takes over internally providing us with a press state and a normal state. And so in fact to change it we need to provide it a style box that happens to be a or rather we need to provide the button some type of style box that is a child of the style box class. And so we're given four options new style box empty new style Box Flat new style box line and new style box texture. Most of the time for prototyping purposes you most likely want to change its colors. And so we use these style box or excuse me rather we use the style box flat resource class. And as you can see here in the preview by default we are provided a gray color. And this is the background color and because we're using hover it will be the background color that changes when we hover over the button when we run the scene. Now to go ahead and change the background color we need to go ahead and press inside the color button here. As you can see it pop up as shown and we are free to change the color.

And notice how our preview changes color based on what we assign. Once we're done when we run the scene and we hover over a button It's going to change color. Let's go ahead and do that now. Again as you can see when I hover it changes color. Now I'm gonna go ahead and reset this back. Now another cool feature that Godot provides us is the ability to add or only have a border. So in order to define a border we need to go to border width. And we just simply add the amount of border we want. And as you can see in the preview when we increase the border sizes for left top right and bottom it gets reflected in our preview. And of course when we run the scene it's going to reflect on our Button Node when we hover over now if you would wish to only have a border you would come here to the draw center property and uncheck it. Basically give its boolean value false and in our preview we can see that when we run our scene our button will only have a white border. Now if you would like to change the border color just come here to the border drop down menu and under color we can go ahead and change the color based on whatever color we wish it to have. And notice here in the preview that it reflects our changes and of course when you run the game you're going to notice how we reflect the changes. We keep our text but we lose or rather we add transparency inside our button. I'm going to go ahead and set back our draw center to its default value

true. Now if you would like to add shadow because that's another thing we can do with buttons we can add shadow we come here to the shadow dropdown area. We're given three choices color, size, and offset. The most important is the color and size. By default color is set to transparent as in we have no shadow. And even if we were to add a color in this case red and we set its transparency to one or in this case 255. But if we use raw it's 1. Notice how our preview doesn't reflect the shadow and that's because our size is set to zero. So we need to increase this value if we wish to show shadow and of course if you would like to offset your shadow you just go ahead and add it. And as you can see here with an offset of 10 our shadow moves 10 pixels to the right from its origin which again is zero zero based on the button node. And when we go ahead and run the scene and we hover over you can see we have our background color with our border color. And on top of that a red shadow that's 10 pixels offset to the right. And that's basically it for the new style Box Flat, resource class. The next thing I want to introduce is the box line class. Again, a child class of the style box class.

And if you go ahead and you click that. Now notice here in the previous section you can see a small black line and that's basically, the style box line class for you. And this is because the style box line class only really cares about is adding a line either on the horizontal axis or the vertical axis. And if you can't see that I'm going to go ahead and increase the thickness to a ridiculous amount. Basically it's max value which is 10. And by default it's set to horizontal. And the reason for the existence of the style box line class is that you may wish to add a separator. In this case it's a vertical separator so maybe words on top or a button on top and button at the bottom with a separator to visually cue that these are separate clickable buttons. And if you wish to make it vertical, just click the checkbox for vertical. Now what clicking the checkbox does is it makes the vertical property set to true. And so as you can see here, It is now aligned vertically instead of horizontally. Or rather it is aligned On the y axis instead of the x axis meaning that we can put buttons or words to the left of it and to the right of it visually queuing that we are in fact separating both sides. And if we go ahead and click Run and we hover over you can see here that we just have a separator in most cases you want this to be set to the normal state which is also referred to as the default state. However in this example it's set to the hover state. Now if you wish to change its color again just go to the color property change its value and voila our color has been changed.

And that's basically it. Now the third thing I want to introduce to you is these style box empty. And when we go ahead you can notice that our preview is blank and there is nothing we can really do about it. There are no real options for anything for this style box empty resource class. And that's on purpose because all it means is you want nothing. As a matter of fact if you would like to have something empty or transparent but clickable and still there you would in fact use the style box empty class. And notice how even though it's empty it's still clickable. We are still able to click inside the style box empty resource class because style box empty just means that there are no properties to edit. But it doesn't mean that the. Button d oesn't exist as a matter of fact. When we add a style box empty. The button. Does in fact exist. It is still on the scene. And it is still. Clickable. The last thing I want to introduce to you is the new style box texture. Let me go ahead and click that. You'll notice that our previous empty and we have a property value texture which of course takes any texture value we can choose. Quite a lot however in this case I'm just going to take the icon provided to us by Godot and I'm just going to set it in the texture. All that really means is that every time we hover because again we're in the hover state we're going to show this png file

this is great when you have PNG files that represent buttons. However I recommend that if you want buttons that show PNG files you use the texture button Node. Well that's all I have for the visual example of how we can use a button node. Let's go ahead and take a look at some code and see how we can connect our button presses to some type of action. So we have two different types of script. We have a button script attached to our button node and we have a circle changer script attached to our node2D which again is the root node of our scene tree and all our code does is every time we press the button we have a circle and it changes position every time we click it and the code for this is quite simple we have two functions. We have a pressed function and a ready function by itself. This does absolutely nothing as in all we do is we print to the console. So every time we press our button we're gonna print to the console I'm clicked and then we're going to show it to the console. The boolean value of our pressed property and in the ready function we're just simply showing the value of the pressed property and the value of the disabled property. One thing to note is that our button script extends from the button class it is because we are extending from the button class that we do in fact get the virtual method pressed. So just keep that in mind. Now the real meat of the script is in fact these circle changes script because it's attached to node2D we are extending from node2D and take note that we have a random number generator instanced object and we have two variables one that represents a float value for our width and a random value for our height. Now first we need to grab our button node and that's what this child. Button object represents. So as you can see here it's a data type of button and we are getting the child from ourselves and because we only have one thing on our scene tree I use get child followed by zero inside the parentheses letting us know that we're going to get the first child in our scene tree which again is the button node now in the ready virtual method we're going to randomize because if we don't randomize we're gonna get the same values given to us by a random number generator class instance.

But the most important thing is we need to connect. Our Button's. Signal. To one of our internal. Functions. So again. We call our class instance which is child button. And we're going to connect it's. A rather it's pressed signal. Of course we're saying we want to connect to ourselves followed by. The fact that we would wish to connect our pressed signal to our. Internal function called change. Placement. Now change placement does two things. For one thing. It calls the random placement method And all it does it assigns random values to the width. And height. For our variables for our draw function. And next instead of change placement. We call the update. Method which in fact just cause the drawing virtual method. Now inside we have a draw circle. And it takes in. Three. Arguments. The first argument is a vector to representation. Of the. X position in this case random width. And it. Y position which in this case is random height We say that we wanted to have a radius of five pixels. And we wish for our circle to be. A white color. And that's basically it. So. Every time We enter the Pressed virtual method, What we're going to do is call our signal. Our signal is going to Connect To our circle changers, Change placement method. And when it does it's going to get random values to put on the. X and y position of our game screen. It's going to call update which draws a new circle

Onto the screen. Or rather updates one circle. And that's basically how we get this. So notice how we keep. Changing its value every time we click on our button that says Click me one last thing I want to show you is the action mode property provided to us by our base Button class that we inherit from the button node. Basically we have it on button release. And so what that means is that every time we click. Notice how our circle doesn't change until after we let go or release the button. And so again if we were to hold our button when we press it and move out doesn't change when we release. And so we have to release the button after being clicked where our mouse is inside the button in order for our signal to get cold because action mode is set to button release. Now I'm gonna change it to button press and what that means is that we're going to activate the pressed State once we've clicked our button instead of when we release our button. And so notice how even the way hold our circle changes and that's because we have it on. Button pressed instead of button release. Well that's all I have for you in this episode. Thank you so much for joining me. I'm going to go ahead and upload this to get up. So please feel free to play around with the button node if you have any questions or comments. Please feel free to leave them in the comments section down below. Thank you for clicking the Subscribe button and thank you for clicking the Like button. I look forward to seeing you in the next episode. Have an amazing day.