Editor de Estilos

El Editor de Estilos integrado es una herramienta completa que te permite crear, gestionar y aplicar estilos de UI para juegos de Roblox a través de una combinación de tokens, hojas de diseño, reglas de estilo y temas.

Accede al Editor de Estilos a través de la pestaña UI.

Una vez abierto, haz clic en el botón Crear Diseño para generar un conjunto básico de estilos.

Tokens de estilo

Los tokens de estilo, definidos a través de los atributos de un token StyleSheet, representan variables de propiedades de UI que pueden ser utilizadas a través de estilos y componentes; por ejemplo, podría haber un color común para un Frame.BackgroundColor3, TextLabel.TextColor3, y UIStroke.Color. Los tokens son comparables a variables CSS.

1. Crea una nueva hoja de estilo de token:

   1. En la columna izquierda del Editor de Estilos, pasa el cursor sobre Tokens, haz clic en el ⊕, y selecciona Nueva Hoja de Estilo de Token.
   2. Cambia el nombre de la nueva hoja a TokenSheet.

   

2. Con la nueva hoja de tokens seleccionada, crea varios tokens haciendo clic en Añadir un Token… en el panel principal. Estos tokens se usarán a lo largo de esta guía tanto para reglas como para temas.

   

   Nombre del Token	Tipo	Valor
   Gold	Color3	#ffcc00
   Magenta	Color3	#ff0099
   Orange	Color3	#dd6030
   Oswald	Font	Oswald
   Rad20	UDim	0, 20
   RectL	UDim2	0, 300, 0, 160
   SquareL	UDim2	0, 200, 0, 200
   Text24	número	24
   Text32	número	32

   

Hojas de diseño

Una hoja de diseño agrega reglas de estilo y puede estar vinculada a los árboles DataModel para aplicar propiedades de estilo a instancias de UI. Solo una StyleSheet puede aplicarse a un árbol dado, aunque puedes usar temas para intercambiar estilos relacionados en tu UI, un concepto que se cubre más adelante en esta guía.

Se crea una hoja de diseño pre-poblada llamada StyleSheet a través del botón Crear Diseño. Contiene reglas de clase para objetos de UI comunes como Frame y TextLabel. También contiene dos instancias de StyleDerive que derivan (heredan) tokens y estilos de la hoja de estilo base para su uso en tus configuraciones de estilo personalizadas.

Una vez que tienes una hoja de diseño, puedes configurar un contenedor en pantalla de prueba para usar con el Editor de Estilos, o un contenedor en experiencia si lo deseas.

1. Pasa el cursor sobre StarterGui en el Explorador e inserta un ScreenGui.

2. Confirma que aparezca una nueva instancia de StyleLink bajo el ScreenGui con su propiedad StyleSheet configurada a la hoja de diseño StyleSheet.

   

   

   Si no se crea el StyleLink, puedes crear uno rápidamente seleccionando el ScreenGui en el Explorador así como la hoja de diseño StyleSheet en la columna izquierda del Editor de Estilos. Luego, haz clic en el botón Insertar StyleLink en la sección superior derecha del panel principal del editor.

Reglas de estilo

Las reglas de estilo se aplican a cada instancia que coincide con la definición Selector de la regla para coincidir con características como el nombre de clase, etiqueta de instancia y relaciones jerárquicas. A un nivel alto, la coincidencia de instancias y la modificación a través de la definición Selector de una regla opera a través de:

• Selectores de clase de Roblox que apuntan a todas las instancias de una clase de UI dada, por ejemplo Frame, ImageLabel, TextButton, etc.
• Selectores de etiqueta tag que apuntan a objetos de UI específicos etiquetados a través de CollectionService.
• Modificadores de instancia aplicados a través de UIComponents fantasma como UICorner o UIStroke.
• Selectores de estado de GuiObject que corresponden a uno de los cuatro valores de enumeración Enum.GuiState tales como Hover.
• Selección del nombre de la instancia según el valor del Instance.Name del objeto de UI.

Regla de clase

Un selector de clase de estilo apunta a todas las instancias de una clase de UI dada. La siguiente configuración de regla estiliza todos los Frames con un color de fondo y tamaño uniformes.

