El editor de estilo integrado Style Editor es una herramienta completa que te permite crear, gestionar y aplicar estilos de interfaz de usuario para experiencias de Roblox a través de una combinación de fichas de diseño, hojas de estilo, reglas de estilo y temas.
Accede al editor de estilo a través de la pestaña UI (si no es visible, accede a él desde la pestaña Inicio).
Una vez abierto, haga clic en el botón Crear diseño para generar un conjunto de estilo base.
Crear un conjunto de estilo a través del editor de estilo genera un BaseStyleSheet dentro de una carpeta de diseño dentro de .Esta hoja de base sincroniza valores predeterminados específicos del motor, como el predeterminado de Color3 de [163, 162, 165] con valores que provienen de flujos de trabajo de inserción en Studio.Se recomienda encarecidamente que no hagas no eliminar o intentar modificar la hoja de estilo base, sino que construyas tokens y reglas de estilo alrededor de una hoja de diseño para coincidir con tus objetivos de interfaz de usuario.
Además, se genera una hoja de estilo StyleSheet en la carpeta Diseño que contiene un StyleDerive a la hoja de estilo base.Si eliges eliminar ese StyleDerive , los valores sin estilo para GuiObjects pueden convertirse en valores inesperados, por ejemplo, un valor predeterminado Size de 0, 0, 0, 0 ..
Fichas de estilo
Estilo fichas , definidas a través de atributos de una ficha StyleSheet , representan variables de propiedad de la interfaz que se pueden utilizar en estilos y componentes; por ejemplo, podría haber un color común para un Frame.BackgroundColor3 , TextLabel.TextColor3 y UIStroke.Color .Las fichas son comparables a variables CSS.
Aunque no se requiere para el estilo de la interfaz de usuario, los tokens se recomiendan altamente para las actualizaciones de estilo y diseño de la interfaz de usuario extensible con el tiempo.Deberías comenzar por crear los siguientes tokens para entender cómo se relacionan con otros aspectos del estilo universal.
Crear una nueva hoja de estilo de token:
- En la columna de la izquierda del editor de estilo, pasa el mouse sobre Fichas , haz clic en el ⊕ y selecciona Hoja de estilo de nuevo token .
- Renombra la hoja nueva a TokenSheet.
Con la hoja de tokens nueva seleccionada, cree varias fichas haciendo clic en Añadir una ficha… en el panel principal.Estas fichas se usarán a lo largo de esta guía tanto para las reglas como para los temas >.
Nombre de la etiqueta 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 estilo de diseño agrega reglas de estilo y se puede enlazar con DataModel para aplicar propiedades de estilo a instancias de la interfaz de usuario.Solo un StyleSheet puede aplicarse a un árbol dado, aunque puedes usar temas para intercambiar estilos relacionados en tu interfaz de usuario, un concepto cubierto más tarde en esta guía.
Se crea una hoja de diseño predefinida llamada Hoja de estilo a través del botón Crear diseño .Contiene reglas de clase para objetos de interfaz comunes como Frame y TextLabel .También contiene dos instancias StyleDerive que derivan (heredan) tokens y estilos de la hoja de estilo base para su uso en tus configuraciones de estilo personalizado.
Una vez que tenga una hoja de diseño, puede configurar un contenedor de prueba en la pantalla para usar con el editor de estilo, o un contenedor en la experiencia si lo desea.
Pase el mouse sobre StarterGui en el Explorador e insira un ScreenGui.
Confirma que una nueva instancia StyleLink aparece bajo el ScreenGui con su conjunto de propiedades StyleSheet establecido en la hoja de diseño Hoja de estilo .
Si el StyleLink no se crea, puedes crear uno rápidamente seleccionando el ScreenGui en la pestaña Explorador así como la hoja de diseño Hoja de estilo en la columna de la izquierda del editor de estilo.A continuación, haga clic en el botón Insertar enlace de estilo en la sección superior derecha del panel principal del editor.
Reglas de estilo
Las reglas de estilo se aplican a cada instancia que coincida con la definición de de la regla para coincidir con características como el nombre de clase, la etiqueta de instancia y las relaciones de jerarquía.A un nivel alto, la coincidencia y modificación de instancias a través de la definición de una regla Selector opera a través de:
- Seleccionadores de clase de Roblox que se dirigen a todas las instancias de una clase de interfaz de usuario dada, por ejemplo , , , etc.
- Instancia etiqueta seleccionadores que apuntan a objetos de interfaz de usuario específicos etiquetados a través de .
- Se aplicaron modificadores de instancia a través de fantasma como o .
- estado seleccionadores que coinciden con uno de los cuatro valores enumerados como .
- Selección de nombre de instancia según el valor del objeto de la interfaz de usuario Instance.Name.
Regla de clase
Un estilo clase seleccionador objetiva todas las instancias de una clase de interfaz de usuario dada.Los siguientes estilos de configuración de reglas establecen todos Frames con un color y tamaño de fondo uniformes.
En la columna de la izquierda del editor de estilo, seleccione marco en la rama elementos de la interfaz de usuario .
Enlaza dos fichas de estilo previamente creadas a dos propiedades :
Propiedad Token de estilo BackgroundColor3 $Magenta Size $SquareL - Haga clic en Añadir una propiedad... en el panel principal y seleccione la propiedad necesaria.Tenga en cuenta que puede escribir palabras clave para encontrar más rápidamente propiedades en el menú desplegable.
- En lugar de ingresar un valor estático, haga clic en el botón ⋮ y seleccione Ficha de enlace .
- Haga clic en el $ que aparece en el campo de valor y seleccione el token asociado adecuado.
Inserta un nuevo Frame en el ScreenGui que previamente creaste y enlazaste. Los estilos que definiste deberían aplicarse automáticamente a él.
Regla de etiqueta
Los selectores de etiqueta de instancia seleccionan objetos de interfaz de usuario específicos etiquetados a través de .El siguiente estilo de configuración de regla etiqueta una TextButton etiqueta como ButtonPrimary con un color de fondo, fuente y tamaño de texto personalizado.
En la columna de la izquierda del editor de estilo, desplace sobre la hoja Hoja de estilo , haga clic en el botón ⋮ y navegue hasta Nuevo ⟩ Etiqueta .
Renombra la nueva regla de etiqueta .ButtonPrimary (nota el prefijo . ).
Enlaza tres fichas de estilo previamente creadas a tres propiedades :
Propiedad Token de estilo BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Haga clic en Añadir una propiedad... en el panel principal y seleccione la propiedad necesaria.Recuerde que puede escribir palabras clave para encontrar más rápidamente propiedades en el menú desplegable.
- En lugar de ingresar un valor estático, haga clic en el botón ⋮ y seleccione Ficha de enlace .
- Haga clic en el $ que aparece en el campo de valor y seleccione el token asociado adecuado.
Inserta un nuevo TextButton nuevo en el ScreenGui que previamente creaste y enlazaste y etiqueta como ButtonPrimary .Un atajo conveniente es el siguiente:
- Asegúrese de que el nuevo TextButton sea seleccionado en el Explorador .
- Con la regla de etiqueta .ButtonPrimary seleccionada en la columna de la izquierda del editor de estilo, haga clic en Aplicar etiqueta en el panel principal.Los estilos que definiste deberían aplicarse automáticamente al botón.
Modificador de UI
Los seleccionadores de modificador de instancia aplican fantasma UIComponents como UICorner o UIStroke para estilizar aún más un objeto.El siguiente estilo de configuración de regla estiliza un TextLabel con un tamaño de texto personalizado y esquinas redondeadas.
En la columna de la izquierda del editor de estilo, seleccione Etiqueta de texto en la rama Elementos de la interfaz de usuario .
Enlazar un token de estilo previamente creado a la propiedad :
- Haga clic en Añadir una propiedad... en el panel principal y seleccione la propiedad TextSize.Recuerde que puede escribir palabras clave para encontrar más rápidamente propiedades en el menú desplegable.
- En lugar de ingresar un valor estático, haga clic en el botón ⋮ y seleccione Ficha de enlace .
- Haga clic en el campo de valor $ que aparece en el campo de valor y seleccione la etiqueta $Text32 de token.
Se requiere una instancia pseudo para configurar y aplicar esquinas redondeadas a otros elementos. Para crear una:
En la columna de la izquierda, pasa el mouse sobre TextLabel , haz clic en el botón ⋮ y navega hasta Nuevo ⟩ Pseudo-instancia ⟩ Esquina UICorner .
Aparece una nueva instancia pseudo UICorner bajo el elemento TextLabel en la columna de la izquierda.
Con la nueva instancia UICorner seleccionada en la columna de la izquierda, enlaza un token de estilo previamente creado a la propiedad :
- Haga clic en Añadir una propiedad... en el panel principal y seleccione la propiedad CornerRadius.
- En lugar de ingresar un valor estático, haga clic en el botón ⋮ y seleccione Ficha de enlace .
- Haga clic en el campo de valor $ que aparece en el campo de valor y seleccione la etiqueta $Rad20 de token.
Inserta un nuevo TextLabel en el ScreenGui que previamente creaste y enlazaste. Los estilos que definiste deberían aplicarse automáticamente a él.
Regla de estado
estado seleccionadores correspondan a uno de los cuatro valores enumerados , permitiéndote configurar automáticamente cambios de estilo para estados interactivos.La siguiente configuración de regla crea un estado de desplazamiento de -4 grados de rotación para todos ImageButtons.
En la columna de la izquierda del editor de estilo, seleccione Botón de imagen en la rama elementos de interfaz de usuario .
Haga clic en el botón ⋮ y navegue hasta Nuevo > GuiState > Pase el mouse .
Aparece una nueva instancia modificadora de estado flotante bajo el elemento ImageButton en la columna de la izquierda.
Con el nuevo modificador Hover seleccionado en la columna de la izquierda, haga clic en Añadir una propiedad... en el panel principal y seleccione Rotation.Recuerde que puede escribir palabras clave para encontrar más rápidamente propiedades en el menú desplegable.
Ingrese -4 en el campo de valor de la propiedad.
Inserta un nuevo ImageButton en el ScreenGui que previamente creaste y enlazaste .Cuando pasas el mouse sobre el botón en la ventana, debería girar 4 grados en sentido contrario a las agujas del reloj.
Temas de estilo
Los temas de estilo consisten en conjuntos de tokens específicos que se pueden intercambiar, por ejemplo, fichas de color que definen un tema "ligero" y "oscuro".
Creación de tema
Para la extensibilidad, los temas se organizan en carpetas.Si bien un solo directorio puede ser suficiente para la mayoría de los propósitos, tienes libertad para organizar temas en carpetas como "colores" o "fuentes" si lo deseas.
Crear un nuevo directorio de temas:
- En la columna de la izquierda del editor de estilo, pasa el mouse sobre temas , haz clic en ⊕ y selecciona nuevo tema .
- Renombra el nuevo elemento carpeta a general .
Crear una nueva hoja de estilo de tema:
- Pase el mouse sobre la nueva carpeta General , haga clic en el botón ⋮ y seleccione Nuevo estilo de hoja de tema .
- Renómlalo a TemaA .
Fichas de tema
Una vez que se construye un tema, puedes vincular sus tokens a varias propiedades de objetos de interfaz de usuario como el BackgroundColor3 de un TextButton.Las hojas de tema deben usar un conjunto común de tokens para funcionar correctamente.
Con TemaA seleccionado en la columna de la izquierda del editor de estilo:
Enlaza tres fichas de estilo previamente creadas a tres nuevas fichas de tema:
Ficha de tema Token de estilo BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Haga clic en Añadir una token... en el panel principal y introduzca el nombre de la token de tema.
- Haga clic en el $ que aparece en el campo de valor y seleccione la etiqueta de estilo asociada.
En la columna de la izquierda del editor de estilo, seleccione TextButton en la rama elementos de la interfaz de usuario .
Enlaza los tokens del tema a tres nuevas propiedades TextButton :
Propiedad Ficha de tema BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Haga clic en Añadir una propiedad... en el panel principal y seleccione la propiedad necesaria.
- En lugar de ingresar un valor estático, haga clic en el botón ⋮ y seleccione Ficha de enlace .
- Haga clic en el $ que aparece en el campo de valor y seleccione la etiqueta de tema adecuada.
Al enlazar los tokens del tema, busca $[Token] en ThemeA en el desplazamiento para saber que el token proviene del tema y no de la hoja de tokens globales (recuerda que el tema ya deriva los tokens globales).
Duplicación de tema
Una vez que tenga un tema generalmente establecido, puede duplicarlo y cambiar varias fichas para definir un estilo de tema único.
En la columna de la izquierda del editor de estilo, pasa el mouse sobre el tema TemaA , haz clic en el botón ⋮ y selecciona Duplicar .
Renombra el tema duplicado a ThemeB .
Enlaza dos de los tokens del tema a dos tokens de estilo diferentes:
Ficha de tema Token de estilo BackColor $Magenta ButtonTextSize $Text24 - A la derecha del campo de valor de la propiedad, haz clic en el botón ⋮ y selecciona Desenlazar token .
- Haga clic de nuevo en ⋮ y seleccione Token de enlace .
- En su campo de valor, haga clic en el $ y seleccione el nuevo token de estilo asociado.
Cambio de tema
Una vez que tengas múltiples temas, puedes intercambiar entre ellos a través de la carpeta del tema, o a través de un script como se describe en SetDerives() .
En la columna de la izquierda del editor de estilo, seleccione la carpeta General en la rama Temas .
En el panel principal, cambia entre los temas usando los botones de radio.
