Unity UI System: Rect Transform
UI Elements don’t have a normal transform component. They use a component called a Rect Transform. This component acts in much the same way as a normal transform component with some slight differences. I’ll go over a few here:
With a normal transform component you can move an object around on the X,Y, and Z axis by pressing W and pulling whichever arow you want to move the object. In this example, the UI I’m displaying is using a ScreenSpace Overlay canvas. When I move it on the Z axis on the scene view, it doesn’t move back and forward.
But the worldspace canvas allows for z axis changes even though the elements of the canvas still use a rect transform.
SO not all rect transforms are the same.
The coolest part about a rect transform, to me, is the anchor presets. These basically allow for your objects to stay anchored to certain corners of the screen, or to stretch on specific axis depending on the device/screen resolution.
Lets say I want this hammer icon to always be in the top right corner of the screen no matter what device/screen resolution I’m displaying it on. Right now, if I change the screen resolution, you can see the icon doesnt stay in the top right corner.
But if I anchor it to the top right, it WILL. You can also see this on different device types.
There is also options for stretching your UI element. The blue column on the right.
In this example, I’ve got a Panel that contains 1 image. I want the image to envelope the entirety of the panel its in. So I can set the anchor preset to stretch on all 4 corners and set all the values to 0.
This can be helpful for visualizing borders for certain UI scenarios.
1 more cool thing about the anchor presets is the ability to change the pivot point of your UI element, which allows me to rotate the ui element on a customized pivot point. You can also change the position of the object by simply holding alt.
Getting those shortcuts under your belt can dramatically increase your productivity and shorten the time it takes to set up UI.
