El Rect Transform

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:45

El Rect Transform

Curso de Creación de Interfaces de Usuario con Unity

Clase 5 de 29

Clase 5 / 29

Recursos

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?

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

El Rect Transform

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos