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 tipo del gradiente a través de la propiedad Type.
• 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.
• Eligiendo la escala del gradiente a través de la propiedad Scale.
• Eligiendo el comportamiento de muestreo de bordes del gradiente a través de la propiedad TileMode.

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.

   

3. 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.

   

   1. Haz clic en un punto clave en la secuencia de color para seleccionarlo o reposicionarlo, o agrega otro punto clave haciendo clic en cualquier parte del gráfico.
   2. Haz clic en el pequeño cuadrado junto a Color para abrir la ventana emergente de Colores, luego selecciona el color deseado para el punto clave.
   3. Si es necesario, repite estos pasos para agregar/ajustar colores a lo largo del gráfico.

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.

   

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

   

   1. Haz clic en un punto clave en la secuencia numérica para seleccionarlo o reposicionarlo, o agrega otro punto clave haciendo clic en cualquier parte del gráfico.
   2. Ingresa una combinación específica de tiempo/valor a través de las entradas de Tiempo y Valor.
   3. Si es necesario, repite estos pasos para agregar/ajustar niveles de transparencia a lo largo del gráfico.

Tipo

La propiedad Type de un gradiente establece su tipo entre Linear, Radial, Elliptical, o Conical.

• Linear — La secuencia de color/transparencia transita en línea recta a través del elemento. La dirección está controlada por su rotación y la posición por su desplazamiento. Este es el valor predeterminado.

• Radial — La secuencia de color/transparencia irradia hacia afuera desde el centro del elemento, opcionalmente desplazada por Offset. El radio se define por el promedio del ancho y la altura del elemento dividido por dos, efectivamente $\text{(width+height)/4}$. Rotation no tiene efecto en un gradiente radial.

• Elliptical — La secuencia de color/transparencia irradia hacia afuera desde el centro del elemento en una elipse, opcionalmente desplazada por Offset. Los radios horizontal y vertical de la elipse son la mitad del ancho y la altura del elemento, por lo que la elipse se ajusta a los límites del elemento. Rotation rota los ejes de la elipse.

• Conical — La secuencia de color/transparencia barre en sentido horario alrededor del centro del elemento, opcionalmente desplazada por Offset. Rotation controla el ángulo de inicio y final de la barrida. Por defecto, esto barre de 0 a 360 grados, pero los valores de Scale menores que 1 pueden reducir ese ángulo.

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 la altura 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:

Escala

La Scale de un gradiente multiplica la extensión del gradiente, controlando cuánto de la secuencia de color/transparencia es visible dentro del elemento.

• Cuando Scale es menor que 1, el gradiente abarca menos que la extensión completa. El color/transparencia restante se llena de acuerdo con la propiedad TileMode.

• Cuando Scale es mayor que 1, el gradiente abarca más que la extensión completa y solo una parte del color/transparencia es visible.

• Para gradientes de Elliptical, Scale afecta ambos radios de la elipse.

Modo de mosaico

La propiedad TileMode establece cómo se repite el gradiente cuando la secuencia completa no cubre completamente el elemento padre.

• Clamp — Modo predeterminado donde los valores de color/transparencia al inicio y al final de la secuencia se extienden infinitamente, por lo que los valores de inicio llenan cualquier área antes del gradiente y los valores finales llenan cualquier área después de él.

• Repeat — El gradiente se repite envolviendo la secuencia de color/transparencia de manera continua desde el final de vuelta al inicio. Esto puede producir una costura visible si los primeros y últimos valores de color/transparencia en la secuencia difieren.

• Mirror — El gradiente se refleja en cada límite, por lo que la secuencia de color/transparencia rebota. Esto produce una repetición suave sin costura, ya que la dirección se invierte en cada borde del mosaico.

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 inglete).
• 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 (predeterminado) 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 padre de un objeto de texto como TextLabel, se aplica al contorno del texto; cuando pones UIStroke como padre 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 padres 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" (consistentes 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 altura. Offset redondea las esquinas a un número específico de píxeles, independientemente del ancho/altura 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 para su instancia de UI padre. Una sombra puede seguir la forma rectangular del padre o los glifos de un objeto de texto. Las sombras de forma pueden aparecer fuera o dentro del padre, y enmascarar el área directamente detrás del padre. Tanto las sombras de forma como las de texto pueden usar un gradiente de color.

Si el padre tiene un UICorner o una GuiObject.Rotation diferente de cero, su sombra de forma sigue las mismas esquinas o rotación. UIShadow no admite Path2D o texturas.

Sombras de forma y texto

La propiedad Mode determina qué proyecta la sombra, y ambos modos pueden coexistir bajo el mismo padre.

• Shape es el predeterminado. La sombra sigue el área rectangular de cualquier GuiObject.
• Text sigue los glifos de texto de un TextLabel, TextButton, o TextBox. Otros objetos de UI no renderizan una sombra en este modo.

Spread, Inset, y ShowBehindParent no tienen efecto en el modo de texto.

Desenfoque

La propiedad BlurRadius determina el desenfoque 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 la altura 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 con 0 siendo completamente opaco y 1 siendo completamente transparente.

Para una sombra multicolor, inserta un UIGradient como hijo del UIShadow. El gradiente afecta la sombra sin cambiar el relleno del padre.

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.

Sombras internas

Establece Inset en true para renderizar la sombra encima y dentro del padre en lugar de detrás de él. Valores positivos de Spread expanden una sombra interna hacia el centro del padre.

Revelar contenido detrás de un padre transparente

Por defecto, ShowBehindParent es true, por lo que toda la sombra de forma se renderiza, incluida la porción directamente detrás del padre. Establecerlo en false enmascara esa porción de la sombra. Esto evita que la sombra oscurezca el contenido visible a través de un padre transparente.

Esta propiedad no tiene efecto en sombras internas o de texto.

Sombras en capas

Agrega múltiples instancias de UIShadow al mismo padre para combinar efectos. La propiedad ZIndex controla su orden de renderizado. Las sombras con valores más bajos se renderizan detrás de las sombras con valores más altos.

El orden de renderizado de las sombras que comparten el mismo ZIndex es indefinido. Asigna a cada sombra hermana un valor diferente cuando su orden es importante.