Hello and welcome to another episode in the Godot basics tutorial series. In this episode we will be taking a look at the control node. The control node is the base class for all UI related node. All user interface type nodes inherit from the control node such as buttons and tech stereos. The control node adapts its anchors and margins based on the position and size of its relative parent. There are many things that can get you lost when trying to learn more about the control Node. However as a beginner tried to understand these four general property values that belong to the control node they are the anchor margin grow direction and rect which is short for rectangle. Now you can think of the anchor as the starting position of your control no anchor is affected by your parent control node and basically with anchor you are deciding where along the edges of your parent control node you would like the position to start at. So when you maximize the anchor in the inspector you're gonna have four property values left top right and bottom by default. All of these are set to zero. However the key thing to take away is that it will be a value between 0 and 1. Let's go ahead and take a look at an example. So again in order for anchor to work it must have a parent control node with a position in size and so as you can see here the big rectangle is our parents control node. And in this case our child control node is just a simple square button.

My advice is that the top level control no should cover the entire game screen area that your player is able to see as you can see here this cross like symbol is our anchor. By default we will start at the top left most area of the parent control node. And again that is dependent on the position and size of your parent control no. Now let's look at some values that we can change in order to reposition our child control node. So in this case if we change our anchor to left one and right one we're going to anchor our button to the top right of our game screen. If we set all values to one we're going to anchor our button to the bottom right of the screen. If we only have the top and bottom values set to 1 we're going to anchor a button to the bottom left of our screen. And if all values are set to default which is just all zeros we're gonna position to the top left side of our screen just our anchor and assuming we haven't done anything to our margin values. Now if we change these values theoretically we can get our anchor to appear anywhere on the screen for example if we want it to be at the exact center we would set our anchor to be zero point five all across the board and that will set our anchor position to the middle of the screen ever again as a beginner just try to understand how to position your anchors into the four corners of your game screen assuming that your parent control node encompasses the entire game screen. And

And so from the basics you can move to more complex things for example by setting our right value for the anchor to one we can in this case set our anchor positions to the opposite sides of the screen in order to get this effect. And if that is in effect you want. You can go right for it and anchor allows you to do quite complex things however again just try to focus on the simple concepts of positioning on the four corners of your game screen. So let's look at margin margin is just how many pixels away from the anchor. We're going to position and size our control node in terms of the x axis and the y axis margin comes with 4 different values we can adjust for they are the left top right and bottom values. In this case what you see is a simple square. So let's go ahead and take a look at that. So again we have our parent control node which encompasses the entire game screen. Our anchor is set to the origin. In this case 0 0. And if we look at our margin left in top is set to 0. And right and bottom are both set to one hundred and so let's look at left in right first. So when we say left 0 we're saying that we would like to be or rather we would like the left side of our control node to be 0 pixels away from the anchor position. And in this case 0 pixels away from the anchor position is just the anchor position. Now for the right margin what we're saying is we want to be 100 pixels away from the anchor position in terms of the right side of our control node. And so if we were to count one hundred pixels away from the origin we would place ah right side of the control node 1 hundred pixels a win. That's how we get this link. One hundred and we can do the same thing for top and bottom as well. So again we would like our top margin value to be zero pixels away from the anchor position. And so what we say is OK zero pixels away from anchor is just zero. And so we don't do anything for the top side of our control node however for the bottom side of our control node we would like it to be one hundred pixels away.

And so if we go one hundred pixels down we're gonna set our margin one hundred pixels away. And what you will get is a square shape control node. In this case our button is gonna be a square. Now if we were to set all the values to zero for our margin values we're either gonna do one of two things either or control node disappears or control node will set itself to be the minimum size allowable in this case since the example is a button I believe the button has a minimum size of 12 by 12. I'm not sure ever the button will not disappear but if you set margin to 0 0 it will set itself to the minimum value possible for the button control node. Now that I set it back to a square. Let's see what happens when we change the left in top margin values. So in this case we change the left margin value to 50 pixels away from the anchor. And as you can see here if we were to calculate for our shape we would say the left side of our button control node we would like it to be 50 pixels away from the anchor. And so if we go 50 pixels This is where our left side of our button control node starts and then because right is 100 pixels. What we're saying is 100 pixels away from the anchor for the right side of our button node. And when we calculate for that we get this rectangle shape where the width is basically 50 pixels right minus left will equal the width for our button control node. We can do the same thing for top and bottom as well if we were to do 50 pixels away from the anchor in relation to the top side of our control node.

