Stylisation de l'interface utilisateur

La stylisation de l'interface utilisateur est une solution Roblox aux feuilles de style, semblable au CSS, qui vous permet de déclarer et d'appliquer globalement des substitutions aux propriétés d'instance de l'interface utilisateur. Ce support au niveau du moteur est la fondation de l'éditeur de style et du pipeline de jetons de bout en bout.

Concepts

Les règles de style (partie d'un StyleSheet) s'appliquent à chaque instance qui correspond à la définition de Selector de la règle pour correspondre à des caractéristiques telles que le nom de la classe, le nom de l'instance et les relations hiérarchiques. Consultez la documentation sur Selector pour plus de détails.

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

Les thèmes de style, configurés à travers des attributs d'un StyleSheet de thème, se composent d'ensembles de jetons spécifiques qui peuvent être échangés, par exemple des jetons de couleur qui définissent un thème "clair" et "sombre". Les thèmes associés doivent avoir le même ensemble de jetons pour fonctionner correctement.

Les requêtes de style vous permettent d'appliquer des styles conditionnellement en fonction du contexte ou de l'environnement de l'interface utilisateur. Celles-ci sont comparables aux requêtes de conteneur et aux requêtes médias CSS, permettant à l'interface utilisateur de s'adapter à la taille de l'écran, aux types d'entrée ou aux paramètres d'accessibilité de l'utilisateur.

Propagation des règles

Une instance StyleLink lie un StyleSheet et ses règles associées à un ScreenGui parent et à tous les GuiObjects à l'intérieur. Une seule StyleSheet peut s'appliquer à un arbre donné.

Définitions des sélecteurs

À 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 GuiObject donnée, par exemple Frame, ImageLabel, TextButton, etc.
• Les tags appliqués à des objets d'interface utilisateur spécifiques par le biais de CollectionService.
• La sélection par nom d'instance selon la valeur de Instance.Name de l'objet d'interface utilisateur.
• Les modificateurs d'instance, similaires aux pseudo-éléments CSS, appliqués via des UIComponents fantômes tels que UICorner ou UIStroke.
• Les sélecteurs d'état GuiObject, similaires aux sélecteurs de pseudo-classe CSS, qui correspondent à l'une des quatre valeurs d'énumération GuiState telles que Hover.
• Les sélecteurs de requête Roblox, similaires aux requêtes de conteneur et médias CSS, qui utilisent le préfixe @ pour appliquer des styles uniquement pendant qu'une instance ou un pseudo‑instance StyleQuery du même nom est active.

La configuration suivante montre comment les jetons de taille et de couleur, un thème et un sélecteur de classe de "Frame" produisent un Frame magenta de taille 200×200 pixels.

Sélecteur de Classe UI
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- Jetons
local tokens = Instance.new("StyleSheet")
tokens.Name = "Tokens"
tokens.Parent = ReplicatedStorage
tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))
tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))
tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))
tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))
tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))
tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))
tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))

-- ThemeA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Dériver des jetons globaux
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- ThemeB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Dériver des jetons globaux
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- DesignSheet
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Dériver de ThemeB
themeDerive.Parent = designSheet

-- Lier DesignSheet à ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Configurer la règle
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Sélecteur de classe
rule.Parent = designSheet

-- Définir les propriétés de la règle
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

Propriétés modifiées

Les propriétés d'instance affectées par la stylisation sont signalées par un ⚠ dans la fenêtre Propriétés, et passer les yeux sur une propriété affectée montre quel style l'influence. Par exemple, si une règle de style dit à un Frame étiqueté d'utiliser un AnchorPoint de 0.5, 0.5, cette propriété d'objet affichera la valeur par défaut de 0, 0 mais son AnchorPoint réel utilisera la valeur stylisée de la règle.

Lorsque la valeur d'une propriété par défaut ou stylisée est à nouveau modifiée pour un objet d'interface utilisateur spécifique, elle devient en gras pour indiquer une valeur remplacée. Par exemple — en supposant un AnchorPoint par défaut de 0, 0 — définir cette propriété sur 1, 1 pour une instance spécifique révèle un remplacement en gras :

Pour toute valeur de propriété remplacée, vous pouvez cliquer avec le bouton droit dessus dans la fenêtre Propriétés et sélectionner Réinitialiser à défaut pour la ramener à la valeur stylisée, ou à la valeur de propriété par défaut si elle n'a pas été stylisée.