Junto con el dimensionado básico de los objetos de interfaz de usuario, puedes utilizar modificadores de tamaño para escalar un objeto proporcionalmente o redimensionarlo automáticamente. También puedes insertar restricciones de tamaño para controlar la relación de aspecto, o establecer un tamaño o tamaño de texto mínimo y máximo.
Escala
Un objeto UIScale almacena un valor numérico que multiplica la propiedad AbsoluteSize del objeto padre GuiObject. Por ejemplo, si deseas que un objeto sea el doble de grande de lo que es actualmente, puedes insertar un objeto UIScale con una propiedad Scale de 2.
Este modificador es útil para "acercar" mientras diseñas una interfaz de usuario detallada en Studio, ya que escala proporcionalmente el objeto y todos sus hijos, incluidos cualquier modificadores de apariencia aplicados como UIStroke o UICorner. También es útil para animar el tamaño de un objeto, por ejemplo, para aumentar ligeramente el tamaño de un botón cuando un jugador coloca el mouse sobre él.
Redimensionado automático
La propiedad AutomaticSize redimensiona automáticamente un objeto padre GuiObject al tamaño de sus descendientes. Puedes usar esta propiedad en una variedad de casos, incluyendo:
- Ampliar un GuiObject para ajustar el texto que ha sido localizado en muchos idiomas.
- Permitir a los usuarios ingresar texto dentro de un TextBox, ajustando automáticamente su tamaño según la cantidad de texto ingresado.
- Ajustar automáticamente el tamaño de los objetos de texto utilizando marcadores de texto enriquecido, incluyendo tipo y tamaño de fuente.
Puedes habilitar la propiedad AutomaticSize para cualquier GuiObject. Por defecto, está configurada en None, pero puedes cambiar su valor para tener un control específico sobre en qué dirección(es) el GuiObject se redimensiona para ajustarse a su contenido.
ScrollingFrame utiliza la propiedad AutomaticCanvasSize en lugar de AutomaticSize. Se comporta de la misma manera, pero redimensiona el CanvasSize del marco, no su base Size.
Para habilitar el redimensionado automático:
En la ventana de Explorador, haz clic en cualquier GuiObject, como un Frame, TextBox o ImageLabel.
En la ventana de Propiedades, navega a la propiedad AutomaticSize (AutomaticCanvasSize para ScrollingFrame) y configúralo en una de las siguientes opciones:
- X — Redimensiona el contenido horizontalmente.
- Y — Redimensiona el contenido verticalmente.
- XY — Redimensiona el contenido tanto horizontal como verticalmente.
Una vez que el redimensionado automático esté configurado, ten en cuenta que otras propiedades del objeto se comportan de la siguiente manera:
Similar al concepto de dimensionado de un objeto, AutomaticSize tiene en cuenta la propiedad AnchorPoint al redimensionar el contenido. Por ejemplo, el siguiente video muestra tres TextLabels que se redimensionan automáticamente desde su punto de anclaje.
- La etiqueta superior tiene un valor de AnchorPoint de (0, 0.5) que lo ancla al medio del lado izquierdo.
- La etiqueta del medio tiene un valor de AnchorPoint de (0.5, 0.5) que lo ancla al centro.
- La etiqueta inferior tiene un valor de AnchorPoint de (1, 0.5) que lo ancla al medio del lado derecho.
Restricciones
Hay tres tipos de restricciones que puedes usar para un objeto de interfaz de usuario: tamaño, tamaño de texto, y relación de aspecto. Para usar una restricción, debes establecerla como hijo del GuiObject que deseas restringir.
Tamaño
La UISizeConstraint especifica un tamaño mínimo y máximo para un GuiObject. Esta restricción asegura que el GuiObject no se vuelva demasiado pequeño o grande en diferentes tamaños de pantalla.
Por ejemplo, si configuras la propiedad MinSize a (200, 200) y la propiedad MaxSize a (400, 400), el GuiObject no puede escalarse a menos de 200×200 píxeles ni más de 400×400 píxeles.
Cuando un objeto de UI está bajo el control de una estructura de diseño como UIListLayout y una UISizeConstraint, la restricción sobrescribirá el diseño y controlará el tamaño del objeto.
Tamaño de texto
La UITextSizeConstraint especifica un tamaño de fuente mínimo y máximo para un GuiObject con texto, como un TextLabel, TextButton, o TextBox. Esta restricción asegura que el texto dentro de un GuiObject no se vuelva ilegible o demasiado grande.
Si habilitas la propiedad TextScaled del objeto padre GuiObject, el tamaño del texto escala con el tamaño del contenedor y respeta las restricciones incluso si el objeto se vuelve más pequeño o más grande que los valores de MinTextSize y MaxTextSize.
Por ejemplo, el siguiente objeto TextLabel tiene una UITextSizeConstraint con un valor de MinTextSize de 50 y un valor de MaxTextSize de 80. Incluso cuando el TextLabel se vuelve más pequeño, la fuente nunca se reduce a menos de 50 píxeles, y cuando el objeto se vuelve grande, la fuente nunca excede los 80 píxeles.
No utilices valores de propiedad MinTextSize más bajos que 9 o el texto será difícil de leer para muchos espectadores.
Relación de aspecto
La UIAspectRatioConstraint impone una relación de aspecto ancho-altura en un GuiObject sin importar su tamaño básico, incluso si ese tamaño se establece como un porcentaje del padre. Por ejemplo, insertar esta restricción como un hijo de un Frame y configurar la propiedad AspectRatio de la restricción a 2 (2:1) mantiene el ancho del marco al doble de su altura. De manera similar, configurar la propiedad AspectRatio de esta restricción a 0.5 (0.5:1) mantiene el ancho del marco en la mitad de su altura.
Configurar la propiedad AspectRatio de esta restricción al valor predeterminado de 1 (1:1) es una forma conveniente de evitar escalados/estiramientos no proporcionales de un ImageLabel con un activo de imagen cuadrada, como un miniatura de avatar.
Cuando un objeto de UI está bajo el control de una estructura de diseño como UIListLayout y una UIAspectRatioConstraint, la restricción sobrescribirá el diseño y controlará el tamaño del objeto.