El Rect Transform

What is the RectTransform and why is it essential in Unity?

The RectTransform is a fundamental component in Unity for creating user interfaces (UI). All objects within a canvas use this component for positioning, instead of the traditional Transform used in three-dimensional spaces. This component allows you to control the position on the X, Y and Z axes, as well as the width and height of the object in question. However, these properties depend on the alignment of the anchors configured on the object.

How do Anchor Presets work?

Anchor Presets are tools that define the position and size of an object in relation to a canvas. They are the key to making UI design more flexible, offering two main options:

• Positioning relative to a point: Allows the object to be placed at a specific location relative to the canvas, for example, to the center or to a corner.
• Axis expansion: Allows the object to stretch to fit the size of the canvas along the horizontal or vertical axes.

By default, elements are placed with a centered Anchor Preset, allowing the object to be positioned in the center of the canvas when it was positioned at 0,0.

Customization with Pivot points

The Pivot point controls where all transformations of a UI object, such as scaling and rotation, are performed from. By adjusting the Pivot point, you can change the behavior of the transformations:

• If the Pivot is set to 0,0, transformations occur from the lower left.
• Setting the Pivot to the center allows centered transformations, such as rotation around that point.

Example of usefulness: Setting the Pivot for one of these on X and Y axes can facilitate the creation of life bars, allowing scaling to occur from left to right.

How to use Stretch to adjust elements?

When working with UI design, the ability to adapt to different screens and resolutions is crucial. Using Stretch mode to set up a RectTransform offers great flexibility:

1. Full Stretch: The object adapts to occupy all available space on the canvas.
2. Customizable size settings: You can define custom spacing or margins by setting specific values for the left, top, right and bottom.

For example, by setting the margins to 100, we provide extra space between the object and the edge of the canvas.

Practical examples and recommendations

Creating a dynamic top bar

Imagine that you need a bar at the top that extends from one side of the screen to the other:

1. Select an Anchor Preset of Stretch to the top.
2. Set the Left and Right values to 0.
3. Set the Pivot to 1 for Y, ensuring that the axis is aligned at the top.

This approach ensures that the bar stays at the top regardless of the resolution.

Positioning UIs in corners

For UI elements in corners (e.g., top left, top right):

• Top left: Set the Anchor Preset to Top Left and set the Pivot to 0,0. Adjust its width and height as needed.
• Lower left: Select a Preset in the lower left corner and apply the Pivot settings.
• Top Right: Set the Anchor Preset to Top Right and set the Pivot's X,Y to 1,1 to ensure proper positioning.

Final Tips

Skill in handling the RectTransform is acquired through constant practice and experimentation with the different Anchor Presets, Pivot points and RectTransform properties. By exploring the different functionalities, you will not only master interface design in Unity, but you will also be able to create adaptive structures that stand out on any platform. Keep exploring and learning to perfect your UI design skills in Unity!