UI stilizasyonu

UI stilizasyonu, UI örnek özelliklerine geçersiz kılmaları beyan etmenizi ve küresel olarak uygulamanızı sağlayan CSS'e benzer bir Roblox çözümüdür. Bu motor düzeyindeki destek, Stil Düzenleyici ve uçtan uca token boru hattının temelidir.

Kavramlar

Stil kuralları (StyleSheet parçası) kuralın Selector tanımına uyan her örneğe uygulanır ve sınıf adı, örnek adı ve hiyerarşi ilişkileri gibi özellikleri eşleştirir. Ayrıntılar için Selector belgelerine bakın.

Stil token'ları, bir token StyleSheet'inin nitelikleri aracılığıyla tanımlanan, stiller ve bileşenler arasında kullanılabilecek UI özellik değişkenlerini temsil eder; örneğin Frame.BackgroundColor3, TextLabel.TextColor3 ve UIStroke.Color için ortak bir renk. Token'lar, CSS'deki değişkenlere benzer.

Stil temaları, bir tema StyleSheet'inin nitelikleri aracılığıyla yapılandırılan, değiştirilebilen belirli token setlerinden oluşur; örneğin "açık" ve "koyu" temayı tanımlayan renk token'ları. İlgili temaların düzgün çalışması için aynı token setine sahip olmaları gerekir.

Stil sorguları, UI'nın bağlamına veya ortamına dayanarak stilleri koşullu olarak uygulamanıza olanak tanır. Bunlar, ekran boyutuna, giriş türlerine veya kullanıcı erişilebilirlik ayarlarına uyum sağlamak için CSS'deki konteyner sorguları ve medya sorgularına benzer.

Kural yayılımı

Bir StyleLink örneği, bir StyleSheet'i ve ilişkili kurallarını bir üst ScreenGui ile içindeki tüm GuiObjects'a bağlar. Belirli bir ağaç için yalnızca bir StyleSheet uygulanabilir.

Seçici tanımları

Yüksek seviyede, bir kuralın Selector tanımı aracılığıyla örnek eşleştirme ve değiştirme şu şekilde işler:

• Roblox sınıf seçicileri, belirli bir GuiObject sınıfının tüm örneklerini hedef alır; örneğin Frame, ImageLabel, TextButton vb.
• CollectionService aracılığıyla belirli UI nesnelerine uygulanan örnek etiketleri.
• UI nesnesinin Instance.Name değerine göre örnek adı seçimi.
• Hayali UIComponents üzerinden uygulanan örnek değiştiricileri, CSS'nin sahte öğelerine benzer; örneğin UICorner veya UIStroke.
• GuiObject durum seçicileri, CSS'deki sahte sınıf seçicilerine benzer; GuiState enum değerlerinden biri olan Hover ile ilişkilidir.
• Roblox sorgu seçicileri, CSS'deki konteyner ve medya sorgularına benzer; @ ön eki kullanarak yalnızca bir StyleQuery örneği veya aynı adı taşıyan sahte örnek aktifken stilleri uygular.

Aşağıdaki kurulum, boyut ve renk token'ları, bir tema ve "Frame" sınıf seçici kullanarak 200×200 piksel boyutunda bir eflatun Frame üretir.

UI Sınıf Seçici
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

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

-- TemaA
local themeA = Instance.new("StyleSheet")
themeA.Name = "TemaA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Küresel token'ları türet
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- TemaB
local themeB = Instance.new("StyleSheet")
themeB.Name = "TemaB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Küresel token'ları türet
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- TasarımSayfası
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- TemaB'den türet
themeDerive.Parent = designSheet

-- TasarımSayfasını ScreenGui'ye bağla
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Kuralı yapılandır
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Sınıf seçici
rule.Parent = designSheet

-- Kural özelliklerini ayarla
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

Değiştirilen özellikler

Stilizasyon tarafından etkilenen örnek özellikleri, Özellikler penceresinde ⚠ ile işaretlenmiştir ve etkilenen bir özellik üzerine gelindiğinde hangi stilin onu etkilediği gösterilir. Örneğin, bir stil kuralı etiketli bir Frame'in AnchorPoint değerini 0.5, 0.5 olarak kullanmasını söylerse, o nesne özelliği varsayılan değeri olan 0, 0 olarak gösterilecek ancak aslında AnchorPoint kuralın stilize edilmiş değerini kullanacaktır.

Varsayılan veya stilize edilmiş bir özellik değeri, belirli bir UI nesnesi için daha da değiştirilirse, geçersiz kılınmış bir değeri belirtmek için kalın hale gelir. Örneğin — varsayılan AnchorPoint değeri 0, 0 olarak varsayıldığında — bu özelliği belirli bir örnek için 1, 1 olarak ayarlamak, kalın bir şekilde bir geçersiz kılmayı açığa çıkarır:

Herhangi bir geçersiz kılınmış özellik değeri için, Özellikler penceresinde sağ tıklayıp Varsayılan olarak Sıfırla seçeneğini seçebilirsiniz; bu, onu stilize edilmiş değere veya stilize edilmemişse varsayılan özellik değerine geri döndürür.