Become familiar with Unity's UI system
Create an entire game using the UI for all of its visual aspects.
Apply all of what is learned in a real world scenario.
Learn to think like a UI developer.
In this video we're going to be talking about the recked transform now that our transform is a component that's largely responsible for the positioning and the sizing of each element in our view why every game object that exists underneath the canvas is going to have a wreck transform instead of its normal transform. So we're all familiar with the typical game object transform. If I click on the main camera and hop over into 3-D space we see that we have the transform up here on the top right and we can manipulate it using some of the the normal scene view gizmos such as the movement tool or the rotation tool. Now the transform is a very similar concept but it's suited towards a two dimensional interface. The transform essentially indicates to the UI system where an object should be positioned relative to its parent game object. Now we're going to take a look at the wreck transform and it's major components the anchors and your pivot. In this video. But again I or I don't necessarily expect everybody to gain an immediate intuition for how the transform works. And the reason is is it can get a little bit complicated. The transform has a variety of different states that it can be and depending on how things are positioned. So I encourage people to watch this video and at least get some of the concepts understood and then go out and play with it yourself to get a better feel for how you can use it to build your interfaces. So yes stuff and things let's go ahead and create a canvas and talk about transfer. So over here my Harkey in order to create a system of any kind. We're going to have to start with the canvas so I'm going to right click on the blank space go under you y and create a canvas. And so now we see our ridiculously large canvas outline in our scene view that we discussed previously in the last video and I'm going to keep it on screen space overlay because we're not going to be working with any perspective in this video. So the first thing that you made note may notice if you're paying attention to the inspector here is that the canvas does indeed transform itself. But as we saw in the last video the wreck transform on the canvas is not actually going to be modifiable by us unless it's in the world's space render mode. So by default the transform of the canvas will take on the characteristics of the screen. So as you see right here as I resize my screen my game view the canvas changes as well. And we are not able to modify any of those parameters. There are ways to modify the scale of a screen space overlay and screen space camera canvas but you do that through a different component that we're not going to be looking at in this video. OK so I'm going to hop over into 2-D mode again the button up here on my screen view just shoot my scene view over into an orthographic views so it makes things like working with the UI a little easier. And then I'm going to reichlich the canvas select Do you I don't want to create a panel and in fact do you know what to demonstrate. One of the biggest or one of maybe the more difficult to understand concepts of transform. I'm going to create a panel but I'm also going to create a button reichlich panel and when I select you I am going to select. But the reason I am doing this is I want to show an example of two different configurations of Reyk transforms that give you two different bits of behavior. So in this particular case we have a panel that was constructed through the create menu that has its default values and a button that has its default values. You'll notice immediately that they look very different. The panel fills the entire canvas whereas the button is centered on the panel that it's a child. And the interesting thing about this behavior is that it's not actually behavior that is limited to only the button or only panel. It just so happens that the button in the panel when you create them they're set up with different kinds of Reyk transference by default. So let's go ahead and first look at the behavior of the panel and the button. Now when I say behavior what I'm in this video in particular what I'm referring to is what happens to the position and the size of an element as its parent element changes because everything is going to be relative to its parent in the new system. And so a big portion of our development with the UI system is going to be asking ourselves what happens to the characteristics of this UI element as the parent changes. So how do we facilitate the creation of flexible user interfaces that don't rely on absolute pixel coordinates. So what we can see right here is our game view and you'll notice that as I resize the game view the size of the canvas changes. In fact the size of the canvas is really the only thing that changes as I resize the game view. But you might be looking at the screen big-O and say well you know clearly the size of panel is changing too but that's not really important. So important because the size of the panel is really just following the size of the canvas. So again the only thing that's changing here is the size of the canvas as I resize this. Another trick I can show you guys for how to preview what happens to our eyes as we modify the size of the parents is if we select a UI element such as the panel. Well that's not going to be a good example. Unfortunately it's not going to because it's in film mode. So we'll show that later. But let's say it's like the button I have the button selected. Watch what happens as I move the panel so I can resize the panel in what's called a preview mode. So you see the little word preview right there. And what that means is I can test to see what happens as its parent changes its size without actually modifying those values. So again I have the button selected and I'm able to resize its parent in this example unfortunately since the panel is filling the canvas the only way I can demonstrate the panel moving is by moving the game view and thus changing the resolution which changes the size of the canvas which changes the size of the panel. So what I wanted to show in this example was two different game objects two different types of objects a button and a panel and then both behaving differently. You'll notice that the button is always centered whereas the panel is always filled. Now like I said previously this behavior is not inherent to either the panel or the button. In fact this behavior exists on all objects that have a wrecked transform. The differences between the panel filling the canvas and the buttons centered on the panel is simply described as a different set of values on each respective game objects transform. So let's take a look at what that is. The first thing I want to point out though is we are all going to be almost exclusively working with the recked Transform Tool that transformed tool allows us to manipulate and visualize the way or transform a set up within our scene. So the Transform Tool is going to be right next to our scaling tool as you can see right here as I switch between the different tools. So if we click on the panel we see the transform gizmos appearing. And there's there's a couple of points that interests interest here. First of all we have our center which is represented as this circle that doesn't have a center hollowed out circle which represents the pivot of the game object in this case the pivot happens to be in the center of the game object. But we can see we'll be seeing very shortly how we can change that. Another thing is you'll notice we have resize handles up at the top right and the bottom right and bottom left and top left. So these resize handles do what you would expect them to. They allow us to resize the element. We can also drag on the side of the game object as well to resize it. Now what is resizing mean. Well we'll talk about that very shortly because as you'll see describing UI elements in terms of width and height aren't isn't actually the most appropriate way to think about it in most cases. Now the final bit that I wanted to look at with the recked Transform Tool is the distinguishing factor between the panel and the button. The reason why the panel stretches and the buttons stays in the center and that is our anchor. So hopefully you guys can see the anchor points there on each four corner for four corners we have a top right top left a bottom left and bottom right and there are these little these little guys right here and we can click and drag them and see them visually. Now it's interesting to know as I click and drag these you'll notice on the left hand side of the screen and on the bottom side of the screen we have a percentage which indicates to us that the way that we position our anchors has more to do with a proportion than an actual pixel value. And again that is one of the most fundamental things a person has to understand about the way this system works. We can also see that represented on the right hand side in our Inspektor the transform as you see is made up a variety of components. We'll talk about this big button later. We'll talk about these four values later as well. But let's focus right now on the ankers. You'll notice as I move these values change and you'll notice that the anchors are made up of two two dimensional vectors a minimum and a maximum. You'll also notice that they move between values of 0 and 1. Furthermore if you're in your rec tool and you try to increase the size of an anchor beyond that of the size of its parent it will not let you. The anchors are always going to be constrained to the size of the parent element. So there's no way to get around that. So again just to recap an anchor is a percentage value that goes between 0 and 1 that can only be as large as its parent and can be as small as zero as you can see by mean dragging it all the way to the bottom left. But what exactly do the anchors do while the anchors basically describe the relationship between the size of the child and the size of the parent. As you can see right now our anchors are in what's called stretch mode. In fact you can see that represented here on this box and it wasn't going to talk about it's stretching both horizontally and vertically. But you'll notice that as I change these values it changes so they're are basically going to be a couple of different very common situations that you have with anchors and they'll all have a different sort of behavior to them. For example in this we have a uniform stretch. Now the uniform stretch will always happen if the anchor points are separated. So you see that the anchor points here are completely separate. We have four individual points. Now just look what happens when we move our anchor points to be combined like that. So what it basically did is I took this top right anchor point and I accidently rotated the panel for some reason. There you go. I took this right hand anchor point and I dragged it all the way to the left which combines it with its other anchor point. Now you'll look at the screen and say well not a whole lot changed. I mean why would you do that. Well watch what happens when I come over to my game window and I change the size of my canvas. You'll notice that as I change the size of my canvas the panel does not change horizontally but it does change vertically. That's because we're in a stretched mode on on one axis but on the other Basically we've told it this this panel to dock all the way the left of the screen and not get any bigger any smaller on one axis we can also do the same thing on another axis so watch what happens when I come over here and I'm going to take this and I'm going to move it. Whoops. Here we go. I'm going now anchor it to the top like this sofa anchor to the top by moving the two points to the top of the screen. You'll notice that it behaves like this now it's decie to the top of the screen. You'll also notice something interesting as well here. And this is another important feature of how anchors work. You'll notice that there's a padding between where the panel is docked to its parent and where the panel size actually is. So there's this padding now. Note that since the anchors are positioned at 100 percent on this axis this padding will be maintained as we stretch further. So I could take this padding and I could reduce it by clicking on the panel and clicking and dragging one of its sides and let's move this padding to be 24 pixels. Now you'll notice that 24 pixels is maintained. Because it's a uniform it's a stretch that's going to always happen proportionally. So that is how we can sort of stretch on both access and that's how we can stretch on one X-C. There's another thing that we can do and that is simply moving the anchor point or the entire anchor around the screen. So what does this do. Well when we combine all four points of the anchor into one point so that we're no longer performing any sort of stretching. We're simply saying where we want this element to appear on the parent and not move. So for example if I were to center so I've centered the anchor point. You can notice over here on the transform that the min and max on both x and y are point five or 50 percent. So now if I stretch it's parent you'll notice it actually is starting to behave like the button to make this example a little clearer. I'm going to go ahead and not only sensor the anchor point but also Center the game object itself. So now we can see the behavior of the panel not resizing and not stretching at all. It's simply in the center of its parent at all times what if we wanted the panel to be on the left hand side of the parent at all times but not stretch what we can do that too. We can simply move the anchor over to the left of the screen and then for good measure we could also dock the original position of the panel on the left hand screen as well by moving to the left hand screen. You'll notice that the distance between the left hand side of the screen and the panel is maintained as the screen is resized. However no stretching happens. So basically what we have going on here is the ability to Dawk a panel on a side of the parent so we can also do that at the top right. Again if I put it at the top right the distance between the top of the canvas and the top of the panel and the right of the canvas in the right of the panel will be maintained as you can see that distance continues to be maintained because the position I have the anchors in I know you guys may at this point be incredibly boring like say you sitting there playing around with the Zonker I get it already the anchors are incredibly important. And I'm just trying to just really drive home the point that it's really the anchors describe the relationship of the child's position relative to the parents size and that's it really. Let's talk about one more thing that I really don't expect people to to really take to heart yet or find even the use of at this stage of the game. And that is we've we've at this point seen the anchor points being kind of docked at some location whether it be the top right left or bottom. But you'll notice that the anchors allow us to actually split in a percentage meaning I can move the anchor point over here and split it like that. So what does this anchor mean. Well this anchor setup means that the panel is going to resize horizontally. 78 percent of the size of the parent and vertically 47 percent the size of the parent. Now this is a very difficult thing to visualize. So let's go ahead and look at the preview as I resize the canvas so you'll notice immediately that I change the size of the canvas so pay attention to the anchor points ignore the panel. Do not look at the panel or looking at the panel stop look at the anchor points. Watch them as they get bigger. And smaller. So what's happening here. Well you'll notice that the distance between one of the corners of the panel and its corresponding anchor point never changes but the distance between the anchor point relative to its parents edge does change. And again that's because we describe anchor points as percentages. So it's a possible use of this fact. Well we could go ahead and move our panel right there and we could say I want this panel to be 50 percent of its parent at all times. So what I did there is I added in these I split apart the four anchors and then I docked the panel into the anchors. I could also throw in some additional padding as well to make this a little bit more interesting. But the point is is what we're looking here is twofold. First of all we want the padding to be maintained on the left right or left top and bottom. You see this little extra space right here next to the canvas or between the canvas and the pan we want that to be maintained. That is a fixed value. But we want the size of the panel to increase and always take up 50 percent of its parent. So that's why we split our anchor into two points and we moved it to be roughly 50 percent. I overshot the first time into did it. So let's move that to 50 percent and then let's introduce them right now as we stretch it. You'll notice that the panel will always take up almost exactly 50 percent of the screen. The only reason it's not exact is because the additional padding add. So hopefully for somebody who may have played around with another goolies system you'll start to realize the power of this because I can deliberately say make a statement such as I want a panel to take 50 percent of the screen and I want to have a fixed pixel padding around the edge of the screen. And we've accomplished that simply by positioning our anchors. You can see an example of this in the game view right here but what if we only wanted to resize in one direction as you see it's resizing in two directions. Well again that's easy. The basic rule of thumb here is your anchor points are going to be in one of three modes. There are going to be in single point mode which I don't know if that's the case. I'm just making up terms right now to help explain things. I don't know. Actually it's referred to as that but that's what I'm referring to as I was of a single point mode where there is no resizing. You have a two point mode where there is a resizing on one axis. In this case horizontal. In this case vertical and then you have four point mode where you have resizing on all four axis axes. So again if we only wanted this panel to stretch horizontally and vertically we could have simply placed or anchors like that using a two point anchor where our panel now does not resize vertically. Now you might be wondering well what if. What if I wanted the panel to stay in the center of the screen as I resized vertically. Well that's easy to do. We remain in two point mode but then we simply drag the two points loops. We simply drag the two points to be exactly in the center. Of the game object or of the parents. And now you see that the object will remain in the center. OK so what's the difference between when I create a panel and when I create a button I answer that question is the way the anchors are set up. Because I could have just as easily taken this button grabbed his anchors docked them to his parent resize the button a little bit and the button will now stretch to fill the parent already. So those are anchors very very very important. I did spend a lot of time talking about them I know I hope I didn't bore anybody but they are very very very important for understanding how the system works. So now let's talk about pivots so what we do is I'm going to go ahead and delete this panel on the canvas and I'm going to create a new one so I'm going to come up here to canvass. Right click UI panel and then I'm going to to make a little bit smaller I guess I'll keep it that stretch full. But let's just make a little smaller so we can talk a little bit about pivots. So what is a pivot. Well a pivot is really just a point inside of the game object that determines how it should be scaled as well as how it should be rotated and even positioned. Basically you can think of a pivot as the origin of the game object. So you know how our world has an origin. Well we can also give our local recked transforms their own origin and the origin of transform. Like I said determines a variety of things. Position scaling rotation. It also determines how we calculate positions. We'll talk about how we calculate positions a little bit later when we discussed these four numbers. So just ignore these four numbers for now because they're going to get really crazy as I move this pivot around. So don't worry about those numbers just yet. So anyway the pivot as you see is by default going to be in the center of a game object and you can see that right here. So I can click and drag this pivot a couple of things to note about the pivot. First of all we can see the numeric representation of the pivot right here in the correct transform inspector. And you'll notice that it is a value between 0 and 1. We can also make it larger than 1 or smaller than zero as well because unlike pivots or sorry unlike anchors we can actually move them wherever we want. OK so for a quick example of how pivots affect position rotation and scale I'm going to make use of some animations. So I'm going to reichlich the panel click on the UI and create a button. So you'll notice something interesting about this button. Immediately after our discussion about anchors in that it's anchored in the center of its parent. However in this demonstration the anchor position is not going to make a difference at all. Instead we're focused solely on the pivot. So what I'm going to do is I'm going to animate this button getting bigger and smaller through a scale effectively I'm simply going to scale it's X and then we'll see how the change in pivot changes how it scales. So to create an animation on a button we go over to our animation window that you could find through window animation and I'm simply going to say click on this little empty drop down thing and say create clip and I'm going to call this clip button rotate and then what I'm going to do is I'm going to scrub out to. Come on. And we got a frozen unity. There we go. What I'm going to do is I'm going to scrub out here to about one second and I'm going to take it's scale and I'm going to increase it maybe to about 1.8 1 and of course we're not getting any automatic keyframes. So let's go ahead and leave that scale right there at 1. Let's scrub over to one second. Then I'm going to select Add curve transform scale. Then on my dope sheet I'm going to move over to one where I have these keyframes and I'm going to set the X scale to one point eight. You know what's going on here. I have an animator controller to my camera. I've been scaling my camera way to go let's go and delete the. Let's go back to our button. Going to delete these two. I'm going to go a little bit. Another way it's a big animation. Sorry about that guys. I want to go to project create. Let's jump down to animation animator controller and let's call button controller. And then on button I'm going to scroll down to add component and I'm going on add an animator that I'm going to click and drag button controller on the controller. Now what I'm going to do is I'm going to open up the dope sheet and I'm going to ask me to create a new animation and I'm going to call this button scale that I'm going to move over to one second. I'm going to change it scale to one point eight. And now we have an animation. The final thing I'm going to do is I'm going to move over to 130 and I'm going to change it scaled back to one and again I'm in record mode. So you can see that the keyframes are automatically added at. Now I'm going to exit record mode and I'm going to duplicate this button a couple of times. And on each button I'm going to set a different pivot on it so we can see the effect that different things have with pivot so I'm going to duplicate it. Move it down. Duplicate again. Move it down. Duplicated again move it down so on the second on the first button I'm guilty it's pivot in the center on the second button. I'm going to move it over to the left on the third I'm going to move it to the right and then the fourth I don't move it way over there. Now watch what happens when we hit play. So you'll see that these buttons all have the exact same animation applied to them. They're all doing the same thing they're all increasing their X animation value as you can see in the inspector right here. But you'll notice that they look very different. One is growing from the center ones growing from the right and one's growing from the left and one's doing this crazy little thing right there because the pivots like way over there. As you see as I move the pivot around. Strange things start to happen. So again the pivot just determines in regards to scaling where we grow from. So if you want to be able to scale something and have a groove from left to right we place the pivot on the left if we want it to go right from left we place it on the right and so on and so on the pivot also has the way that it does this is very interesting but requires that we talk about these numbers. I don't want to talk about that. So we'll get to that momentarily. So now do the same thing with rotation. So I'm going to go a little bit faster this time because I think most everyone's getting the picture you're going to create a button rotation controller on a reichlich panel and I'm going to create a couple of buttons to create one button to start with. I'm going to add in and animate toward to it on an animation I want to click and drag button rotation controller onto it. Then I'm going to create a new clip I'm going to call it button rotation. Then what I'm going to do is I'm going to set up a keyframe at one second and said it's set the rotation to 360. Now I'm going to exit record mode and I'm going to duplicate this button a couple of times and I'm going to change its pivot on each button. So this button I'll have on the left this button I'll have on the right and this button I'll have some or else. Now when we hit play we'll notice that the buttons are rotating around in different positions. Again the exact same buttons the exact same anchors the exact same animations. The difference is the pivot so the pivot just determines where the object rotates around. Again where is the object center already. So that's pretty much pivots there. Pretty straightforward if you're familiar with how sprites work it works in the exact same way. I just really want to drive home the point of how pivots work and show you guys some visual examples of that. So hopefully at this point you guys are starting to get a feel for how anchors and pivots work Anchoress and pivots are really the two most fundamental aspects to the entire positioning and sizing system of this. So now let's talk about those four numbers because now that we have an idea of what the pivot is and what the anchors are. We'll see how those numbers change the numbers I'm referring to or the position x position y width and height. No wait I'm actually referring to the left top right and bottom. Or I could be referring to the position X the top with the bottom or the left position y right or height. So as you can see here these numbers actually change meanings. The labels on the actual numbers change depending on how I have the anchors set up basically these four numbers are going to be responsible for the overall size of the object as well as where exactly it's positioned. So these four numbers have three different meanings depending on how we have things set up with our anchors and they will be used to calculate the final size and position of a game object. So let's go ahead and delete this panel. I kind of like this panel so I was going to deactivate it move it off the side. I want to go to my canvas. I'm going to right click go to UI and create a panel. So in this panel will see immediately that we have a left top right and bottom and you'll notice that as we drag the values change. So you'll notice that when we're in the stretch mode the size and position of the element is going to be determined by padding. When I say padding if you're not familiar with technologies like CSSA it refers to the amount of distance between the parent and the child. So in this case these four numbers are referred to as padding. And we can modify them by clicking and dragging or by typing in values such as 100 100 100 100. Now you'll notice we have 100 units of padding or 100 pixels of padding between the edge of it's parent. It's not actually really between the edge of its parent. It's going to be between the edge of the anchor. So now we're starting to really put some things together because these numbers are actually going to be the distance between the edge of the rectangle and the corresponding edge that is created by these two anchor handles. We can see that visualized by me moving it in the seamed view we can see that number changing as it gets closer to the anchor point. It approaches zero as it gets further away it gets larger. If I overshoot it becomes negative if I move the anchors in here a little bit we see that these values are still attached to the anchor because these values are fixed the anchor will move because they ankers relative to the size of the parent but the distance between the side of the rectangle child rectangle and the side of its anchor points is not going to change. So once this value is at one hundred ninety nine point five this is always going to be exactly one hundred ninety nine point five units or sorry pixels away from its anchor points. OK. So I want to point out another thing that happens quite frequently with a system and something that could be very confusing and daunting for people who may be new to it and that is these four numbers. Not only do they change in meaning all the time but they also actually change in value all the time. They have to in order to maintain a consistent editing experience as you're mucking about your you and your scene view. So we can see here that as we move our anchors around if we if you pay attention so don't look at thinker's this time. So stop looking at the anchor look at these four values. Watch what happens as I move the anchor around the values are changed to compensate for the fact that I'm moving the anchor because if I moved the anchor around without modifying these values the actual size and position of the child would change. So you'll see that is going to compensate for even typing in values. So again just point that out. OK. So we've talked about the first mode of how we can have these four numbers arrange the left right top and bottom and how they are simply the padding between one of the edges of the element and the edge that's created by the anchors. If we move these anchors to a two point mode for example by docking and on the left hand side of the screen you'll notice that we now have a position X a top a width and a bottom. So you'll notice that our top and bottom still is determined by padding. So this is still a padding value but our with is no longer determined by padding Our with is now an actual with an actual pixel value that determines the width of the element. And we can see this visualized on the bottom of this child panel right here because as I stretch it make it larger or make it smaller. That number changes so we're now working with a fixed width so the padding is relative padding is going to always be relative because the the anchor points will move and increase or decrease the size of the child but width and height are constant. OK so that's the width and that's the top and that's the bottom. But what about this position X so you'll notice that as I move this around the position X is the number and we can see this through that dotted line that appears it's a number that determines the distance between the pivot of the object and the corresponding side at the left hand side of where the anchors are positioned. See if I move the anchors in like this will notice that the position X now plugs into where these anchors are positioned right there. And you'll notice as we approach zero we get a really really small floating point error that's supposed to be zero. And as we get bigger we go positive and that's what gets smaller. We go negative. So this position X has a fixed value that won't ever change by default when we stretch our parents and it determines again the distance between the pivot and the anchor. So what happens if we have the anchors positioned in a different two point setup. Meaning instead of being stretching vertically we want to stretch horizontally. So what happens here. Well pretty much the exact same process except using different values. You'll notice that we now have a left padding and a right padding. You'll also notice that we have a position. Why does this and why is that vertical number. That's that three or five right now that's pointing out our anchor points and the left right padding in the right padding corresponds to those two values on the left and right of the screen or of the panel. You'll notice that we also have a height that is visualized very similarly to how the with is visualized. So again we're in a different mode but it's pretty much the exact same thing as what we saw before just flipped on a different axis. So we've seen what happens when we have a four point mode. We get four levels of panic to point mode. We get two levels of padding. What I want to go to one point mode while in this case we have no padding. Basically we are now at a fixed height that will not stretch as you can see represented right here. The height does not stretch. It is a fixed value that we type into the inspector. We have a fixed width. Same sort of deal. We have a fixed y position and a fixed exposition. And you'll notice that they are still relative to that anchor. So you'll see that when we're in one point mode with her anchor the X and the y values are simply the distance between the pivot and the anchor position. All right. So those are the four modes that we can. Are the three modes that we can be in with the transform tool. So let's talk about how this affects the pivot because you'll notice that I did the that demo with rotation and scaling but I didn't talk about how the pivot expected position but in reality the pivot is what actually defines position as you can see when I move this round in one point mode. We're changing the values based on the distance between the pivot and the anchor points. What happens if I simply change the pivot position. Well if you look on the Inspector right now you'll notice that the position X and the position Y are changing to compensate for my change and pivot location. Again this is some additional magic that is happening inside of the unity Ed. Because the unity editor's correctly assuming that by moving the pivot we don't want to move the element it's compensating for that by changing the corresponding x and y. Watch what happens as the pivot moves into the anchor point the x and y approach zero as you can see right there. As I move away goes Pross positive and as I move behind it goes negative. So again the pivot is really what determines the position of an element. For example let's go ahead and set the position X to zero and the position y to zero. In this case we have a pivot That's exactly in the center of the game object point five point five. Now let's change the pivot to zero point five. You'll notice immediately that our position was modified for us by the unity Ed. itself. So let's go ahead and reset our position X back to zero and see what happens as you see it's now aligned to its left hand side. And as I modified just the position X. you'll notice that approaches zero as we get closer to the anchor point. If instead the pivot was on the right hand side which I can accomplish by going to the pivot parameter and setting the X to 1. You'll notice that as we approach 0 the element is positioned on the left hand side. This is very very important. This concept of how position is calculated based on location of the pivot relative the location of the anchors. The reason why this is important is there's going to be a lot of scenarios where we need to determine the exit value of a particular element for animation purposes for gameplay purposes for Dragon draw purposes and so on and so on understanding how these positions are calculated is incredibly important. OK. So again that's really. Yeah. We Ever anchors and we have our pivots and those change depending on what's going on. I want to point out a couple more things. First of all scaling is different from size. I didn't want to bring this up until least we saw in this video an example of both scaling and sizing. Well let me go ahead and show you guys what exactly goes on when we do that. So I'm going to go to panel and I'm going to get to you. And I'm going to select text and I'm going to go ahead and have this text be really big something that the font size to 20 that's not very big. Still 28. Of course it won't fit in his thing. There we go. Then I'm going to set the text to stretch on the size of the parent and be centered OK. So on this panel is now the parent of this text. Watch what happens as I resize the panel. You'll notice Well unfortunately I don't have the size of the text set up appropriately. Then we're going to center it in the middle. Again what I'm doing over here in the text component is irrelevant. We'll talk about that in a later video. But the point is is you'll notice that the text rectangle is actually stretching as I change the size of the panel but the text itself is not changing. However if I were to come in here on the scale in fact if I were to open up the scale tool notice how as I scale it up and down even backwards the text changes with it. So it's really important to understand the difference between scaling and sizing sizing determines the pixel value of something and it's very very important to create consistent user interfaces that don't distort text or images. Scaling however is a way that we can create some really cool spiffy effects by animating the scale of an element anyway. I just really wanted to point that out just for everyone who may not have noticed the difference between scale scaling or size OK. There's another thing I want to talk about here. I'll just go ahead and leave this panel where it is because we'll be able to talk about this tool with the panel that we have set up and that is this button right here this button right here allows us to very conveniently set the anchor and the pivot and even the location of a UI element relative to its parent for example I can now have it anchored to the left. Notice that by clicking this left preset are one. We got a onepoint anchor and it moved over to the center left of the screen center moved to center right moves to right you'll notice by doing a stretch we get a 2.0 anchor then we have this this other grid. We have top middle and bottom. You'll notice that this gives us a two point on the top middle or bottom of the parent. You'll notice that we also have a vertical stretch and this vertical stretch is going to in this case give us a a full universal stretch there and we have combinations. For example we can docked the top left middle top top right middle bottom bottom left and so on and so on. So this cool little grid allows us to really go in and quickly change our anchors to a very common preset. We also have the corresponding stretches stretching horizontal or stretching vertically left stretching vertically center and stretching vertically right. Finally we have our horizontal stretches and then we have our uniform stretch. What's also cool about this is we can also use this tool to set our pivots and our positions. If I hold down shift not only will I set the anchor to somewhere. I'll also set the pivot to that same place. So as you notice the pivot is moving around as I change my anchor position. Finally we can also hold on Allt which will change the position of an element. So by holding down alt and shift we can very very quickly Dawk a panel to where we want it to go one on docket to the bottom one of the rockets the top one to fill it's dark at the bottom right at the top left top center and so on just by holding down shift to not already. So I'm going to go ahead and reset this in the center and I want to briefly talk about one more thing before we recap and then this video and that is going to be the roll of empty game objects. Now as I'm sure you guys are aware of the technique or have used this technique of creating empty game objects to create a hierarchy of game objects that you can scale uniformly or move around all at once and so on. Like let's say you for example have a you know a couple of models that you want to move at the same time or rotate at the same time you child them to an empty game object and that empty game object would allow you to uniformly rotate or scale those items. Well a similar technique can be employed here and it follows through from the fact that all our game objects underneath the canvas will have erect transform. So what they can do is I can come up here to the canvas and I can right click and say create empty creating an empty recked transform. Now this Reyk transform behaves exactly like all the other recked transforms that we have inside of our scene. You'll notice that there is no visual aspect to our transform because we haven't added a text or image component to it. But what makes it really handy is I can actually Child real UI widgets to that empty game object and take advantage of all the properties of nesting transforms. For example if I were to take this panel over here on the left hand side and drag it underneath our game object it's now parentage or the game objects not parenting to our panel. And if I were to give it a uniform fill stretch you'll notice that it's now taking in the entire space of that empty object. You can do really cool things with it. For example I can make this panel take up only half of this game object right here then I could come on to this game object and add another child to it such as a button and then I'm going to have the button dock on the right hand side. I'm going to do that and then I'm going to do a four pliant anchor and move it to about 50 percent. Now as I move this empty game object you'll notice that our button and our panel are moved proportionally all by taking advantage of an additional recked transform in the higher key. So I hope this points out or shows you guys that that Reyk transforms are incredibly powerful and introducing him to game objects allows us to create some very complex user interfaces. Already. So basically this whole video should show you guys that really with a good understanding and a good intuition of the correct transform you can accomplish very very complex user interfaces. So I want to go ahead and recap by just bringing up the example that we started with and hopefully the the individual that the nuances of this example will make a whole lot more sense. I mean to right click on the canvas select D-y and create a panel. Then I'm going to move it to have 10 units of padding. Or how about 20 units of padding around its parent again. The reason this works is because I'm in a 4.0 anchor and the anchor is stretched on the entirety of the parent. These values that I just set left top right and bottom simply dictate the distance between the edge of the rect and at the edge of its edge of its anchors. Remember if I move the anchor points the paddings will compensate for the change in anchor position. Then I'm going to come up here to the panel right click select UI and create a button and this button you can see is I'm moving it relative to the center of its parent more appropriately or more specifically I'm moving. It's relative to the position of the pivot to the anchor position meaning if I were to change this one point anchor position you'll notice that we're moving the pivot relative to the anchor position again. So really what you need to understand is the relationship between anchor points and padding and positions and pivots and those are really the things that make up this whole system. So again it's very complicated or it's not very complicated but it's it's a lot to take in and you might get frustrated with complex user interfaces when you deal with things like trying to translate and move different elements from one position to another and to do this within scripting is a little bit more complicated. There are tools available for you inside of the API that allow you to make these translations but ultimately it boils down to having an understanding or a solid grasp of anchors and pivots. But I think that just about wraps this video up. So we'll see you guys in the next one.