Modificadores de apariencia de UI

*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.

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

Gradiente

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

Puedes configurar el gradiente por:

Secuencia de color

Para establecer la secuencia de colores de un gradiente:

  1. En la ventana Explorador , seleccione el UIGradient.

  2. En la ventana Propiedades , haz clic dentro del campo de propiedad Color , luego haz clic en el botón a la derecha de la caja delimitadorade entrada.Una ventana emergente de secuencia de colores.

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

    Color sequence popup from white to white
  3. Haga clic en un punto clave en la secuencia de colores, luego haga clic en el pequeño cuadrado junto a Color para abrir la ventana emergente Colores .

  4. Seleccione el color deseado para el punto de acceso.

    Color sequence popup from red to white
  5. Si es necesario, puedes:

    • Añade otro punto clave haciendo clic en cualquier lugar del gráfico.
    • Arrastra un punto de acceso existente a una nueva posición o selecciona un punto de acceso y ingresa un valor de tiempo específico a través de la entrada Tiempo .
    • Elimina un punto clave seleccionándolo y haciendo clic en el botón Eliminar .
    • Restablece la secuencia haciendo clic en el botón Reiniciar .

Transparencia

Para ajustar la transparencia de un gradiente a través de su rango:

  1. En la ventana Explorador , seleccione el UIGradient.

  2. En la ventana Propiedades , haga clic dentro del campo de propiedad Transparencia , luego haga clic en el botón a la derecha de la caja delimitadorade entrada.Una secuencia de números aparece en la ventana emergente.

    Cada cuadrado a lo largo de la gráfica de secuencia de números es un punto clave que determina el valor de transparencia en ese punto.

    Number sequence popup from 0.5 to 0.5
  3. Haga clic y arrastre cualquier punto de acceso alrededor, o seleccione un punto de acceso y ingrese una combinación de tiempo/valor específica a través de las entradas Tiempo y Valor .

    Number sequence popup from 0 to 1
  4. Si es necesario, puedes:

    • Añade otro punto clave haciendo clic en cualquier lugar del gráfico.
    • Elimina un punto clave seleccionándolo y haciendo clic en el botón Eliminar .
    • Restablece la secuencia haciendo clic en el botón Reiniciar .

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 de la anchura o altura del padre, y ambos valores positivos o negativos son válidos.

Desplazamiento (X) = 0
>

Desplazamiento (X) = 0.25
Desplazamiento (X) = -0.25

Del mismo modo, cuando giras el gradiente, los puntos de control también rotar.

Rotación = 0
>

Rotación = 45

Rotación = -90
>

Trazo

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

Contorno de texto / borde

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

Etiqueta de texto con hijo de UIStroke
Marco con hijos de UIStroke y UICorner

Cuando se aplica a un objeto de texto, puedes anular el comportamiento predeterminado del trazado por la propiedad ApplyStrokeMode, permitiéndote aplicar el trazado a los límites del objeto en lugar del propio texto.Incluso puedes controlar el contorno y el borde del texto de forma independiente al padrear dos instancias UIStroke a un objeto de texto, una establecida en Contextual y la otra en Frontera .

UIStroke.ApplyStrokeMode = Contextual
>

UIStroke.ApplyStrokeMode = Borde
>

Espesor

Puedes establecer el ancho del trazado a través de la propiedad Thickness que se mide en píxeles desde los bordes exteriores del padre.

UIStroke.Thickness = 4
>

UIStroke.Thickness = 12
>

Color / gradiente

Puedes establecer el color del trazado a través de la propiedad Color, así como insertar una instancia hija UIGradient para crear trazados degradados.

UIStroke.Color = (0, 95, 225)
>

UIStroke con hijo de gradiente UIGradient

Transparencia

La propiedad Transparency establece la transparencia del trazado independientemente de la transparencia del objeto padre BackgroundTransparency o TextTransparency.Esto te permite renderizar texto y bordes que sean "huecos" (constituidos solo por un contorno).

TextLabel.TextTransparency = 0 / UIStroke.Transparency = 0.5
>

TextLabel.TextTransparency = 1 / UIStroke.Transparency = 0
>

Estilo de esquina

La propiedad LineJoinMode te permite controlar cómo se interpretan las esquinas.Acepta un valor de Redondear , Bisel o Afilar .

UIStroke.LineJoinMode = Redondear
>

UIStroke.LineJoinMode = Bevel
>

UIStroke.LineJoinMode = Miter
>

Rincones

La instancia UICorner aplica deformación a todos los cuatro ángulos de su padre GuiObject.Puedes controlar el radio aplicado a través de la propiedad CornerRadius usando Scale o Offset.

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 o superior deforma al padre en una forma de "píldora", independientemente de su ancho o altura.Offset redondea las esquinas a un número específico de píxeles , independientemente de la anchura/altura del padre.

Scale = 0.25  ·  Offset = 0
Scale = 0.5  ·  Offset = 0
Scale = 0  ·  Offset = 32
Scale = 0  ·  Offset = 64

Espacio

Un objeto aplica un relleno superior, inferior, izquierdo y/o derecho a los contenidos del padre .

Por ejemplo, puedes mover el texto dentro de un botón de texto hacia abajo o hacia arriba aplicando un desplazamiento al fondo del botón.