What we will do is calculate again. So if we start from the top we say we would like our top side of the button control known to be 50 pixels away from the anchor. So when you calculate for 50 pixels we start right here and then we do the same thing for bottoms. So bottom has to be 100 pixels away from anchor and then we get this square shape that basically have itself from its original size. Keep in mind when you affect margin you are going to affect the rectangle values size as well. Speaking of the rectangle sizes the third thing to try to understand about the control node is in fact its rectangle values or properties that the rectangle provides the control node in this case. Try to understand these four different properties. Position rotation size and minimum size. Now the position property is not how many pixels you want to adjust for in terms of the control nodes anchor. Instead it's going to be the game screen's origin. So just keep that in mind. Position is in relation to the game screen origin not the anchor position. Same thing with rotation. Rotation is in relation to its pivot offset and not the anchor. Now size and minimum size is where things get a little interesting. Size is of course the size we would like our control not to be in this case because it's a button we can control for its width and height and minimum size is basically telling our control node button that it can change its width and height value. However it cannot go below a minimum threshold by default. Minimum size is set to zero. Now here's an interesting question. What happens if you set the minimum size to a value that is larger than your current size. So in this case by default minimum size is set to zero and zero on the x and y axis respectively or size is a square one hundred pixels by 100 pixels. However what happens when we set minimum size to be a value that's greater than one hundred by one hundred. Well what happens is when you change the value of minimum size to a value greater than the current size you're just going to change the size value.

It's fairly straightforward. However the next question is in what direction are we going to grow if minimum size becomes larger than the current size. And that will depend on the values of your growth direction in the horizontal axis and the vertical axis. By default they're both set to end. However you can choose begin and both. Let's look at those sort control known as a growth direction. And by default horizontal and vertical are set to the value end. And what we're saying is that when our minimum size is bigger than our current size when we change the current size to match the minimum size we're going to grow away from the origin position. And so since our squared doubled it's going to grow to the right and grow towards the bottom. Ever. If we set both of these to begin and we were to double our control no button instead of growing away from the origin we're going to grow towards the origin. And so in this case when our square doubles in size what we're going to do is grow upwards on the height value and grow towards the left on the width the valley. And lastly if we set grow direction to both we're going to grow evenly either on the horizontal axis or the vertical axis. And so the grow or rather as the size increases the growth is halved in both directions depending on the vertical axis. Or rather depending on the access you are growing it. Now one thing to keep in mind is that if control node grows or shrinks it's not going to fix the margin value for you. And so you may end up with a position that you may not have intended to have. So just keep that in mind that as you grow and shrink you need to edit your margin value as well in order to get the position you want to show to the player on the screen. Now if all of this was confusing to you that's OK. The relationship between anchor margin rectangle value and grow direction because of different moving pieces and because of how they are related to each other. One value will affect the other's anchor affects margin rectangle and grow direction whereas rectangle can affect margin but not so much broad direction and it just goes on.

But lucky for us Godot provides us with a nice little utility and that is the layout utility. So when you click on a control node you're gonna get some options in green which is specific for the control nodes and one of them is gonna be layout when you click on the layout you're gonna get a dropdown. It's gonna offer you more choices than what I have on screen. Ever notice that the first four choices are the four corners Top Left Top Right Bottom Right Bottom Left and also other things such as center. Well you can go ahead and click that and Godot will automatically apply the anchors position and margin values to get your control not oriented on the screen for you. Now if you are a beginner starting out on your control no journey. My advice is the following first set a top level control node that should cover the entire game screen and this control should do absolutely nothing. Then position your child control nodes anchors on one of the four corners of your game screen. Or rather your top level control node which encompasses the entire game screen. Lastly what you should do is use margins to move your control nodes position relative to the anchor position. I've uploaded a small sample project to get hub so please feel free to download that and play around with positioning the button control node in relation to its parent. Well that's all they 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. Also if you're interested in other videos please feel free to check out the trailer page I setup in the link in the description down below. I look forward to seeing you in the next episode. Have an amazing day.