Éditeur de style

L'éditeur de style intégré est un outil complet qui vous permet de créer, gérer et appliquer des styles d'interface utilisateur pour les jeux Roblox grâce à une combinaison de tokens, feuilles de conception, règles de style et thèmes.

Accédez à l'éditeur de style via l'onglet UI.

Une fois ouvert, cliquez sur le bouton Créer un design pour générer un jeu de styles de base.

Tokens de style

Les tokens de style, définis par les attributs d'un StyleSheet token, représentent des variables de propriété d'interface utilisateur qui peuvent être utilisées à travers les styles et les composants ; par exemple, il pourrait y avoir une couleur commune pour Frame.BackgroundColor3, TextLabel.TextColor3, et UIStroke.Color. Les tokens sont comparables aux variables CSS.

1. Créez une nouvelle feuille de tokens :

   1. Dans la colonne de gauche de l'éditeur de style, survolez Tokens, cliquez sur le ⊕, et sélectionnez Nouvelle feuille de tokens.
   2. Renommez la nouvelle feuille en TokenSheet.

   

2. Avec la nouvelle feuille de tokens sélectionnée, créez plusieurs tokens en cliquant sur Ajouter un token… dans le panneau principal. Ces tokens seront utilisés tout au long de ce guide pour les règles et thèmes.

   

   Nom du token	Type	Valeur
   Or	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	number	24
   Text32	number	32

   

Feuilles de conception

Une feuille de style de conception agrège des règles de style et peut être liée aux arbres de DataModel pour appliquer des propriétés de style aux instances UI. Une seule StyleSheet peut s'appliquer à un arbre donné, bien que vous puissiez utiliser des thèmes pour échanger des styles connexes à travers votre UI, un concept qui sera abordé plus tard dans ce guide.

Une feuille de conception préremplie nommée StyleSheet est créée via le bouton Créer un design. Elle contient des règles de classe pour les objets UI courants tels que Frame et TextLabel. Elle contient également deux instances de StyleDerive qui dérivent (héritent) des tokens et des styles de la feuille de style de base pour utilisation dans vos configurations de style personnalisées.

Une fois que vous avez une feuille de conception, vous pouvez configurer un conteneur à l'écran de test à utiliser avec l'éditeur de style, ou un conteneur dans l'expérience si souhaité.

1. Survolez StarterGui dans l'Explorateur et insérez un ScreenGui.

2. Confirmez qu'une nouvelle instance StyleLink apparaît sous le ScreenGui avec sa propriété StyleSheet définie sur la feuille de style StyleSheet.

   

   

   Si le StyleLink n'est pas créé, vous pouvez en créer rapidement un en sélectionnant le ScreenGui dans l'Explorateur ainsi que la feuille de style StyleSheet dans la colonne de gauche de l'éditeur de style. Ensuite, cliquez sur le bouton Insérer StyleLink 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 Selector de la règle pour correspondre à des caractéristiques telles que le nom de classe, le tag d'instance et les relations hiérarchiques. À un niveau élevé, la correspondance et la modification des instances via la définition Selector d'une règle fonctionnent à travers :

• Les sélecteurs de classe Roblox qui ciblent toutes les instances d'une classe UI donnée, par exemple Frame, ImageLabel, TextButton, etc.
• Les sélecteurs de tag d'instance qui ciblent des objets UI spécifiques étiquetés via CollectionService.
• Les modificateurs d'instance appliqués via des éléments fantômes UIComponents tels que UICorner ou UIStroke.
• Les sélecteurs d'état GuiObject state qui correspondent à l'une des quatre valeurs de l'énumération Enum.GuiState telles que Hover.
• La sélection du nom de l'instance selon la valeur de Instance.Name de l'objet UI.

Règle de classe

Un sélecteur de classe de style cible toutes les instances d'une classe UI donnée. La configuration suivante applique un style à toutes les Frames avec une couleur de fond et une taille uniformes.

