Studio / ROBLOX

Proporciones de una tarjeta en Roblox Studio: configurar UIAspectRatioConstraint

Conserva la forma del elemento correcto sin vincular un icono cuadrado con una descripción larga. Elige el objetivo, fija su proporción y comprueba áreas estrechas, layouts y traducciones.

Actualizado: 2026-10-07

Identifica qué se estira realmente #

Empieza con un elemento: por ejemplo, una imagen cuadrada que se ensancha al cambiar el panel. Comprueba si cambia la forma de la zona de imagen o solo la posición de otros elementos de la tarjeta. Son tareas distintas. Conservar proporciones significa mantener la relación entre ancho y alto, no el mismo número de píxeles en todos los dispositivos.

Escribe una expectativa: «La zona del icono sigue cuadrada cuando cambia su contenedor». Se puede comprobar y no promete reparar todo el menú. Usamos una tarjeta de práctica propuesta; no se midieron juegos publicados ni tamaños reales en Studio.

Elige el elemento que necesita proporción #

Divide ItemCard en IconArea, Title y Description. El icono puede necesitar un cuadrado mientras el texto necesita varias líneas. Aplicar una restricción cuadrada a toda la tarjeta plantea otro problema de diseño: la descripción larga sigue teniendo que caber en esa forma.

Empieza por IconArea. Son nombres del ejemplo; Roblox no crea la estructura automáticamente. Haz un Frame separado o usa un GuiObject adecuado del prototipo. Si contiene un ImageLabel, comprueba su colocación aparte: un contenedor exterior cuadrado no explica todos los ajustes de las imágenes hijas.

Añade el constraint bajo el objetivo #

Localiza el elemento exacto en Explorer y añade UIAspectRatioConstraint como hijo. La documentación de Roblox identifica el GuiObject padre como objetivo de la restricción. Selecciona el propio constraint y encuentra AspectRatio.

Antes de continuar, comprueba la jerarquía: ItemCard → IconArea → UIAspectRatioConstraint si limitas IconArea. Directamente bajo ItemCard, la restricción afecta a la tarjeta completa. Es fácil confundir un elemento de nombre parecido en otro panel, así que verifica el padre, no solo la propiedad.

El constraint afecta a su padre — Jerarquía original: la restricción está en IconArea, el texto queda al lado.

Fija e interpreta la proporción #

AspectRatio expresa ancho dividido entre alto. Usa 1 para un cuadrado, 2 para el doble de ancho que de alto y 0.5 para la mitad de ancho que de alto. Introduce un número, no el texto «1:1» ni una cantidad de píxeles.

Empieza con una proporción y no la cambies en cada tamaño de pantalla si debe conservarse la forma. Para una imagen cuadrada, usa un recurso cuadrado propio y observa el estiramiento. Nuestro diagrama de tres rectángulos explica proporciones, no muestra una interfaz medida en Studio.

Separa forma de tamaño absoluto #

Cuadrados de 120×120 y 180×180 tienen tamaños distintos, pero ambos dan proporción 1. Un rectángulo de 240×120 da 2 y uno de 120×240 da 0.5. Son ejemplos aritméticos elegidos, no medidas del proyecto. Ayudan cuando esperas un cuadrado y comparas únicamente el ancho.

Si la forma es correcta pero la tarjeta resulta grande, no uses una proporción arbitraria solo para reducirla. Mira primero el tamaño del contenedor y las herramientas de límites. UISizeConstraint y UIAspectRatioConstraint tratan cuestiones relacionadas pero distintas: límites de tamaño y proporciones. Comprueba el efecto conjunto en tu layout.

Tamaños de práctica	Proporción ancho/alto
120 × 120	1
180 × 180	1
240 × 120	2
120 × 240	0.5

Repite con un padre estrecho y otro ancho #

Mantén el mismo artículo y texto, y compara dos áreas disponibles: estrecha y ancha. Anota tamaño del padre, ancho y alto observados del objetivo y proporción configurada. Para comparar dispositivos puedes consultar nuestra guía de Device Simulator. No combines cambiar el perfil con sustituir el contenido.

Comprueba también la posición: el icono puede seguir cuadrado y tapar la salida o exceder el área disponible. Eso no contradice la aritmética; revela otro problema de distribución. Tras corregirlo, repite el mismo par de tamaños y artículo.

Considera layouts y otras restricciones #

Si el elemento participa en UIListLayout, no puedes explicar su tamaño solo con los ajustes de la lista. La documentación advierte que UIAspectRatioConstraint toma el control del tamaño sobre el layout. Registra layouts y otros constraints antes de cambiar varias propiedades juntas.

Para investigar, compara un elemento aislado de práctica con el de tu lista. Usa un prototipo separado, conserva la estructura original y anota un ajuste cambiado. No elimines el layout del menú real solo porque una imagen aislada se ve bien. Su forma fuera de la lista no prueba su colocación dentro.

Comprueba nombres largos y traducciones aparte #

Prueba un título corto y después una cadena larga que pueda aparecer realmente. Revisa título, descripción y acción disponible. La proporción no elige tamaño de letra ni garantiza que toda traducción quepa. Roblox documenta límites de texto y tamaño automático aparte de las proporciones.

Si falta espacio, decide qué necesita ver el jugador: descripción completa, varias líneas o un panel de detalles. No vuelvas ilegible el texto para mantener un cuadrado exterior. En nuestro ejercicio el cuadrado corresponde al icono, por lo que imagen y espacio de texto pueden tratarse por separado.

Comprueba la acción, no solo la imagen #

Abre la tarjeta, elige un artículo y cierra el panel con sus controles previstos. Repite tras redimensionar. La geometría correcta no prueba el manejador del botón, el estado seleccionado ni la entrada táctil. Son comprobaciones de comportamiento.

Caso ficticio: el icono ya es cuadrado, pero el texto vecino tapa la salida e impide activarla. Registra ambas conclusiones: proporción corregida y salida pendiente. No declares lista toda la tarjeta por una captura. El ejemplo no crea lógica real de selección o cierre.

Conserva un registro comprensible #

Anota objetivo, padre, AspectRatio, área disponible, contenido y presencia de layout. Añade expectativa y observación para cada distribución. Si la prueba solo está prevista, indícalo: un diagrama y un cálculo no equivalen a ejecutar Studio.

Nuestro ejercicio está listo cuando conserva la forma prevista con texto legible y una acción accesible en las condiciones elegidas. No garantiza tamaño físico idéntico ni todos los dispositivos y traducciones. Las ilustraciones originales explican proporción y jerarquía, no mediciones de juegos reales.

Comprobación	Qué registrar
Objetivo del constraint	Elemento exacto y padre
Layout	Lista y otras restricciones
Traducción larga	Misma cadena en dos tamaños
Acción	Ruta de elección y salida

Fuentes originales

Roblox Creator Hub — Size modifiers and constraints
Roblox Creator Hub — UIAspectRatioConstraint