Modificadores de apariencia de la interfaz de usuario

Al utilizar modificadores de apariencia, puedes personalizar aún más la apariencia de tus GuiObjects.

• Aplica un gradiente al fondo de un objeto.
• Aplica un trazo al texto o a un borde.
• Establece esquinas redondeadas para un objeto.
• Aumenta el relleno entre los bordes de un objeto.
• Agrega una sombra detrás de un objeto.

Gradiente

El objeto UIGradient aplica un gradiente de color y transparencia a su objeto padre GuiObject.

Puedes configurar el gradiente de la siguiente manera:

• Estableciendo sus colores a través de un ColorSequence en la propiedad Color del gradiente.
• Estableciendo su transparencia a través de un NumberSequence en la propiedad Transparency del gradiente.
• Eligiendo el punto de inicio del gradiente (dentro o fuera de los límites del padre) a través de la propiedad Offset.
• Eligiendo el ángulo del gradiente a través de la propiedad Rotation.

Secuencia de color

Para establecer la secuencia de color de un gradiente:

1. En la ventana del Explorador, selecciona el UIGradient.

2. En la ventana de Propiedades, haz clic dentro del campo de propiedad Color, luego haz clic en el botón ⋯ a la derecha del cuadro de entrada. Se mostrará un pop-up de secuencia de color.

   

   Cada triángulo en el eje inferior de la secuencia de color es un punto clave que determina el valor de color en ese punto.

   

3. Haz clic en un punto clave en la secuencia de color, luego haz clic en el pequeño cuadrado junto a Color para abrir la ventana emergente de Colores.

4. Selecciona el color deseado para el punto clave.

   

5. Si es necesario, puedes:

   • Agregar otro punto clave haciendo clic en cualquier parte del gráfico.
   • Arrastrar un punto clave existente a una nueva posición, o seleccionar un punto clave e ingresar un valor de tiempo específico a través de la entrada Time.
   • Eliminar un punto clave seleccionándolo y haciendo clic en el botón Delete.
   • Restablecer la secuencia haciendo clic en el botón Reset.

Transparencia

Para ajustar la transparencia de un gradiente a lo largo de su rango:

1. En la ventana del Explorador, selecciona el UIGradient.

2. En la ventana de Propiedades, haz clic dentro del campo de propiedad Transparency, luego haz clic en el botón ⋯ a la derecha del cuadro de entrada. Se mostrará un pop-up de secuencia numérica.

   

   Cada cuadrado en el gráfico de la secuencia numérica es un punto clave que determina el valor de transparencia en ese punto.

   

3. Haz clic y arrastra cualquier punto clave, o selecciona un punto clave e ingresa una combinación específica de tiempo/valor a través de las entradas Time y Value.

   

4. Si es necesario, puedes:

   • Agregar otro punto clave haciendo clic en cualquier parte del gráfico.
   • Eliminar un punto clave seleccionándolo y haciendo clic en el botón Delete.
   • Restablecer la secuencia haciendo clic en el botón Reset.

Desplazamiento y rotación

Las propiedades Offset y Rotation te permiten ajustar los puntos de control del gradiente y su ángulo. Como se ilustra en los siguientes diagramas, Offset se basa en un porcentaje del ancho o alto del padre, y tanto los valores positivos como negativos son válidos.

De manera similar, cuando rotas el gradiente, los puntos de control también rotan:

Trazo

La instancia UIStroke aplica un contorno al texto o a un borde. Las características clave incluyen:

• Color ajustable y grosor del contorno.
• Capacidad para establecer la transparencia del trazo de forma independiente de la transparencia del padre.
• Posición y/o desplazamiento personalizables en relación con el borde del padre.
• Tres estilos de esquina (redondeado, biselado o en punta).
• Soporte para gradiente en el trazo a través de la instancia UIGradient.

Grosor

Puedes establecer el ancho del trazo a través de la propiedad Thickness, que se mide en píxeles (por defecto) o escalada en relación con el padre, dependiendo del StrokeSizingMode del modificador. Si el trazo está en texto y StrokeSizingMode está configurado en ScaledSize, el grosor es relativo al tamaño de la fuente.

