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 , puede personalizar aún más la apariencia de su GuiObjects .

Gradiente

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

Puede configurar el gradiente por:

  • Configurar sus colores a través de un <a href="/reference/engine/datatypes"> Datatype.ColorSequencia</a> en la propiedad degradado de <k>Class.UIGradient.Color|Color</k> del gradiente.
  • Configurar su transparencia a través de un NumberSequence en la propiedad degradado de Transparency .
  • 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 Explorador , seleccione el UIGradient .

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

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

    Color sequence popup from white to white
  3. Haga clic en un punto de interrupción en el orden de los colores, luego haga clic en el pequeño cuadrado junto a Color para abrir la ventana pop-up de Colores .

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

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

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

Transparencia

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

  1. En la ventana Explorador , seleccione el UIGradient .

  2. En la ventana Propiedades , haz clic dentro del campo de propiedad Transparencia , luego haz clic en el botón a la derecha de la caja delimitadorade entrada. Se muestra una secuencia de números.

    Cada cuadrado en el gráfico de secuencia de números es un keypoint 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, 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, puede:

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

Desplazamiento y Rotación

Las propiedades Offset y Rotation le permiten ajustar los puntos de control del gradiente y su ángulo. Como se ilustra en los siguientes gráficos, Offset se basa en un 2>porcentaje2> de la longitud o altura del padre

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

Al igual que cuando giras el gradiente, los puntos de control también rotar.

Rotación = 0
Rotación = 45
Rotación = -90

Golpe

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

Resumen de texto / Borde

Dependiendo de su padre, UIStroke opera como un contorno de texto o como un borde . Cuando padre 1> Class.UIStroke1> a un objeto de texto, se aplica al contorno del texto; cuando padre 4> Class.UIStroke4> a otros objetos

TextLabel con hijo UIStroke
Marco con hijos UIStroke y UICorner

Cuando se aplica a un objeto de texto, puede anular el comportamiento de trazado por defecto del objeto por la propiedad ApplyStrokeMode, lo que te permite aplicar el trazado al límite del objeto en lugar del texto en sí mismo. Puedes incluso controlar el contorno y la frontera de forma independiente al padre de

UIStroke.ApplyStrokeMode = Contextual
UIStroke.ApplyStrokeMode = Border

Grosor

Puedes establecer la宽ura del trazo a través de la propiedad Thickness que se mide en píxeles desde las esquinas exteriores del padre.

UIStroke.Thickness = 4
UIStroke.Thickness = 12

Color / Gradiente

Puede establecer el color del pincel a través de la propiedad Color, así como insertar una instancia hija UIGradient para crear pinceles de gradiente.

UIStroke.Color = (0, 95, 225)
UIStroke con hijo UIGradient

Transparencia

La propiedad Transparency establece la transparencia del pincel independientemente de la transparencia del objeto padre BackgroundTransparency o TextTransparency . Esto te permite renderizar textos y contornos que son "huecos" (consisten en solo 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 Round , Bevel o 1>Miter1> .

UIStroke.LineJoinMode = Round
UIStroke.LineJoinMode = Bevel
UIStroke.LineJoinMode = Miter

Esquinas

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 either 1> Datatype.UDim.Scale|Scale1> o 4> Datatype.UD

Scale alrededor de los esquina a un porcentaje basado en la longitud total de la caja de la padre, lo que significa que una escala de 0> 0.50> o superior deforma la

Datatype.UDim.Scale|Scale = 0.25 · Datatype.UDim.Offset|Offset =
2> 02> > > >

Datatype.UDim.Scale|Scale = 0.5 · Datatype.UDim.Offset|Offset =
2> 02> > >

Datatype.UDim.Scale|Scale = 0 · Datatype.UDim.Offset|Offset =
2> 322> > >

Datatype.UDim.Scale|Scale = 0 · Datatype.UDim.Offset|Offset =
2> 642> > >

Amortiguación

Un objeto UIPadding aplica la piel de arriba, abajo, izquierda y/o derecha a los contenidos del padre GuiObject .

Por ejemplo, puede mover el texto dentro de un botón de texto hacia abajo o hacia arriba aplicando un desplazamiento hacia la parte inferior del botón.