L'éditeur de style intégré Style Editor est un outil complet qui vous permet de créer, de gérer et d'appliquer des styles d'interface utilisateur pour les expériences Roblox grâce à une combinaison de jetons, de feuilles de conception, de règles de style et de thèmes.
Accédez à l'éditeur de style via l'onglet interface utilisateur (si il n'est pas visible, accédez-y à partir de l'onglet Accueil).
Une fois ouvert, cliquez sur le bouton Créer un design pour générer un ensemble de styles de base.
La création d'un ensemble de styles de conception via l'éditeur de style génère un feuille de style de base à l'intérieur d'un dossier de conception dans ReplicatedStorage .Cette feuille de base synchronise des défauts spécifiques au niveau du moteur comme le Color3 défaut de [163, 162, 165] avec des défauts qui proviennent des flux de travail d'insertion dans Studio.Il est fortement recommandé de ne pas supprimer ou de tenter de modifier la feuille de style de base — au lieu de cela, construisez des jetons et des règles de style autour d'une feuille de conception pour correspondre à vos objectifs d'interface utilisateur.
En outre, une feuille de style StyleSheet est générée dans le dossier Design qui contient un StyleDerive à la feuille de style de base.Si vous choisissez de supprimer ce StyleDerive , les valeurs non formatées pour GuiObjects peuvent devenir des valeurs inattendues, par exemple une valeur par défaut de Size de 0, 0, 0, 0 .
Tokens de style
Le style jetons , défini via attributs d'un jeton StyleSheet , représente les variables de propriété de l'interface utilisateur qui peuvent être utilisées dans différents styles et composants ; par exemple, il pourrait y avoir une couleur commune pour un Frame.BackgroundColor3 , TextLabel.TextColor3 et UIStroke.Color.Les jetons sont comparables à variables CSS.
Bien que non requis pour le style de l'interface utilisateur, les jetons sont fortement recommandés pour la conception et la mise à jour du style de l'interface utilisateur extensible au fil du temps.Vous devez commencer par créer les jetons suivants pour comprendre comment ils se lient à d'autres aspects du style universel.
Créer une nouvelle feuille de style de jeton :
- Dans la colonne de gauche de l'éditeur de style, passez sur jetons , cliquez sur ⊕ et sélectionnez feuille de style de nouveau jeton .
- Renommez la nouvelle feuille à TokenSheet.
Avec la nouvelle feuille de jetons sélectionnée, créez plusieurs jetons en cliquant sur Ajouter un jeton… dans le panneau principal.Ces jetons seront utilisés tout au long de ce guide pour les règles et les thèmes à la fois.
Nom du jeton Type Valeur 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 numéro 24 Text32 numéro 32 
Feuilles de conception
Un style de feuille de conceptionagrège les règles de style et peut être lié à des arbres pour appliquer des propriétés de style aux instances d'interface utilisateur.Seule une StyleSheet peut s'appliquer à un arbre donné, bien que vous puissiez utiliser thèmes pour échanger des styles liés à travers votre interface utilisateur, un concept couvert plus tard dans ce guide.
Une feuille de conception préremplie nommée feuille de style est créée via le bouton créer un design .Il contient des règles de classe pour les objets d'interface utilisateur communs tels que Frame et TextLabel .Il contient également deux instances StyleDerive qui dérivent (héritent) des jetons et des styles de la feuille de style de base pour leur utilisation dans vos configurations de style personnalisé.
Une fois que vous avez une feuille de conception, vous pouvez configurer un conteneur de test sur l'écran à utiliser avec l'éditeur de style, ou un conteneur dans l'expérience si vous le souhaitez.
Passez la souris sur StarterGui dans le Explorateur et insérez un ScreenGui.
Confirmez qu'une nouvelle instance StyleLink apparaît sous le ScreenGui avec son ensemble de propriétés StyleSheet défini sur la feuille de conception StyleSheet .
Si la balise n'est pas créée, vous pouvez créer rapidement une en sélectionnant la balise dans la colonne de gauche de l'éditeur de style, ainsi que la feuille de style dans la colonne de droite.Ensuite, cliquez sur le bouton Insérer le lien style dans la section supérieure à droite du panneau principal de l'éditeur.
Règles de style
Les règles de style s'appliquent à chaque instance qui correspond à la définition de la règle pour correspondre à des caractéristiques telles que le nom de classe, l'étiquette d'instance et les relations de hiérarchie.À un niveau élevé, le correspondage et la modification d'instance via la définition d'une règle Selector fonctionnent par le biais de :
- Sélecteurs de classe Roblox qui ciblent toutes les instances d'une classe d'interface donnée, par exemple , , , etc.
- Instance balise sélectionnant des objets d'interface utilisateur spécifiques tagués à travers CollectionService.
- Les modifieurs d'instance appliqués via le fantôme tels que ou .
- GuiObjectétat sélecteurs qui correspondent à l'une des quatre valeurs enum Enum.GuiState telles que Hover .
- Sélection du nom de l'instance selon la valeur de l'objet d'interface utilisateur Instance.Name.
Règle de classe
Un sélecteur de style classe cible toutes les instances d'une classe d'interface donnée.Les styles de règles suivants configurent tous Frames avec une couleur et une taille de fond uniformes.
Dans la colonne de gauche de l'éditeur de style, sélectionnez cadre dans la branche éléments d'interface utilisateur .
Liaison de deux jetons de style précédemment créés à deux propriétés :
Propriété Token de style BackgroundColor3 $Magenta Size $SquareL - Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire.Notez que vous pouvez saisir des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Token de lien .
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le jeton associé approprié.
Insérez un nouveau dans le que vous avez précédemment créé et lié . Les styles que vous avez définis devraient s'appliquer automatiquement à celui-ci.
Règle de balise
Les sélecteurs d'instance tag ciblent des objets d'interface utilisateur spécifiques tagués par le biais de CollectionService.La règle suivante configure un style de balise avec une couleur de fond, une police et une taille de texte personnalisées.
Dans la colonne de gauche de l'éditeur de style, passez la souris sur la feuille de style StyleSheet , cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau Tag .
Renommer la nouvelle règle de balise .ButtonPrimary (notez le préfixe . ).
Liaison de trois jetons de style précédemment créés à trois propriétés :
Propriété Token de style BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire.Rappelez-vous que vous pouvez saisir des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Token de lien .
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le jeton associé approprié.
Insérez une nouvelle dans le que vous avez précédemment créé et lié et tag comme .Un raccourci pratique est comme suit :
- Assurez-vous que le nouveau TextButton est sélectionné dans le Explorateur .
- Avec la règle de balise .ButtonPrimary sélectionnée dans la colonne de gauche de l'éditeur de style, cliquez sur Appliquer la balise dans le panneau principal.Les styles que vous avez définis doivent s'appliquer automatiquement au bouton.
Modifieur d'interface utilisateur
Les sélecteurs de modifieurs d'instance appliquent le fantôme UIComponents comme UICorner ou UIStroke pour mieux style un objet.La règle suivante configure un TextLabel avec une taille de texte personnalisée et des coins arrondis.
Dans la colonne de gauche de l'éditeur de style, sélectionnez TextLabel dans la branche éléments d'interface utilisateur .
Liaison d'un jeton de style précédemment créé à la propriété :
- Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété TextSize.Rappelez-vous que vous pouvez saisir des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Token de lien .
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le jeton $Text32.
Une instance pseudo est requise pour configurer et appliquer des coins arrondis à d'autres éléments. Pour en créer une :
Dans la colonne de gauche, passez sur TextLabel , cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau ⟩ Pseudo-Instance ⟩ UICorner .
Une nouvelle instance pseudo UICorner apparaît sous l'élément TextLabel de la colonne de gauche.
Avec la nouvelle instance UICorner sélectionnée dans la colonne de gauche, lier un jeton de style précédemment créé à la propriété :
- Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété CornerRadius.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Token de lien .
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le jeton $Rad20.
Insérez un nouveau dans le que vous avez précédemment créé et lié . Les styles que vous avez définis devraient s'appliquer automatiquement à celui-ci.
Règle d'État
état sélecteurs correspondent à l'une des quatre valeurs enum , vous permettant de configurer automatiquement les modifications de style pour les états interactifs.La configuration suivante de la règle crée un état de surbrillance de -4 de degrés de rotation pour tous ImageButtons.
Dans la colonne de gauche de l'éditeur de style, sélectionnez bouton d'image dans la branche éléments d'interface utilisateur .
Cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau > GuiState > Hover .
Une nouvelle instance de modifieur d'état de surbrillance apparaît sous l'élément ImageButton de la colonne de gauche.
Avec le nouveau modifieur survoler sélectionné dans la colonne de gauche, cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez Rotation.Rappelez-vous que vous pouvez saisir des mots-clés pour trouver plus rapidement des propriétés dans le menu déroulant.
Entrez -4 dans le champ de valeur de la propriété.
Insérez une nouvelle dans le que vous avez précédemment créé et lié .Lorsque vous passez la souris sur le bouton dans la fenêtre, il devrait tourner de 4 degrés vers la gauche.
Thèmes de style
Les thèmes style consistent en des ensembles de jetons spécifiques qui peuvent être échangés, par exemple des jetons de couleur qui définissent un thème "lumière" et "obscurité".
Création de thème
Pour l'extensibilité, les thèmes sont organisés en dossiers.Bien que l'un seul de dossiers puisse suffire pour la plupart des utilisations, vous êtes libre d'organiser des thèmes dans des dossiers tels que « couleurs » ou « polices » si vous le souhaitez.
Créer un nouveau dossier de thème :
- Dans la colonne de gauche de l'éditeur de style, passez sur thèmes , cliquez sur ⊕ et sélectionnez nouveau thème .
- Renommer l'élément nouveau dossier à général .
Créer une nouvelle feuille de style de thème :
- Passez la souris sur le nouvel dossier Général , cliquez sur le bouton ⋮ et sélectionnez Nouveau style de feuille de thème .
- Renommez-le en ThèmeA .
Jetons de thème
Une fois qu'un thème est construit, vous pouvez lier ses jetons à différentes propriétés d'objets d'interface utilisateur telles que le BackgroundColor3 d'un TextButton.Les feuilles de thème doivent utiliser un ensemble commun de jetons pour fonctionner correctement.
Avec ThèmeA sélectionné dans la colonne de gauche de l'éditeur de style :
Liaison de trois jetons de style précédemment créés à trois nouveaux jetons de thème :
Jeton de thème Token de style BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Cliquez sur Ajouter un jeton… dans le panneau principal et entrez le nom du jeton de thème.
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le jeton de style associé.
Dans la colonne de gauche de l'éditeur de style, sélectionnez bouton de texte dans la branche éléments d'interface utilisateur .
Liaison des jetons du thème à trois nouvelles propriétés TextButton :
Propriété Jeton de thème BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire.
- Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Token de lien .
- Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le jeton de thème approprié.
Lors de la liaison des jetons du thème, recherchez "[Token] dans ThemeA en surbrillance pour savoir que le jeton provient du thème et non de la feuille de jetons globale (rappelez-vous que le thème dérive déjà les jetons globaux).
Duplication du thème
Une fois que vous avez un thème généralement établi, vous pouvez le dupliquer et changer divers jetons pour définir un style de thème unique.
Dans la colonne de gauche de l'éditeur de style, passez la souris sur le thème ThèmeA , cliquez sur le bouton ⋮ et sélectionnez Dupliquer .
Renommez le thème dupliqué en ThemeB .
Liaison de deux des jetons du thème à deux jetons de style différents :
Jeton de thème Token de style BackColor $Magenta ButtonTextSize $Text24 - À droite du champ de valeur de la propriété, cliquez sur le bouton ⋮ et sélectionnez Délien du jeton .
- Cliquez à nouveau sur ⋮ et sélectionnez Token de lien .
- Dans son champ de valeur, cliquez sur le $ et sélectionnez le nouveau jeton de style associé.
Échange de thème
Une fois que vous avez plusieurs thèmes, vous pouvez les échanger via le dossier du thème, ou via un script comme indiqué dans SetDerives() .
Dans la colonne de gauche de l'éditeur de style, sélectionnez le dossier Général dans la branche Thèmes .
Dans le panneau principal, changez entre les thèmes en utilisant les boutons radio.