1. En la columna izquierda del Editor de Estilos, selecciona Frame en la rama UI Elements.

   

2. Vincula dos tokens de estilo creados previamente a dos propiedades de Frame:

   Propiedad	Token de Estilo
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. Haz clic en Añadir una Propiedad… en el panel principal y selecciona la propiedad necesaria. Ten en cuenta que puedes escribir palabras clave para hallar propiedades más rápidamente en el menú desplegable.
   2. En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
   3. Haz clic en el $ que aparece en el campo de valor y selecciona el token asociado apropiado.

   

   

3. Inserta un nuevo Frame en el ScreenGui que previamente creaste y vinculaste. Los estilos que definiste deberían aplicarse automáticamente a él.

   

Regla de etiqueta

Los selectores de etiqueta de instancia apuntan a objetos de UI específicos etiquetados a través de CollectionService. La siguiente configuración de regla estiliza un TextButton etiquetado como ButtonPrimary con un color de fondo, fuente y tamaño de texto personalizados.

1. En la columna izquierda del Editor de Estilos, pasa el cursor sobre la hoja StyleSheet, haz clic en el botón ⋮, y navega a Nuevo ⟩ Etiqueta.

   

2. Renombra la nueva regla de etiqueta a .ButtonPrimary (nota el . inicial).

   

3. Vincula tres tokens de estilo creados previamente a tres propiedades de TextButton:

   Propiedad	Token de Estilo
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. Haz clic en Añadir una Propiedad… en el panel principal y selecciona la propiedad necesaria. Recuerda que puedes escribir palabras clave para hallar propiedades más rápidamente en el menú desplegable.
   2. En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
   3. Haz clic en el $ que aparece en el campo de valor y selecciona el token asociado apropiado.

   

   

4. Inserta un nuevo TextButton en el ScreenGui que previamente creaste y vinculaste y etiquétalo como ButtonPrimary. Un atajo conveniente es el siguiente:

   1. Asegúrate de que el nuevo TextButton esté seleccionado en el Explorador.
   2. Con la regla de etiqueta .ButtonPrimary seleccionada en la columna izquierda del Editor de Estilos, haz clic en Aplicar Etiqueta en el panel principal. Los estilos que definiste deberían aplicarse automáticamente al botón.

   

   

Modificador de UI

Los selectores de modificadores de instancia aplican UIComponents fantasma como UICorner o UIStroke para estilizar aún más un objeto. La siguiente configuración de regla estiliza un TextLabel con un tamaño de texto personalizado y esquinas redondeadas.

1. En la columna izquierda del Editor de Estilos, selecciona TextLabel en la rama UI Elements.

   

2. Vincula un token de estilo creado previamente a la propiedad TextSize:

   1. Haz clic en Añadir una Propiedad… en el panel principal y selecciona la propiedad TextSize. Recuerda que puedes escribir palabras clave para hallar propiedades más rápidamente en el menú desplegable.
   2. En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
   3. Haz clic en el $ que aparece en el campo de valor y selecciona el token $Text32.

   

   

Se requiere una instancia pseudo para configurar y aplicar esquinas redondeadas a otros elementos. Para crear una:

1. En la columna izquierda, pasa el cursor sobre TextLabel, haz clic en el botón ⋮, y navega a Nuevo ⟩ Instancia Pseudo ⟩ UICorner.

   

   Una nueva instancia pseudo UICorner aparece bajo el elemento TextLabel en la columna izquierda.

   

2. Con la nueva instancia UICorner seleccionada en la columna izquierda, vincula un token de estilo creado previamente a la propiedad CornerRadius:

   1. Haz clic en Añadir una Propiedad… en el panel principal y selecciona la propiedad CornerRadius.
   2. En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
   3. Haz clic en el $ que aparece en el campo de valor y selecciona el token $Rad20.

   

3. Inserta un nuevo TextLabel en el ScreenGui que previamente creaste y vinculaste. Los estilos que definiste deberían aplicarse automáticamente a él.

   

Regla de estado

Los selectores de estado de GuiObject corresponden a uno de los cuatro valores de enumeración GuiState como Hover, lo que te permite configurar automáticamente los cambios de estilo para estados interactivos. La siguiente configuración de regla crea un estado de hover con una rotación de -4 grados para todos los ImageButtons.

