การจัดรูปแบบ UI

การจัดรูปแบบ UI เป็นโซลูชันของ Roblox สำหรับรูปแบบ CSS ที่ช่วยให้คุณประกาศและนำไปใช้การเขียนแบบทั่วโลกที่มีการปรับแต่งคุณสมบัติของ UI instance ได้ การสนับสนุนในระดับเอนจินนี้เป็นพื้นฐานสำหรับ Style Editor และท่อโทเค็นแบบ end-to-end

แนวคิด

กฎ ของสไตล์ (ส่วนหนึ่งของ StyleSheet) จะใช้กับทุก instance ที่ตรงกับการกำหนด Selector ของกฎ เพื่อจับคู่ลักษณะต่างๆ เช่น ชื่อคลาส, ชื่อ instance และความสัมพันธ์ของชั้น See the Selector documentation for details.

โทเค็น ของสไตล์ ที่กำหนดผ่าน attributes ของโทเค็น StyleSheet แสดงถึงตัวแปรคุณสมบัติ UI ที่สามารถใช้ได้ทั่วทั้งสไตล์และส่วนประกอบ ยกตัวอย่างเช่น สีทั่วไปสำหรับ Frame.BackgroundColor3, TextLabel.TextColor3, และ UIStroke.Color. โทเค็นเปรียบเสมือน CSS ตัวแปร.

ธีม ของสไตล์ ที่กำหนดค่าผ่าน attributes ของธีม StyleSheet ประกอบด้วยชุดของโทเค็นเฉพาะที่สามารถสลับกันได้ ยกตัวอย่างเช่น โทเค็นสีที่กำหนดธีม "ส่วนที่สว่าง" และ "ส่วนที่มืด" ธีมที่เกี่ยวข้องต้องมีชุดโทเค็นเดียวกันเพื่อทำงานได้ถูกต้อง

คำถาม ของสไตล์อนุญาตให้คุณนำสไตล์ไปใช้ตามเงื่อนไข โดยอิงจากบริบทหรือสภาพแวดล้อมของ UI ซึ่งเปรียบเสมือน CSS container queries and media queries ที่ช่วยให้ UI ปรับตัวเข้ากับขนาดหน้าจอ, ประเภทของข้อมูลนำเข้า หรือการตั้งค่าการเข้าถึงของผู้ใช้

การแพร่กระจายของกฎ

ตัวอย่าง StyleLink เชื่อมโยง StyleSheet และกฎที่เกี่ยวข้องกับ ScreenGui พ่อแม่ และทุก GuiObjects ที่อยู่ภายในมันได้ โดยใช้ StyleSheet เพียงหนึ่งเดียว สามารถนำไปใช้กับต้นไม้ที่กำหนดได้

การกำหนดตัวเลือก

ในระดับสูง การจับคู่และการแก้ไข instance ผ่านการกำหนด Selector ของกฎทำงานผ่าน:

• ตัวเลือก คลาส ของ Roblox ที่กำหนดเป้าหมายทุก instance ของคลาส GuiObject ที่กำหนด เช่น Frame, ImageLabel, TextButton, เป็นต้น
• แท็ก instance ที่นำไปใช้กับวัตถุ UI เฉพาะโดยใช้ CollectionService.
• การเลือก ชื่อ ของ instance ตามค่าของ Instance.Name ของวัตถุ UI
• ตัวดัดแปลงของ instance ที่คล้ายกับ CSS pseudo-elements ที่นำไปใช้ผ่าน phantom UIComponents เช่น UICorner หรือ UIStroke.
• ตัวเลือก สถานะ ของ GuiObject ที่คล้ายกับตัวเลือก CSS pseudo-class ซึ่งตรงกับหนึ่งในค่าของ GuiState สี่ค่า เช่น Hover.
• ตัวเลือก query ของ Roblox ที่คล้ายกับ CSS container and media queries ที่ใช้พรีฟิก @ เพื่อใช้สไตล์เฉพาะขณะที่ instance หรือ pseudo-instance StyleQuery ที่มีชื่อเดียวกันกำลังทำงานอยู่

การตั้งค่าต่อไปนี้จะแสดงให้เห็นว่าโทเค็นขนาดและสี, ธีม และตัวเลือกคลาสของ "Frame" สร้าง Frame สีชมพูขนาด 200×200 พิกเซล

UI Class Selector
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- Tokens
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  -- Derive global tokens
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  -- Derive global tokens
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  -- Derive from ThemeB
themeDerive.Parent = designSheet

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

-- Configure rule
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Class selector
rule.Parent = designSheet

-- Set rule properties
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

คุณสมบัติที่ปรับเปลี่ยน

คุณสมบัติของ instance ที่ได้รับผลกระทบจากการจัดรูปแบบจะถูกทำเครื่องหมายด้วย ⚠ ในหน้าต่าง Properties และการชี้ไปที่คุณสมบัติที่ได้รับผลกระทบจะแสดงว่าสไตล์ใดที่ส่งผลต่อมัน ตัวอย่างเช่น หากกฎสไตล์บอกให้ Frame ที่มีแท็กใช้ AnchorPoint ของ 0.5, 0.5 แต่คุณสมบัตินั้นจะแสดงค่าของ default เป็น 0, 0 แต่ค่าของ AnchorPoint ที่แท้จริงจะใช้ค่าของ styled ตามกฎ

เมื่อค่าคุณสมบัติแบบดั้งเดิมหรือแบบสไตล์ถูกปรับเปลี่ยนเพิ่มเติมสำหรับวัตถุ UI เฉพาะ มันจะปรากฏเป็น ตัวหนา เพื่อบ่งบอกถึงค่าที่ถูกแทนที่ ตัวอย่างเช่น สมมติว่ามีค่า AnchorPoint แบบดั้งเดิมเป็น 0, 0 การตั้งค่าคุณสมบัตินั้นเป็น 1, 1 สำหรับ instance เฉพาะจะแสดงการแทนค่าเป็นตัวหนา:

สำหรับค่าคุณสมบัติที่ถูกแทนที่ คุณสามารถคลิกขวาที่มันในหน้าต่าง Properties และเลือก Reset to Default เพื่อคืนค่าเป็นค่าที่มีการปรับแต่ง หรือเป็นค่าคุณสมบัติมาตรฐานถ้ายังไม่ได้รับการปรับแต่ง.