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

เมื่อเปิดแล้ว คลิกปุ่ม สร้างการออกแบบ เพื่อสร้างชุดสไตล์พื้นฐาน

โทเค็นสไตล์
สไตล์ โทเค็น ที่กำหนดผ่าน คุณสมบัติ ของโทเค็น แทนที่ตัวแปรคุณสมบัติ UI ที่สามารถใช้ได้ทั่วสไตล์และส่วนประกอบ; ตัวอย่างเช่น อาจมีสีที่เหมือนกันสำหรับ , และ .โทเค็นเปรียบเทียบได้กับ ตัวแปร CSS
สร้างแผ่นสไตล์โทเค็นใหม่:
- ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่ โทเค็น คลิกที่ ⊕ และเลือก แบบฟอร์มสไตล์โทเค็นใหม่ 2. เปลี่ยนชื่อแผ่นใหม่เป็น TokenSheet
เมื่อแผ่นโทเค็นใหม่ถูกเลือกแล้ว สร้างโทเค็นหลายตัวโดยคลิกที่ เพิ่มโทเค็น… ในแผงหลักโทเค็นเหล่านี้จะถูกใช้ตลอดคู่มือนี้สำหรับทั้ง กฎ และ ธีม
ชื่อโทเค็น ประเภท มูลค่า Gold Color3 #ffcc00 Magenta Color3 #ff0099 Orange Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 จํานวน 24 Text32 จํานวน 32
แผ่นออกแบบ
แผ่นสไตล์การออกแบบรวบรวมกฎสไตล์ และสามารถเชื่อมโยงกับต้นไม้ DataModel เพื่อใช้คุณสมบัติสไตล์กับตัวอย่าง UIเฉพาะหนึ่ง StyleSheet สามารถใช้กับต้นไม้ที่กำหนดได้ แม้ว่าคุณจะสามารถใช้ ธีม เพื่อสลับรูปแบบที่เกี่ยวข้องกับ UI ของคุณได้ แนวคิดที่ครอบคลุมในภายหลังในคู่มือนี้
แผ่นออกแบบที่กรอกไว้แล้วชื่อ แผ่นสไตล์ ถูกสร้างขึ้นผ่านปุ่ม สร้างการออกแบบ มันมีกฎคลาสสำหรับวัตถุ UI ทั่วไปเช่น Frame และ TextLabelนอกจากนี้ยังมีสองตัวอย่าง StyleDerive ที่ได้รับ (มรดก) โทเค็น และสไตล์จากแผ่นสไตล์เบสเพื่อใช้ในการกำหนดสไตล์ที่กำหนดเอง

