Working with RectTransforms

- Now, let's talk a little bit more about direct transform that each of our UI components has. Let's go back into our UI intro scene and let's select our button. We'll also show direct transform properties in the inspector. And before we dig into this, let's switch back over to 2D mode and also focus on our button. Direct transform is made up of several properties. The most important one is going to be at the top, which is our positions, as well as the width and height.

Now, this depends a lot on how our anchors are set up. Right now, because our Rect Transform is centered, we have a position x, a position y, a position z, and a width and a height. There are templates that change the anchor presets. Each of these effect the way that our button is laid out. We're going to dive a little bit more into the anchors in the next video. But it's important to note, as you change the anchor type you may also change the way that you're able to lay out the x and y position.

If you stretch out the anchors, instead of having a distinct x, y, width and height, you might have a top, left, right, or bottom. Also, the anchors can manually be changed via the drop-down. The next thing that we should talk about is the pivot. The pivot represents the area that the UI element will rotate around or be laid out against. In this case, you can see there is a light crosshair in the middle of our button.

And that's because our pivot and our anchors are set to the middle of the button. Pivot, x, and y are a zero to one relationship. Depending on how you're laying it out, zero is on the left, or in the case of y, zero is on the bottom. And one on the x position is to the right. And on y it'll be at the top. Last is the rotation and the scale. These work exactly how you would expect them on any other transform object.

Now, in the next video, we'll dive deeper into the anchors and show you how each of the anchor types affect the layout of our element inside of the Canvas.