Al utilizar modificadores de apariencia, puedes personalizar aún más la apariencia de tus GuiObjects.
- Aplica un degradado al fondo de un objeto.
- Aplica un contorno al texto o a un borde.
- Establece esquinas redondeadas para un objeto.
- Aumenta el relleno entre los bordes de un objeto.
- Agrega una sombra proyectada detrás de un objeto.
Degradado
El objeto UIGradient aplica un degradado de color y transparencia a su GuiObject padre.
Puedes configurar el degradado mediante:
- Estableciendo su transparencia mediante un NumberSequence en la propiedad Transparency del degradado.
- Eligiendo el punto de inicio del degradado (dentro o fuera de los límites del padre) a través de la propiedad Offset.
- Eligiendo el ángulo del degradado mediante la propiedad Rotation.
Secuencia de Color
Para establecer la secuencia de color de un degradado:
En la ventana del Explorador, selecciona el UIGradient.
En la ventana de Propiedades, haz clic dentro del campo de la propiedad Color, luego haz clic en el botón ⋯ a la derecha del cuadro de entrada. Aparecerá un pop-up de secuencia de colores.
Cada triángulo en el eje inferior de la secuencia de colores es un punto clave que determina el valor de color en ese punto.
Haz clic en un punto clave en la secuencia de colores, luego haz clic en el pequeño cuadrado junto a Color para abrir la ventana emergente Colores.
Selecciona el color deseado para el punto clave.
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 temporal específico a través de la entrada Tiempo.
- Eliminar un punto clave seleccionándolo y haciendo clic en el botón Eliminar.
- Restablecer la secuencia haciendo clic en el botón Restablecer.
Transparencia
Para ajustar la transparencia de un degradado en todo su rango:
En la ventana del Explorador, selecciona el UIGradient.
En la ventana de Propiedades, haz clic dentro del campo de la propiedad Transparency, luego haz clic en el botón ⋯ a la derecha del cuadro de entrada. Aparecerá un pop-up de secuencia de números.
Cada cuadrado en el gráfico de la secuencia de números es un punto clave que determina el valor de transparencia en ese punto.
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 Tiempo y Valor.
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 Eliminar.
- Restablecer la secuencia haciendo clic en el botón Restablecer.
Desplazamiento y rotación
Las propiedades Offset y Rotation te permiten ajustar los puntos de control del degradado y su ángulo. Como se ilustra en los siguientes diagramas, Offset se basa en un porcentaje del ancho o la altura del padre, y se aceptan valores tanto positivos como negativos.
Similarmente, cuando giras el degradado, los puntos de control también giran:
Contorno
La instancia UIStroke aplica un contorno al texto o a un borde. Las características clave incluyen:
- Capacidad de establecer la transparencia del contorno de manera 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 degradados a través de la instancia UIGradient.
Grosor
Puedes establecer el ancho del contorno a través de la propiedad Thickness, que se mide en píxeles (por defecto) o escalado en relación con el padre, dependiendo del StrokeSizingMode del modificador. Si el contorno está en texto y StrokeSizingMode está configurado en ScaledSize, el grosor es relativo al tamaño de la fuente.
Color o degradado
Puedes establecer el color del contorno a través de la propiedad Color, así como insertar una instancia secundaria de UIGradient para crear contornos degradados.
Tanto el objeto padre como UIStroke pueden tener instancias secundarias de UIGradient, permitiéndote establecer degradados en el contorno y el relleno de forma independiente.
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 contorno mediante la propiedad ApplyStrokeMode, que te permite aplicar el contorno a los límites del objeto en lugar del texto en sí. También puedes controlar el contorno del texto y el borde de forma independiente al poner dos instancias de UIStroke como hijos de un objeto de texto, una configurada como Contextual y la otra como Borde.
Posición/desplazamiento del borde
BorderStrokePosition establece la posición del contorno en relación con el borde de su padre y BorderOffset te permite especificar un desplazamiento adicional para la posición del contorno.
Transparencia
La propiedad Transparency establece la transparencia del contorno de manera independiente de la BackgroundTransparency del objeto padre o de la TextTransparency. Esto te permite representar 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.
Superposición
Para superponer múltiples instancias hermanas de UIStroke en un GuiObject de frente hacia atrás, puedes utilizar la propiedad ZIndex. Aquellos con un ZIndex más bajo se renderizan por 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 GuiObject padre. 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, sin importar el ancho/altura del padre.
También puedes controlar esquinas individuales a través de las propiedades TopLeftRadius, TopRightRadius, BottomRightRadius, y BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Relleno
Un objeto UIPadding aplica relleno superior, inferior, izquierdo y/o derecho al contenido de su GuiObject padre. 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 proyectada detrás de su instancia de UI padre. Las características clave incluyen:
- Ajustar desenfoque 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.
UIShadow no soporta texto. Si añades este modificador a una TextLabel o TextButton, renderiza una sombra del área rectangular delimitante del objeto, no del texto.
Desenfoque
La propiedad BlurRadius determina el desenfoque de la sombra. Un valor mayor hace que los bordes de la sombra parezcan más suaves. Ten en cuenta que el factor de escala de esta propiedad UDim es relativo al ancho o 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, 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.
