การออกแบบ UI

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

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

แนวคิด

สไตล์ กฎ (ส่วนหนึ่งของ StyleSheet ) ใช้กับทุกตัวอย่างที่ตรงกับคำนิยามของกฎ Selector เพื่อจับคู่คุณลักษณะเช่นชื่อคลาสชื่อตัวอย่างและความสัมพันธ์ระหว่างระดับดูคู่มือ Selector สำหรับรายละเอียด

สไตล์ โทเค็น ที่กำหนดผ่าน คุณสมบัติ ของโทเค็น แทนที่ตัวแปรคุณสมบัติ UI ที่สามารถใช้ได้ทั่วสไตล์และส่วนประกอบ เช่น สีที่ใช้บ่อยสำหรับ , และ ตัวอย่างเช่นโทเค็นสามารถเปรียบเทียบกับตัวแปร CSS ได้

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

การแพร่กระจายกฎ

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

การจำแนกคำนิยามตัวเลือก

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

  • ตัวเลือกคลาส Roblox ซึ่งเล็งไปที่ตัวอย่างทั้งหมดของคลาสที่กำหนด ตัวอย่างเช่น , , ฯลฯ
  • แท็ก ตัวอย่าง ถูกใช้กับวัตถุ UI เฉพาะผ่าน CollectionService
  • การเลือกตัวอย่าง ชื่อ ตามค่าของวัตถุ UI Instance.Name
  • ตัวปรับเปลี่ยนตัวอย่าง **** คล้ายกับ pseudo-Elements CSS ที่ใช้ผ่าน phantom UIComponents เช่น UICorner หรือ UIStroke
  • GuiObject สถานะ ตัวเลือกเซิร์ฟเวอร์ที่คล้ายกับ CSS pseudo-class ตัวเลือกซึ่งตรงกับหนึ่งในสี่ GuiState ค่าเอนเนมที่เป็นตัวเลขเช่น Hover

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

ตัวเลือกคลาส UI
local CollectionService = game:GetService("CollectionService")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local screenGui = script.Parent



-- โทเค็น

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



-- ธีมA

local themeA = Instance.new("StyleSheet")

themeA.Name = "ThemeA"

themeA.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- ดึงโทเค็นระดับโลก

tokensDerive.Parent = themeA

themeA:SetAttribute("FrameSize", "$SquareM")

themeA:SetAttribute("FrameColor", "$Aqua")



-- ธีม B

local themeB = Instance.new("StyleSheet")

themeB.Name = "ThemeB"

themeB.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- ดึงโทเค็นระดับโลก

tokensDerive.Parent = themeB

themeB:SetAttribute("FrameSize", "$SquareL")

themeB:SetAttribute("FrameColor", "$Magenta")



-- แผ่นออกแบบ

local designSheet = Instance.new("StyleSheet")

designSheet.Name = "DesignSheet"

designSheet.Parent = ReplicatedStorage

local themeDerive = Instance.new("StyleDerive")

themeDerive.StyleSheet = themeB  -- สืบย้อนจาก ThemeB

themeDerive.Parent = designSheet



-- เชื่อมออกแบบแผ่นเชื่อมไปยัง ScreenGui

local styleLink = Instance.new("StyleLink")

styleLink.StyleSheet = designSheet

styleLink.Parent = screenGui



-- กำหนดกฎ

local rule = Instance.new("StyleRule")

rule.Selector = "Frame"  -- ตัวเลือกคลาส

rule.Parent = designSheet



-- ตั้งค่าคุณสมบัติกฎ

rule:SetProperties({

	["BackgroundColor3"] = "$FrameColor",

	["Size"] = "$FrameSize",

	["BorderSizePixel"] = 0

})



local frame = Instance.new("Frame")

frame.Parent = screenGui

คุณสมบัติที่แก้ไขแล้ว

คุณสมบัติของตัวอย่างที่ได้รับผลกระทบจากการจัดรูปแบบถูกเครื่องหมายด้วย ⚠ ในหน้าต่าง คุณสมบัติ และเลื่อนเมาส์ไปเหนือคุณสมบัติที่ได้รับผลกระทบจะแสดงสไตล์ที่มีอิทธิพลต่อมันตัวอย่างเช่น หากกฎสไตล์บอกแท็ก ให้ใช้ ของ แต่คุณสมบัติของวัตถุจะแสดงค่าเริ่มต้นของ ของ แต่ค่าจริงจะใช้ค่าสไตล์ของกฎ แทน

เมื่อมูลค่าคุณสมบัติเริ่มต้นหรือแบบสไตล์ถูกแก้ไขเพิ่มเติมสำหรับวัตถุ UI เฉพาะ มันจะกลายเป็น ห้างแข็ง เพื่อระบุมูลค่าที่ถูกแทนที่ตัวอย่างเช่น — โดยเดาค่าเริ่มต้น ของ — การตั้งค่าคุณสมบัตินั้นให้เป็น สำหรับตัวอย่างเฉพาะจะเปิดเผยการยกเลิกในตัวหนา:

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