เมื่อคุณมีแผ่นออกแบบแล้ว คุณสามารถตั้งค่าการทดสอบ บนภาชนะบนหน้าจอ เพื่อใช้กับตัวแก้ไขสไตล์ หรือ บนภาชนะในประสบการณ์ หากต้องการ
เลื่อนเมาส์ไปที่ StarterGui ใน สํารวจ และใส่ ScreenGui
ยืนยันว่าตัวอย่างใหม่ StyleLink ปรากฏภายใต้ ScreenGui ด้วยคุณสมบัติ StyleSheet ที่กำหนดเป็นแผ่นออกแบบ StyleSheet
กฎสไตล์
สไตล์ กฎ ใช้กับทุกตัวอย่างที่ตรงกับคํานิยามของกฎ Selector เพื่อจับคู่คุณลักษณะเช่นชื่อคลาสชื่อตัวอย่างและความสัมพันธ์ระหว่างระดับในระดับสูง การจับคู่และการแก้ไขตัวอย่างผ่านการกำหนดค่าของกฎ Selector ทำงานผ่าน:
- ตัวเลือกคลาส Roblox ซึ่งเป้าหมายทุกตัวอย่างของคลาส UI ที่กำหนด ตัวอย่างเช่น , , ฯลฯ
- การเลือกชื่อตัวอย่างตามค่าของวัตถุ UI Instance.Name
กฎคลาส
สไตล์ คลาส เลือกเป้าหมายทั้งหมดของคลาส UI ที่กำหนดแล้วสไตล์การตั้งค่ากฎต่อไปนี้ทั้งหมด Frames ด้วยสีพื้นหลังและขนาดที่เท่ากัน
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก กรอบ ในสาขา องค์ประกอบ UI
เชื่อมโยงสองโทเคนสไตล์ที่สร้างไว้ก่อนหน้านี้ ไปยังสองคุณสมบัติ Frame:
คุณสมบัติ โทเค็นสไตล์ BackgroundColor3 $Magenta Size $SquareL - คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติที่จำเป็นโปรดทราบว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติในเมนูดรอปดาวน์ได้เร็วขึ้น
- แทนที่จะใส่ค่าคงที่ คลิกปุ่ม ⋮ และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นที่เหมาะสม
ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ สไตล์ที่คุณกำหนดควรใช้กับมันโดยอัตโนมัติ
กฎป้ายชื่อ
ตัวเลือกแท็ก ตัวอย่าง เลือกเป้าหมายวัตถุ UI เฉพาะ ถูกติดตาม ผ่าน CollectionServiceรูปแบบการตั้งค่ากฎต่อไปนี้จะติดตั้งแท็ก TextButton ที่มีป้ายชื่อว่า ButtonPrimary ด้วยสีพื้นหลังและฟอนต์และขนาดข้อความที่กําหนดเอง
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่แผ่น แผ่นสไตล์ คลิกปุ่ม ⋮ และนำทางไปยัง แท็กใหม่
เปลี่ยนชื่อกฎแท็กใหม่ .ButtonPrimary (โปรดทราบตัวนำหน้า . )
เชื่อมโยงสามโทเค็นสไตล์ที่สร้างไว้ก่อนหน้านี้ สามคุณสมบัติ:
คุณสมบัติ โทเค็นสไตล์ BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติที่จำเป็นโปรดจำไว้ว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติได้เร็วขึ้นในเมนูการเลือกลง
- แทนที่จะใส่ค่าคงที่ คลิกปุ่ม ⋮ และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นที่เหมาะสม
ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ และ แท็ก เป็น ลัดที่สะดวกคือดังนี้:
- ตรวจสอบให้แน่ใจว่า ใหม่ TextButton ถูกเลือกใน สํารวจ .
- ด้วยกฎป้าย .ButtonPrimary ที่เลือกในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ คลิก ใช้แท็ก ในแผงหลักสไตล์ที่คุณกำหนดควรใช้กับปุ่มโดยอัตโนมัติ
ตัวแก้ไข UI
ตัวเลือกตัวปรับเปลี่ยนตัวอย่างใช้ผี UIComponents เช่น UICorner หรือ UIStroke เพื่อตกแต่งวัตถุต่อไปรูปแบบการตั้งค่ากฎต่อไปนี้จะสร้าง TextLabel ด้วยขนาดข้อความที่กําหนดเองและมุมโค้ง
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก TextLabel ในสาขา องค์ประกอบ UI
เชื่อมโยงโทเค็นสไตล์ที่สร้างไว้ล่วงหน้า กับคุณสมบัติ TextSize:
- คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติ TextSizeโปรดจำไว้ว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติได้เร็วขึ้นในเมนูการเลือกลง
- แทนที่จะใส่ค่าคงที่ คลิกปุ่ม ⋮ และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็น $Text32
ต้องมี ตัวอย่างปลอม เพื่อกำหนดค่าและใช้มุมโค้งกับองค์ประกอบอื่น ๆ เพื่อสร้างหนึ่ง:
ในคอลัมน์ด้านซ้าย, เลื่อนเมาส์ไปที่ TextLabel , คลิกปุ่ม ⋮ และนําทางผ่านไปยัง ใหม่ > Pseudo Instance > UICorner
ตัวอย่างปลอมใหม่ UICorner ปรากฏภายใต้องค์ประกอบ TextLabel ในคอลัมน์ด้านซ้าย
ด้วยตัวอย่างใหม่ UICorner ที่เลือกในคอลัมน์ด้านซ้าย เชื่อมโยงโทเค็นสไตล์ที่สร้างไว้ล่วงหน้า style token กับคุณสมบัติ CornerRadius
- คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติ CornerRadius
- แทนที่จะใส่ค่าคงที่ คลิกปุ่ม ⋮ และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็น $Rad20
ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ สไตล์ที่คุณกำหนดควรใช้กับมันโดยอัตโนมัติ
กฎของรัฐ
สถานะ ตัวเลือกตรงกับหนึ่งในสี่ของค่า enum เช่น ทำให้คุณสามารถกำหนดค่าการเปลี่ยนแปลงสไตล์สำหรับสถานะโต้ตอบได้อัตโนมัติการตั้งค่ากฎต่อไปนี้สร้างสถานะโฮเวอร์ของ -4 องศาการหมุนสำหรับทั้งหมด ImageButtons
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก ปุ่มรูปภาพ ในสาขา องค์ประกอบ UI
คลิกที่ปุ่ม ⋮ และนำทางไปที่ ใหม่ > GuiState > โฮเวอร์
ตัวแก้ไขสถานะใหม่ โฮเวอร์ ปรากฏภายใต้องค์ประกอบ ปุ่มภาพ ในคอลัมน์ด้านซ้าย
ด้วยตัวแก้ไขใหม่ เลื่อน ที่เลือกในคอลัมน์ด้านซ้าย คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือก Rotationโปรดจำไว้ว่าคุณสามารถพิมพ์คำหลักเพื่อค้นหาคุณสมบัติได้เร็วขึ้นในเมนูการเลือกลง
ใส่ -4 ในฟิลด์ค่าของคุณ
ใส่ใหม่ ใน ที่คุณสร้างและเชื่อมโยงไว้ก่อนหน้านี้ เมื่อคุณเลื่อนเมาส์ไปเหนือปุ่มในหน้าต่างดู มันควรหมุน 4 องศาไปทางซ้าย
ธีมสไตล์
ธีมสไตล์ ประกอบด้วยชุดของโทเค็นเฉพาะที่สามารถสลับได้ เช่น โทเค็นสีที่กำหนดธีม "สว่าง" และ "มืด"
การสร้างธีม
สำหรับการขยายเวลาใช้งานธีมจะจัดเป็นไฟล์โฟลเดอร์ในขณะที่โฟลเดอร์เดียวอาจเพียงพอสำหรับวัตถุประสงค์ส่วนใหญ่ คุณสามารถจัดระเบียบธีมในโฟลเดอร์เช่น "สี" หรือ "ฟอนต์" หากต้องการได้
สร้างโฟลเดอร์ธีมใหม่:
- ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่ ธีม คลิกที่ ⊕ และเลือก ธีมใหม่ 2. เปลี่ยนชื่อรายการโฟลเดอร์ใหม่ เป็น ทั่วไป
สร้างแผ่นสไตล์ธีมใหม่:
- เลื่อนเมาส์ไปที่โฟลเดอร์ใหม่ ทั่วไป คลิกปุ่ม ⋮ และเลือก แบบฟอร์มรูปแบบใหม่ 2. เปลี่ยนชื่อเป็น ThemeA
โทเค็นธีม
เมื่อสร้างธีมแล้ว คุณสามารถเชื่อมโยงโทเค็นของมันกับคุณสมบัติ UI ต่างๆ เช่น BackgroundColor3 ของ TextButtonแผ่นธีมต้องใช้ชุดโทเค็นทั่วไปเพื่อทำงานอย่างถูกต้อง
ด้วย ธีมA ที่เลือกในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์:
เชื่อมโยงสามโทเค็นสไตล์ที่สร้างไว้ก่อนหน้านี้ style tokens กับสามโทเค็นธีมใหม่:
โทเคนธีม โทเค็นสไตล์ BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - คลิก เพิ่มโทเค็น... ในแผงหลักและใส่ชื่อโทเค็นหัวข้อ
- คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นสไตล์ที่เกี่ยวข้อง
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือก ปุ่มข้อความ ในสาขา องค์ประกอบ UI
เชื่อมโทเค็นของธีมกับสามคุณสมบัติใหม่ TextButton:
คุณสมบัติ โทเคนธีม BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - คลิก เพิ่มคุณสมบัติ... ในแผงหลักและเลือกคุณสมบัติที่จำเป็น
- แทนที่จะใส่ค่าคงที่ คลิกปุ่ม ⋮ และเลือก โทเค็นลิงก์ 3. คลิกที่ $ ซึ่งปรากฏในฟิลด์ค่าและเลือกโทเค็นหัวข้อที่เหมาะสม
การซ้ำธีม
เมื่อคุณมีธีมที่กำหนดไว้ทั่วไปแล้ว คุณสามารถ ซ้ำ มันและเปลี่ยนโทเค็นต่างๆ เพื่อกำหนดสไตล์ธีมที่ไม่ซ้ำกัน
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลื่อนเมาส์ไปที่ธีม ThemeA คลิกปุ่ม ⋮ และเลือก ซ้ำ
เปลี่ยนชื่อธีมซ้ำเป็น ThemeB
เชื่อมโยงสองโทเค็นของธีมไปยังโทเค็นสไตล์สองแบบที่แตกต่างกัน:
โทเคนธีม โทเค็นสไตล์ BackColor $Magenta ButtonTextSize $Text24 - ไปที่ด้านขวาของฟิลด์ค่าของทรัพย์สิน, คลิกปุ่ม ⋮ และเลือก ยกเลิกการเชื่อมโยงโทเค็น .
- คลิก ⋮ อีกครั้งและเลือก โทเค็นลิงก์ 3. ในฟิลด์ค่าของมัน, คลิกที่ $ และเลือกโทเค็นสไตล์ที่เกี่ยวข้องใหม่
การสลับธีม
เมื่อคุณมี หัวข้อหลายรายการ คุณสามารถสลับระหว่างพวกเขาผ่านโฟลเดอร์ของธีมหรือผ่านสคริปต์ตามที่อธิบายไว้ใน SetDerives()
ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ เลือกโฟลเดอร์ ทั่วไป ในสาขา ธีม 2. ในแผงหลัก สลับระหว่างธีมโดยใช้ปุ่มวิทยุ