1. Dans la colonne de gauche de l'éditeur de style, sélectionnez Frame dans la branche Éléments UI.

   

2. Liez deux tokens de style précédemment créés à deux propriétés Frame :

   Propriété	Token de style
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire. Notez que vous pouvez taper des mots-clés pour trouver plus rapidement les propriétés dans le menu déroulant.
   2. Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
   3. Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token associé approprié.

   

   

3. Insérez un nouveau Frame dans le ScreenGui que vous avez précédemment créé et lié. Les styles que vous avez définis devraient s'appliquer automatiquement.

   

Règle de tag

Les sélecteurs de tag d'instance ciblent des objets UI spécifiques étiquetés via CollectionService. La configuration suivante applique un style à un TextButton étiqueté comme ButtonPrimary avec une couleur de fond personnalisée, une police et une taille de texte.

1. Dans la colonne de gauche de l'éditeur de style, survolez la feuille StyleSheet, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ Tag.

   

2. Renommez la nouvelle règle de tag en .ButtonPrimary (notez le . au début).

   

3. Liez trois tokens de style précédemment créés à trois propriétés TextButton :

   Propriété	Token de style
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire. Rappelez-vous que vous pouvez taper des mots-clés pour trouver plus rapidement les propriétés dans le menu déroulant.
   2. Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
   3. Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token associé approprié.

   

   

4. Insérez un nouveau TextButton dans le ScreenGui que vous avez précédemment créé et lié et taggez comme ButtonPrimary. Un raccourci pratique est le suivant :

   1. Assurez-vous que le nouveau TextButton est sélectionné dans l'Explorateur.
   2. Avec la règle de tag .ButtonPrimary sélectionnée dans la colonne de gauche de l'éditeur de style, cliquez sur Appliquer le tag dans le panneau principal. Les styles que vous avez définis devraient s'appliquer automatiquement au bouton.

   

   

Modificateur UI

Les sélecteurs de modificateur d'instance appliquent des UIComponents fantômes tels que UICorner ou UIStroke pour styliser davantage un objet. La configuration suivante applique un style à un TextLabel avec une taille de texte personnalisée et des coins arrondis.

1. Dans la colonne de gauche de l'éditeur de style, sélectionnez TextLabel dans la branche Éléments UI.

   

2. Liez un token de style précédemment créé à la propriété TextSize :

   1. Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété TextSize. Rappelez-vous que vous pouvez taper des mots-clés pour trouver plus rapidement les propriétés dans le menu déroulant.
   2. Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
   3. Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token $Text32.

   

   

Une instance pseudo est requise pour configurer et appliquer des coins arrondis à d'autres éléments. Pour en créer une :

1. Dans la colonne de gauche, survolez TextLabel, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ Instance Pseudo ⟩ UICorner.

   

   Une nouvelle instance UICorner apparaît sous l'élément TextLabel dans la colonne de gauche.

   

2. Avec la nouvelle instance UICorner sélectionnée dans la colonne de gauche, liez un token de style à la propriété CornerRadius :

   1. Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété CornerRadius.
   2. Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
   3. Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token $Rad20.

   

3. Insérez un nouveau TextLabel dans le ScreenGui que vous avez précédemment créé et lié. Les styles que vous avez définis devraient s'appliquer automatiquement.

   

Règle d'état

Les sélecteurs d'état GuiObject correspondent à l'une des quatre valeurs de l'énumération GuiState telles que Hover, vous permettant de configurer automatiquement des changements de style pour les états interactifs. La configuration suivante crée un état de survol avec une rotation de -4 degrés pour tous les ImageButtons.

1. Dans la colonne de gauche de l'éditeur de style, sélectionnez ImageButton dans la branche Éléments UI.

   

2. Cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau ⟩ GuiState ⟩ Hover.

   

   Une nouvelle instance de modificateur Hover apparaît sous l'élément ImageButton dans la colonne de gauche.

   

3. Avec le nouveau modificateur Hover 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 taper des mots-clés pour trouver plus rapidement les propriétés dans le menu déroulant.

