Stylizacja UI | Dokumentacja – Centrum twórców Roblox

Stylizacja UI to rozwiązanie Roblox dotyczące arkuszy stylów, podobne do CSS, które pozwala na zadeklarowanie i globalne zastosowanie nadpisania właściwości instancji UI. To wsparcie na poziomie silnika jest podstawą dla Edytora Stylów i pełnego przepływu tokenów.

Pojęcia

Reguły stylów (część StyleSheet) stosują się do każdej instancji, która pasuje do definicji Selector reguły, aby dopasować cechy takie jak nazwa klasy, nazwa instancji i relacje hierarchiczne. Zobacz dokumentację Selector po szczegóły.

Tokeny stylów, zdefiniowane przez atrybuty tokenu StyleSheet, reprezentują zmienne właściwości UI, które mogą być używane w różnych stylach i komponentach, na przykład wspólny kolor dla Frame.BackgroundColor3, TextLabel.TextColor3 i UIStroke.Color. Tokeny są porównywalne do zmiennych CSS.

Motywy stylów, skonfigurowane przez atrybuty motywu StyleSheet, składają się z zestawów specyficznych tokenów, które mogą być zamieniane, na przykład tokeny kolorów, które definiują motyw "jasny" i "ciemny". Powiązane motywy muszą mieć ten sam zestaw tokenów, aby działały poprawnie.

Zapytania stylów pozwalają na stosowanie stylów warunkowo w zależności od kontekstu lub otoczenia UI. Są one porównywalne do zapytania kontenerów i zapytań mediów CSS, umożliwiając UI dostosowanie się do rozmiaru ekranu, typów wejścia lub ustawień dostępności użytkownika.

Propagacja reguł

Instancja StyleLink łączy StyleSheet i związane z nim reguły z rodzicem ScreenGui oraz wszystkimi GuiObjects w nim. Tylko jeden StyleSheet może stosować się do danego drzewa.

Definicje selektorów

Na wysokim poziomie, dopasowywanie instancji i modyfikacja poprzez definicję Selector reguły działają poprzez:

Selektory klas Roblox, które celują we wszystkie instancje danej klasy GuiObject, na przykład Frame, ImageLabel, TextButton, itd.
Tagi instancji stosowane do konkretnych obiektów UI przez CollectionService.
Wybór nazwa instancji zgodnie z wartością Instance.Name obiektu UI.
Modyfikatory instancji, podobne do pseudo-elementów CSS, stosowane przez fantomowe UIComponents, takie jak UICorner lub UIStroke.
Selektory stanu GuiObject, podobne do selektorów pseudo-klas CSS, które odpowiadają jednej z czterech wartości wyliczenia GuiState, takich jak Hover.
Selektory zapytan Roblox, podobne do zapytan kontenerów i mediów CSS, które używają prefiksu @ do stosowania stylów tylko wtedy, gdy instancja lub pseudo-instancja StyleQuery o tej samej nazwie jest aktywna.

Poniższa konfiguracja pokazuje, jak tokeny rozmiaru i koloru, motyw i selektor klasy "Frame" produkują magentowy Frame o rozmiarze 200×200 pikseli.

Odpowiednik kodu

Selektor klasy UI
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- Tokeny
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"))

-- MotywA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Pochodne globalnych tokenów
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- MotywB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Pochodne globalnych tokenów
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- ArkuszProjektu
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Pochodne z ThemeB
themeDerive.Parent = designSheet

-- Połącz arkusz projektowy z ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Skonfiguruj regułę
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Selektor klasy
rule.Parent = designSheet

-- Ustaw właściwości reguły
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

Zmodyfikowane właściwości

Właściwości instancji wpływające na stylizację są oznaczone ⚠ w oknie Właściwości, a najechanie na zmodyfikowaną właściwość pokazuje, który styl na nią wpływa. Na przykład, jeśli reguła stylu nakazuje oznaczonej Frame użyć AnchorPoint o 0.5, 0.5, ta właściwość obiektu pokaże domyślną wartość 0, 0, ale jej rzeczywisty AnchorPoint użyje wartości stylizowanej reguły.

Gdy domyślna lub stylizowana wartość właściwości zostaje dodatkowo zmodyfikowana dla konkretnego obiektu UI, staje się pogrubiona, aby wskazać nadpisaną wartość. Na przykład — zakładając domyślną wartość AnchorPoint o 0, 0 — ustawienie tej właściwości na 1, 1 dla konkretnej instancji ujawnia nadpisanie w pogrubieniu:

Dla każdej nadpisanej wartości właściwości możesz kliknąć prawym przyciskiem myszy w oknie Właściwości i wybrać Resetuj do domyślnej, aby przywrócić ją do wartości stylizowanej, lub do domyślnej wartości właściwości, jeśli nie została stylizowana.