Color o gradiente

Puedes establecer el color del trazo a través de la propiedad Color, así como insertar una instancia hija de UIGradient para crear trazos en gradiente.

Contorno de texto o borde

Dependiendo del tipo de su padre, UIStroke opera como un contorno de texto o como un borde. Cuando pones UIStroke como hijo de un objeto de texto como TextLabel, se aplica al contorno del texto; cuando pones UIStroke como hijo de otros GuiObjects, se aplica al borde.

Cuando se aplica a un objeto de texto, puedes anular el comportamiento predeterminado del trazo mediante la propiedad ApplyStrokeMode, lo que te permite aplicar el trazo a los límites del objeto en lugar de al texto en sí. Incluso puedes controlar el contorno del texto y el borde de forma independiente al poner dos instancias de UIStroke como hijas de un objeto de texto, una configurada en Contextual y la otra en Borde.

Posición/desplazamiento del borde

BorderStrokePosition establece la posición del trazo en relación con el borde de su padre y BorderOffset te permite especificar un desplazamiento adicional a la posición del trazo.

Transparencia

La propiedad Transparency establece la transparencia del trazo de forma independiente de la BackgroundTransparency del objeto padre o de la TextTransparency. Esto te permite renderizar texto y bordes que son "huecos" (que consisten solo en un contorno).

Estilo de esquina

La propiedad LineJoinMode te permite controlar cómo se interpretan las esquinas. Acepta un valor de Round, Bevel, o Miter.

Capas

Para superponer múltiples instancias de UIStroke en un GuiObject de adelante hacia atrás, puedes utilizar la propiedad ZIndex. Aquellos con un ZIndex más bajo se renderizan debajo (detrás) de aquellos con un ZIndex más alto.

Ten en cuenta que el orden de renderizado para las instancias de UIStroke con el mismo ZIndex es indefinido. No apliques múltiples instancias de UIStroke con el mismo índice si su orden de renderizado es importante.

Esquinas

La instancia UICorner aplica deformación a las esquinas de su padre GuiObject. Puedes controlar el radio aplicado a través de la propiedad CornerRadius utilizando Scale o Offset.

Scale redondea las esquinas a un porcentaje basado en la longitud total del borde más corto del padre, lo que significa que una escala de 0.5 o superior deforma al padre en una forma de "pastilla", independientemente de su ancho o alto. Offset redondea las esquinas a un número específico de píxeles, independientemente del ancho/alto del padre.

También puedes controlar esquinas individuales a través de las propiedades TopLeftRadius, TopRightRadius, BottomRightRadius, y BottomLeftRadius.

Relleno

Un objeto UIPadding aplica relleno superior, inferior, izquierdo y/o derecho al contenido del padre GuiObject. Por ejemplo, puedes mover el texto dentro de una etiqueta de texto hacia abajo o hacia arriba aplicando un desplazamiento a la propiedad PaddingBottom del modificador.

Sombra

Un objeto UIShadow renderiza una sombra detrás de su instancia de UI padre. Las características clave incluyen:

• Ajustar la difuminación de la sombra.
• Ajustar el color y la transparencia de la sombra.
• Ajustar el desplazamiento y la expansión de la sombra.
• Si el padre está rotado por GuiObject.Rotation, la sombra también se rotará.
• Si el padre tiene esquinas redondeadas, la sombra también tendrá esquinas redondeadas.

Difuminación

La propiedad BlurRadius determina la difuminación de la sombra. Un valor más grande hace que los bordes de la sombra aparezcan más suaves. Ten en cuenta que el factor de escala de esta propiedad UDim es relativo al ancho o alto del padre, el que sea más corto.

Color y transparencia

La propiedad Color determina el color de la sombra, mientras que Transparency establece la transparencia de la sombra, siendo 0 completamente opaco y 1 completamente transparente.

Desplazamiento y expansión

La propiedad Offset mueve la sombra en relación con la posición del padre, mientras que Spread expande o reduce la sombra en relación con el tamaño del padre.