Posicionar elementos de interfaz en Unity requiere dominar un componente específico que reemplaza al transform tradicional: el rect transform. Este componente es la base para ubicar, dimensionar y transformar cualquier objeto dentro de un canvas, y comprender sus propiedades marca la diferencia entre una interfaz funcional y una que se rompe con cada cambio de resolución.
¿Qué es el rect transform y por qué reemplaza al transform?
A diferencia de los objetos 3D que usan un transform convencional para ubicarse en el espacio tridimensional, los elementos de UI utilizan el rect transform para posicionarse dentro del canvas [0:10]. En la parte superior de este componente encontramos las variables de posicionamiento: posición en X, Y, Z, además de ancho (width) y alto (height). Sin embargo, las propiedades visibles dependen directamente de la configuración de los anchors del objeto.
¿Cómo funcionan los anchor presets?
Al hacer clic en el ícono de anchors se despliega el menú llamado Anchor Presets [0:43]. Este menú define respecto a qué puntos del canvas el objeto se posiciona y calcula su tamaño. Existen dos opciones principales:
- Posicionarse respecto a un punto fijo: el objeto toma como referencia una ubicación específica del canvas (centro, esquina superior derecha, medio izquierdo, etc.).
- Expandirse respecto a ejes (stretch): el objeto se estira horizontal, vertical o en ambas direcciones.
Por defecto, los elementos arrancan con el anchor preset en el centro [1:00]. Esto significa que la posición cero, cero coloca al objeto exactamente en el centro del canvas. Si cambiamos el anchor a la esquina superior derecha, esa misma posición cero, cero ubicará al objeto en dicha esquina [1:17].
¿Qué ocurre cuando se usa el modo stretch?
Cuando seleccionamos una opción de stretch, las propiedades cambian de X, Y, ancho y alto a left, top, right y bottom [2:00]. Estos valores representan la distancia en píxeles entre cada borde del rect transform y el borde correspondiente del canvas. Si colocamos cero en todas las propiedades, el elemento ocupará todo el canvas. Si asignamos cien a cada una, habrá un margen de cien píxeles en cada lado [2:21].
El stretch no tiene que aplicarse en todas las direcciones. Podemos hacer stretch solo en el eje vertical y mantener una posición libre en X, o viceversa [2:42].
¿Qué es el punto de pivote y cómo afecta las transformaciones?
Cada elemento de UI tiene un punto de pivote (pivot), representado por un punto azul [3:22]. Todas las transformaciones —posición, escala y rotación— son relativas a este punto. Por defecto está en el centro (0.5, 0.5), pero podemos moverlo.
- Con el pivot en (0, 0), el punto de referencia pasa a la esquina inferior izquierda [3:38].
- Con el pivot en (0, 0.5), el punto queda en el borde izquierdo centrado verticalmente, lo que resulta ideal para barras de vida [3:55]. Al modificar la escala, esta se aplica de izquierda a derecha.
La escala de un elemento de UI es independiente de sus medidas reales [4:16]. Un objeto puede tener un width de 317 píxeles y estar escalado a la mitad. Esta separación permite animar la escala sin alterar las proporciones reales del objeto. El pivot también controla el origen de la rotación: si está a la izquierda, el objeto rota desde ese punto; si está en el centro, rota desde el centro [4:42].
¿Cómo crear layouts prácticos con anchor presets y pivotes?
Tres ejemplos concretos ilustran el poder de combinar anchor presets con puntos de pivote:
- Barra superior de pantalla completa: seleccionamos stretch hacia el top, ponemos left y right en cero, y ajustamos el pivot Y en uno para que el punto de referencia esté arriba [5:22]. Sin importar la resolución —iPhone SE o iPad Pro—, la barra se mantiene de izquierda a derecha en la parte superior [6:10].
- UI en esquina superior izquierda: anchor preset en top left, pivot en (0, 1), ancho y alto de 300, posición cero, cero [6:36].
- UI en esquina inferior izquierda: anchor preset en bottom left, pivot en (0, 0), mismas dimensiones y posición [7:00].
- UI en esquina superior derecha: anchor preset en top right, pivot en (1, 1), posición cero, cero [7:18].
Con esta configuración, los elementos permanecen fijos en sus esquinas independientemente de la resolución de pantalla [7:30].
La mejor forma de interiorizar estos conceptos es experimentar directamente. Prueba distintas combinaciones de anchor presets, puntos de pivote, escala y rotación para construir interfaces que se adapten a cualquier pantalla. ¿Qué layout te gustaría crear primero?