4. Entrez -4 dans le champ de valeur de la propriété.

   

5. Insérez un nouveau ImageButton dans le ScreenGui que vous avez précédemment créé et lié. Lorsque vous survolez le bouton dans le viewport, il devrait tourner de 4 degrés dans le sens inverse des aiguilles d'une montre.

   

Requêtes de style

Les requêtes de style, similaires aux requêtes de conteneur et de média CSS, vous permettent d'appliquer une logique conditionnelle à votre UI en fonction de la taille du conteneur, du type d'entrée ou d'autres facteurs. L'éditeur de style offre un flux de travail simplifié pour créer à la fois la logique de requête (conditions) et les styles résultants en un ensemble unifié.

Requêtes intégrées

Certaines conditions de StyleQuery sont très courantes, comme le changement de propriétés basé sur la ViewportDisplaySize. Pour simplifier cela, l'éditeur de style inclut des requêtes intégrées qui vous permettent de créer des règles conditionnelles sans avoir besoin d'une instance pseudo ou réelle d'un StyleQuery ; au lieu de cela, vous utilisez simplement une règle de requête avec un sélecteur prédéfini tel que ViewportDisplaySizeSmall.

Les étapes suivantes démontrent comment générer des requêtes intégrées pour un TextLabel pour gérer les tailles de viewport Small, Medium, et Large.

1. Dans la colonne de gauche de l'éditeur de style, survolez TextLabel, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.

   

   Cela crée un dossier Queries sous la règle TextLabel contenant trois règles de requête :

   • @ViewportDisplaySizeLarge — Définir les propriétés qui s'appliquent lorsque le viewport est Large.
   • @ViewportDisplaySizeMedium — Définir les propriétés qui s'appliquent lorsque le viewport est Medium.
   • @ViewportDisplaySizeSmall — Définir les propriétés qui s'appliquent lorsque le viewport est Small.

   

2. Cliquez sur Ajouter une propriété… sous chaque règle de requête et définissez la chaîne de texte Text spécifique qui doit s'afficher lorsque cette requête est active :

   Règle de requête	Propriété	Valeur
   @ViewportDisplaySizeLarge	Text	Texte large
   @ViewportDisplaySizeMedium	Text	Texte moyen
   @ViewportDisplaySizeSmall	Text	Texte petit

3. Pour vérifier les requêtes, utilisez l'Émulateur de périphériques pour tester comment l'UI répond à différentes résolutions sur trois appareils distincts :

   1. Insérez un nouveau TextLabel dans le ScreenGui.

   2. Changez le Périphérique dans l'Émulateur de périphériques pour voir le texte changer en temps réel.

      Taille	Exemples d'émulations
      Large	PS5, PS4, Xbox One
      Medium	Ordinateur portable moyen, HD 720
      Small	iPhone XR, iPad 7ème génération

Requête personnalisée

Vous pouvez ajouter une requête de style à n'importe quelle règle existante pour créer une UI réactive qui s'adapte à son conteneur. La configuration suivante configure un TextLabel pour changer automatiquement son apparence uniquement lorsqu'il s'étend à une largeur de 400 pixels ou plus.

1. Dans la colonne de gauche de l'éditeur de style, survolez TextLabel, cliquez sur le bouton ⋮, et naviguez jusqu'à Nouveau ⟩ StyleQuery ⟩ Custom.

   

   Cette action crée un dossier Queries sous la règle TextLabel contenant deux éléments liés :

   • ::StyleQuery règle d'instance pseudo où vous définissez les Conditions.
   • @StyleQuery règle où vous définissez les Propriétés à appliquer lorsque ces conditions sont remplies.

   

2. Sélectionnez la règle parent TextLabel dans le panneau principal et définissez les propriétés par défaut suivantes :

   Propriété	Valeur
   BackgroundColor3	$Magenta
   Text	Texte par défaut