1. En la columna izquierda del Editor de Estilos, selecciona ImageButton en la rama UI Elements.

   

2. Haz clic en el botón ⋮ y navega a Nuevo ⟩ GuiState ⟩ Hover.

   

   Una nueva instancia modificadora Hover aparece bajo el elemento ImageButton en la columna izquierda.

   

3. Con el nuevo modificador Hover seleccionado en la columna izquierda, haz clic en Añadir una Propiedad… en el panel principal y selecciona Rotation. Recuerda que puedes escribir palabras clave para hallar propiedades más rápidamente en el menú desplegable.

4. Ingresa -4 en el campo de valor de la propiedad.

   

5. Inserta un nuevo ImageButton en el ScreenGui que previamente creaste y vinculaste. Cuando pases el cursor sobre el botón en el viewport, debería rotar 4 grados en sentido antihorario.

   

Consultas de estilo

Las consultas de estilo, similares a consultas de medios y contenedores CSS, te permiten aplicar lógica condicional a tu UI basada en el tamaño del contenedor, tipo de entrada u otros factores. El Editor de Estilos proporciona un flujo de trabajo simplificado para crear tanto la lógica de consulta (condiciones) como los estilos resultantes como un conjunto unificado.

Consultas integradas

Algunas condiciones de StyleQuery son muy comunes, como cambiar propiedades basadas en el ViewportDisplaySize. Para simplificar esto, el Editor de Estilos incluye consultas integradas que te permiten crear reglas condicionales sin necesidad de una instancia pseudo o real de un StyleQuery; en su lugar, simplemente usas una regla de consulta con un selector predefinido como ViewportDisplaySizeSmall.

Los siguientes pasos demuestran cómo generar consultas integradas para un TextLabel que maneje tamaños de viewport Small, Medium y Large.

1. En la columna izquierda del Editor de Estilos, pasa el cursor sobre TextLabel, haz clic en el botón ⋮, y navega a Nuevo ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.

   

   Esto crea una carpeta Queries bajo la regla TextLabel que contiene tres reglas de consulta:

   • @ViewportDisplaySizeLarge — Define propiedades que se aplican cuando el viewport es Large.
   • @ViewportDisplaySizeMedium — Define propiedades que se aplican cuando el viewport es Medium.
   • @ViewportDisplaySizeSmall — Define propiedades que se aplican cuando el viewport es Small.

   

2. Haz clic en Añadir una Propiedad… bajo cada regla de consulta y establece el Text que debería mostrarse cuando esa consulta esté activa:

   Regla de Consulta	Propiedad	Valor
   @ViewportDisplaySizeLarge	Text	Texto Grande
   @ViewportDisplaySizeMedium	Text	Texto Mediano
   @ViewportDisplaySizeSmall	Text	Texto Pequeño

3. Para verificar las consultas, utiliza el Emulador de Dispositivos para comprobar cómo responde la UI a diferentes resoluciones en tres dispositivos distintos:

   1. Inserta un nuevo TextLabel en el ScreenGui.

   2. Cambia el Dispositivo en el Emulador de Dispositivos para ver el texto cambiar en tiempo real.

      Tamaño	Ejemplos de Emulaciones
      Large	PS5, PS4, Xbox One
      Medium	Laptop Promedio, HD 720
      Small	iPhone XR, iPad de 7ª Generación

Consulta personalizada

Puedes agregar una consulta de estilo a cualquier regla existente para crear una UI adaptable que se ajuste a su contenedor. La siguiente configuración configura un TextLabel para cambiar automáticamente su apariencia solo cuando se expande a un ancho de 400 píxeles o más.

1. En la columna izquierda del Editor de Estilos, pasa el cursor sobre TextLabel, haz clic en el botón ⋮, y navega a Nuevo ⟩ StyleQuery ⟩ Personalizado.

   

   Esta acción crea una carpeta Queries bajo la regla TextLabel que contiene dos elementos vinculados:

   • Regla de instancia pseudo ::StyleQuery donde defines las Condiciones.
   • Regla @StyleQuery donde defines las Propiedades que se aplican cuando se cumplen esas condiciones.

   

