Layout Groups y UI responsive

El problema: mil pantallas distintas#

Tu juego se verá en móviles 16:9, tablets 4:3, monitores ultrapanorámicos... Una UI colocada "a ojo" para tu monitor se romperá en las demás. Que se adapte sola es cuestión de tres piezas: Canvas Scaler, anclas bien puestas y Layout Groups.

Paso 0: Canvas Scaler (lo primero de todo)#

En el objeto Canvas, el componente Canvas Scaler decide cómo escala toda la UI. La configuración recomendada para casi todo:

UI Scale Mode → Scale With Screen Size.
Reference Resolution: la resolución para la que diseñas (p. ej. 1920×1080).
Match: el deslizador Width/Height. 0.5 equilibra ancho y alto; para juegos que giran de horizontal a vertical, ajústalo según qué eje importa más.

Sin esto, nada se adapta

Si dejas el Canvas Scaler en Constant Pixel Size (el valor por defecto), la UI mantiene el tamaño en píxeles y se ve enorme en pantallas pequeñas o diminuta en grandes. Scale With Screen Size con una resolución de referencia es el punto de partida de toda UI responsive.

Las anclas (que vimos en Canvas y anclas) hacen el resto del trabajo de posición: anclar cada elemento a su esquina/borde para que se mantenga en su sitio al cambiar el tamaño.

Layout Groups: colocar elementos automáticamente#

Un Layout Group ordena a sus hijos por ti, sin colocarlos a mano. Los pones en el objeto contenedor:

Componente	Coloca los hijos
Horizontal Layout Group	En fila, uno al lado del otro
Vertical Layout Group	En columna, uno debajo de otro
Grid Layout Group	En cuadrícula (celdas de tamaño fijo)

Ejemplos: una barra de habilidades (Horizontal), una lista de opciones del menú (Vertical), un inventario de casillas (Grid). Añades o quitas hijos y se reordenan solos.

Ajustes clave del grupo:

Spacing: separación entre elementos.
Padding: margen interior del contenedor.
Child Alignment: dónde se alinean (centro, arriba-izquierda...).
Child Force Expand / Control Child Size: si los hijos se estiran para llenar el espacio.

Content Size Fitter: crecer con el contenido#

Un Content Size Fitter hace que un objeto cambie de tamaño según su contenido. El caso típico: un cuadro de diálogo o un tooltip que debe ser tan alto como el texto que contiene.

Ponlo en el objeto que debe ajustarse.
Vertical Fit → Preferred Size hace que su altura se adapte al texto.

Combinado con un Vertical Layout Group, consigues paneles que crecen y encogen solos según lo que muestran (una lista de misiones, un log de chat).

El combo mágico: Layout Group + Content Size Fitter

Vertical Layout Group (ordena los hijos) + Content Size Fitter (ajusta el contenedor a esos hijos) = paneles dinámicos perfectos. Es la receta para listas, inventarios que crecen, chats y diálogos, sin recolocar nada por código.

Cuándo forzar un recálculo por código#

Si añades elementos por código y el layout no se actualiza al instante, fuerza el recálculo:

using UnityEngine;
using UnityEngine.UI;

// tras instanciar elementos dentro del contenedor:
LayoutRebuilder.ForceRebuildLayoutImmediate(contenedor as RectTransform);

Rara vez hace falta, pero es el truco cuando un layout "va un frame por detrás".

El área segura (móvil)#

Los móviles con notch o esquinas redondeadas tapan parte de la pantalla. El Safe Area define la zona visible real. Para que tu UI no quede bajo el notch, usa un objeto que ajuste su RectTransform a Screen.safeArea (hay un patrón estándar de "SafeAreaFitter" para esto).

Errores frecuentes#

Dejar el Canvas Scaler en Constant Pixel Size (la UI no escala).
Colocar todo a mano sin anclas ni Layout Groups (se rompe al cambiar de resolución).
Anclas todas al centro: los elementos se despegan de los bordes.
Olvidar el Safe Area en móvil (UI bajo el notch).
Poner un Layout Group y luego mover los hijos a mano (el grupo los recoloca).

Ponte a prueba#

📝 Pon a prueba lo aprendido

Resumen#

Una UI responsive se apoya en tres piezas: Canvas Scaler en Scale With Screen Size con resolución de referencia, anclas bien puestas (ver Canvas y anclas) y Layout Groups (Horizontal/Vertical/Grid) que colocan los hijos solos. Suma un Content Size Fitter para que los contenedores crezcan con su contenido, y no olvides el Safe Area en móvil. Con esto tu interfaz se ve bien en cualquier resolución sin recolocar nada a mano.