3. Sélectionnez la règle ::StyleQuery dans le panneau principal, cliquez sur Ajouter une Condition…, et configurez le suivant :

   Condition	Valeur
   MinSize	400, 0

   Consultez StyleQuery.IsActive comme référence pour d'autres conditions disponibles via la règle ::StyleQuery.

4. Sélectionnez la règle @StyleQuery dans le panneau principal et définissez les propriétés qui devraient s'appliquer lorsque la requête est active :

   Propriété	Valeur
   BackgroundColor3	$Gold
   Text	Texte large

Pour vérifier la requête, vous pouvez redimensionner manuellement un TextLabel dans le viewport.

1. Insérez un nouveau TextLabel dans le ScreenGui.

2. Ajustez sa largeur pour voir l'échange de style en temps réel.

   Largeur de 0 à 400 pixelsLargeur de plus de 400 pixels

   Pendant que la largeur du TextLabel est plus petite, la condition MinSize n'est pas remplie et le label utilise sa couleur de fond et son texte par défaut.

   

Transitions de style

Les transitions de style, comparables aux transitions CSS, vous permettent d'animer les valeurs des propriétés sur une durée définie.

Par défaut

Pour animer de nombreuses propriétés UI avec les mêmes paramètres, vous pouvez définir une transition par défaut qui s'applique à toutes les propriétés à moins qu'une autre transition ne soit explicitement définie pour une propriété spécifique.

1. Sélectionnez TextButton dans la branche Éléments UI et ensuite, dans le panneau principal, ajoutez trois nouvelles propriétés avec les valeurs suivantes :

   Propriété	Valeur
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. Survolez la ligne parente TextButton, cliquez sur le bouton ⋮, et naviguez jusqu'à Insérer ⟩ Transition.

   

   Une transition par défaut de 1, Quad, Out, 0 s'insère directement sous la règle TextButton, indiquant une transition de 1 seconde, style d'assouplissement Quad, direction d'assouplissement Out, et aucun délai.

   

3. Survolez la ligne parente TextButton, cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau ⟩ GuiState ⟩ Hover.

   

4. Pour le nouveau modificateur Hover, ajoutez deux nouvelles propriétés comme cibles pour l'état de survol.

   Propriété	Valeur
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Insérez un nouveau TextButton dans le ScreenGui que vous avez précédemment créé et lié. Lorsque vous survolez le bouton dans le viewport, il devrait s'illuminer progressivement et tourner de 5 degrés dans le sens inverse des aiguilles d'une montre.

   

Liée aux tokens

Pour réutiliser les comportements de transition à travers de multiples règles, vous pouvez définir des tokens représentant le type de données TweenInfo. La configuration suivante crée un état de survol pour transitionner tous les TextButtons à/from -5 degrés de rotation et une couleur de fond plus claire.

1. Si vous ne l'avez pas déjà fait, créez une feuille de tokens nommée TokenSheet.

   

2. Avec la nouvelle feuille de tokens sélectionnée, créez deux nouveaux tokens en cliquant sur Ajouter un token… dans le panneau principal.

   Nom du token	Type	Paramètres 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. Sélectionnez TextButton dans la branche Éléments UI et ensuite, dans le panneau principal, ajoutez trois nouvelles propriétés avec les valeurs suivantes :

   Propriété	Valeur
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. Pour chaque nouvelle propriété sauf AutoButtonColor, survolez sa ligne, cliquez sur le bouton ⋮ et sélectionnez Insérer ⟩ Transition.

   

5. Survolez la nouvelle ligne Transition sous chaque propriété, cliquez sur le bouton ⋮ et sélectionnez Lier Token. Ensuite, au lieu d'entrer une valeur statique, cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token de transition approprié.

   

   Propriété de transition	Token de transition
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. Survolez la ligne parente TextButton, cliquez sur le bouton ⋮ et naviguez jusqu'à Nouveau ⟩ GuiState ⟩ Hover.

   