2. Selecciona la regla padre TextLabel en el panel principal y define las siguientes propiedades predeterminadas:

   Propiedad	Valor
   BackgroundColor3	$Magenta
   Text	Texto Predeterminado

3. Selecciona la regla ::StyleQuery en el panel principal, haz clic en Añadir una Condición…, y configura lo siguiente:

   Condición	Valor
   MinSize	400, 0

   Consulta StyleQuery.IsActive como referencia para otras condiciones disponibles a través de la regla ::StyleQuery.

4. Selecciona la regla @StyleQuery en el panel principal y establece las propiedades que deberían aplicarse cuando la consulta esté activa:

   Propiedad	Valor
   BackgroundColor3	$Gold
   Text	Texto Grande

Para verificar la consulta, puedes cambiar manualmente el tamaño de un TextLabel en el viewport.

1. Inserta un nuevo TextLabel en el ScreenGui.

2. Ajusta su ancho para ver el cambio de estilo en tiempo real.

   Ancho de 0 a 400 píxelesAncho superior a 400 píxeles

   Mientras el ancho del TextLabel sea menor, la condición MinSize no se cumple y la etiqueta usa su color de fondo y texto predeterminados.

   

Transiciones de estilo

Las transiciones de estilo, comparables a transiciones CSS, te permiten interpolar valores de propiedades durante una duración establecida.

Predeterminado

Para interpolar muchas propiedades de UI con los mismos parámetros, puedes establecer una transición predeterminada que se aplique a todas las propiedades a menos que se establezca explícitamente otra transición para una propiedad específica.

1. Selecciona TextButton en la rama UI Elements y luego, en el panel principal, añade tres nuevas propiedades con los siguientes valores:

   Propiedad	Valor
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. Pasa el cursor sobre la fila de la clase padre TextButton, haz clic en el botón ⋮, y navega a Insertar ⟩ Transición.

   

   Se inserta una transición predeterminada de 1, Quad, Out, 0 directamente debajo de la regla TextButton, indicando una transición de 1 segundo, estilo de suavizado Quad, dirección de suavizado Out, y sin retraso.

   

3. Pasa el cursor sobre la fila de la clase padre TextButton, haz clic en el botón ⋮ y navega a Nuevo ⟩ GuiState ⟩ Hover.

   

4. Para el nuevo modificador Hover, añade dos nuevas propiedades como los objetivos para el estado hover.

   Propiedad	Valor
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Inserta un nuevo TextButton en el ScreenGui que previamente creaste y vinculaste. Cuando pases el cursor sobre el botón en el viewport, debería iluminarse gradualmente y rotar 5 grados en sentido antihorario.

   

Vinculado a token

Para reutilizar comportamientos de transición a través de múltiples reglas, puedes definir tokens que representen el tipo de dato TweenInfo. La siguiente configuración de regla crea un estado hover para transicionar todos los TextButtons hacia/desde -5 grados de rotación y un color de fondo más claro.

1. Si aún no lo has hecho, crea una hoja de estilo de tokens llamada TokenSheet.

   

2. Con la nueva hoja de tokens seleccionada, crea dos nuevos tokens haciendo clic en Añadir un Token… en el panel principal.

   Nombre del Token	Tipo	Parámetros de Tween
   CubicOut	TweenInfo	Duration = 1.25 EasingStyle = Cubic EasingDirection = Out Delay = 0
   QuadInOut	TweenInfo	Duration = 0.5 EasingStyle = Quad EasingDirection = InOut Delay = 0

   

3. Selecciona TextButton en la rama UI Elements y luego, en el panel principal, añade tres nuevas propiedades con los siguientes valores:

   Propiedad	Valor
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. Para cada nueva propiedad, excepto para AutoButtonColor, pasa el cursor sobre su fila, haz clic en el botón ⋮ y selecciona Insertar ⟩ Transición.

   