7. Pour le nouveau modificateur Hover, ajoutez deux nouvelles propriétés comme cibles pour l'état de survol.

   Propriété	Valeur
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Insérez un nouveau TextButton dans le ScreenGui que vous avez précédemment créé et lié. Lorsque vous survolez le bouton dans le viewport, il devrait s'illuminer progressivement et tourner de 5 degrés dans le sens inverse des aiguilles d'une montre.

   

Thèmes de style

Les thèmes de style se composent de ensembles de tokens spécifiques pouvant être échangés, par exemple des tokens de couleur qui définissent un thème "clair" et "dark".

Création de thème

Pour extensibilité, les thèmes sont organisés en dossiers. Bien qu'un seul dossier puisse suffire à la plupart des fins, vous êtes libre d'organiser les thèmes en dossiers comme "couleurs" ou "polices" si vous le souhaitez.

1. Créez un nouveau dossier de thème :

   1. Dans la colonne de gauche de l'éditeur de style, survolez Thèmes, cliquez sur le ⊕, et sélectionnez Nouveau thème.
   2. Renommez le nouvel élément Dossier en Général.

   

2. Créez une nouvelle feuille de style de thème :

   1. Survolez le nouveau dossier Général, cliquez sur le bouton ⋮, et sélectionnez Nouvelle feuille de style de thème.
   2. Renommez-la en ThemeA.

   

Tokens de thème

Une fois qu'un thème est construit, vous pouvez lier ses tokens à diverses propriétés d'objets UI comme le BackgroundColor3 d'un TextButton. Les feuilles de thème doivent utiliser un ensemble commun de tokens pour fonctionner correctement.

Avec ThemeA sélectionné dans la colonne de gauche de l'éditeur de style :

1. Liez trois tokens de style précédemment créés à trois nouveaux tokens de thème :

   Token de thème	Token de style
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. Cliquez sur Ajouter un token… dans le panneau principal et entrez le nom du token de thème.
   2. Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token de style associé.

   

2. Dans la colonne de gauche de l'éditeur de style, sélectionnez TextButton dans la branche Éléments UI.

   

3. Liez les tokens du thème à trois nouvelles propriétés TextButton :

   Propriété	Token de thème
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. Cliquez sur Ajouter une propriété… dans le panneau principal et sélectionnez la propriété nécessaire.
   2. Au lieu d'entrer une valeur statique, cliquez sur le bouton ⋮ et sélectionnez Lier Token.
   3. Cliquez sur le $ qui apparaît dans le champ de valeur et sélectionnez le token de thème approprié.

   

   Lors de la liaison des tokens du thème, recherchez $[Token] dans ThemeA dans le survol pour savoir que le token provient du thème et non de la feuille de tokens globale (rappelez-vous que le thème dérive déjà les tokens globaux).

   

Duplication de thème

Une fois que vous avez un thème généralement établi, vous pouvez dupliquer celui-ci et changer divers tokens pour définir un style de thème unique.

1. Dans la colonne de gauche de l'éditeur de style, survolez le thème ThemeA, cliquez sur le bouton ⋮, et sélectionnez Dupliquer.

2. Renommez le thème dupliqué en ThemeB.

   

3. Liez deux tokens du thème à deux différents tokens de style :

   Token de thème	Token de style
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. À droite du champ de valeur de la propriété, cliquez sur le bouton ⋮ et sélectionnez Délier Token.
   2. Cliquez sur ⋮ à nouveau et sélectionnez Lier Token.
   3. Dans son champ de valeur, cliquez sur le $ et sélectionnez le nouveau token de style associé.

   

Échange de thème

Une fois que vous avez plusieurs thèmes, vous pouvez échanger entre eux via le dossier du thème, ou via un script comme indiqué dans SetDerives().

1. Dans la colonne de gauche de l'éditeur de style, sélectionnez le dossier Général dans la branche Thèmes.

2. Dans le panneau principal, échangez entre les thèmes en utilisant les boutons radio.

   ThemeAThemeB