5. Pasa el cursor sobre la nueva fila de Transición bajo cada propiedad, haz clic en el botón ⋮ y selecciona Vincular Token. Luego, en lugar de ingresar un valor estático, haz clic en el $ que aparece en el campo de valor y selecciona el token de transición adecuado.

   

   Transición de Propiedad	Token de Transición
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. Pasa el cursor sobre la fila de la clase padre TextButton, haz clic en el botón ⋮, y navega a Nuevo ⟩ GuiState ⟩ Hover.

   

7. Para el nuevo modificador Hover, añade dos nuevas propiedades como los objetivos para el estado hover.

   Propiedad	Valor
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Inserta un nuevo TextButton en el ScreenGui que previamente creaste y vinculaste. Cuando pases el cursor sobre el botón en el viewport, debería iluminarse gradualmente y rotar 5 grados en sentido antihorario.

   

Temas de estilo

Los temas de estilo consisten en conjuntos de tokens específicos que pueden ser intercambiados, por ejemplo, tokens de color que definen un tema "claro" y "oscuro".

Creación de temas

Para la extensibilidad, los temas se organizan en carpetas. Mientras que una sola carpeta puede ser suficiente para la mayoría de los propósitos, eres libre de organizar los temas en carpetas como "colores" o "fuentes" si lo deseas.

1. Crea una nueva carpeta de tema:

   1. En la columna izquierda del Editor de Estilos, pasa el cursor sobre Themes, haz clic en el ⊕, y selecciona Nuevo Tema.
   2. Cambia el nombre del nuevo elemento Carpeta a General.

   

2. Crea una nueva hoja de estilo de tema:

   1. Pasa el cursor sobre la nueva carpeta General, haz clic en el botón ⋮, y selecciona Nueva Hoja de Estilo de Tema.
   2. Cambia el nombre a ThemeA.

   

Tokens de tema

Una vez que un tema esté construido, puedes vincular sus tokens a varias propiedades de objetos de UI, como el BackgroundColor3 de un TextButton. Las hojas de tema deben usar un conjunto común de tokens para funcionar correctamente.

Con ThemeA seleccionado en la columna izquierda del Editor de Estilos:

1. Vincula tres tokens de estilo creados previamente a tres nuevos tokens de tema:

   Token de Tema	Token de Estilo
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. Haz clic en Añadir un Token… en el panel principal e ingresa el nombre del token del tema.
   2. Haz clic en el $ que aparece en el campo de valor y selecciona el token de estilo asociado.

   

2. En la columna izquierda del Editor de Estilos, selecciona TextButton en la rama UI Elements.

   

3. Vincula los tokens del tema a tres nuevas propiedades de TextButton:

   Propiedad	Token de Tema
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. Haz clic en Añadir una Propiedad… en el panel principal y selecciona la propiedad necesaria.
   2. En lugar de ingresar un valor estático, haz clic en el botón ⋮ y selecciona Vincular Token.
   3. Haz clic en el $ que aparece en el campo de valor y selecciona el token de tema adecuado.

   

   Al vincular los tokens del tema, busca $[Token] en ThemeA en el hover para saber que el token proviene del tema y no de la hoja de tokens global (recuerda que el tema ya deriva los tokens globales).

   

Duplicación de temas

Una vez que tengas un tema establecido en general, puedes duplicarlo y cambiar varios tokens para definir un estilo de tema único.

1. En la columna izquierda del Editor de Estilos, pasa el cursor sobre el tema ThemeA, haz clic en el botón ⋮, y selecciona Duplicar.

2. Cambia el nombre del tema duplicado a ThemeB.

   

3. Vincula dos de los tokens del tema a dos diferentes tokens de estilo:

   Token de Tema	Token de Estilo
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. A la derecha del campo de valor de la propiedad, haz clic en el botón ⋮ y selecciona Desvincular Token.
   2. Haz clic en ⋮ nuevamente y selecciona Vincular Token.
   3. En su campo de valor, haz clic en el $ y selecciona el nuevo token de estilo asociado.

   

Intercambio de temas

Una vez que tengas múltiples temas, puedes intercambiarlos a través de la carpeta del tema, o mediante un script como se detalla en SetDerives().

1. En la columna izquierda del Editor de Estilos, selecciona la carpeta General en la rama Themes.

2. En el panel principal, intercambia entre los temas usando los botones de opción.

   ThemeAThemeB