ตัวแก้ไขสไตล์

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

เข้าถึง ตัวแก้ไขสไตล์ ผ่านแท็บ UI.

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

โทเค็นสไตล์

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

1. สร้างแผ่นโทเค็นใหม่:

   1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้ชี้ไปที่ โทเค็น, คลิก ⊕, และเลือก แผ่นโทเค็นใหม่.
   2. เปลี่ยนชื่อแผ่นใหม่เป็น TokenSheet.

   

2. เมื่อเลือกแผ่นโทเค็นใหม่แล้ว ให้สร้างโทเค็นหลายตัวโดยคลิก เพิ่มโทเค็น… ในแผงหลัก. โทเค็นเหล่านี้จะถูกใช้ตลอดคู่มือนี้สำหรับทั้ง กฎ และ ธีม.

   

   ชื่อโทเค็น	ประเภท	ค่า
   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	number	24
   Text32	number	32

   

แผ่นออกแบบ

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

แผ่นออกแบบที่มีข้อมูลล่วงหน้าชื่อ StyleSheet ถูกสร้างขึ้นผ่านปุ่ม สร้างการออกแบบ. มันมีคลาสกฎสำหรับวัตถุ UI ทั่วไป เช่น Frame และ TextLabel. นอกจากนี้ยังมีสองอินสแตนซ์ StyleDerive ที่สืบทอด (inherit) โทเค็น และสไตล์จากแผ่นสไตล์พื้นฐานเพื่อใช้ในการกำหนดค่าการจัดสไตล์ที่กำหนดเองของคุณ.

เมื่อคุณมีแผ่นออกแบบแล้ว คุณสามารถตั้งค่าตัวอย่าง คอนเทนเนอร์บนหน้าจอ เพื่อใช้กับตัวแก้ไขสไตล์ หรือ คอนเทนเนอร์ในเกม หากต้องการ.

1. ชี้ไปที่ StarterGui ใน Explorer และแทรก ScreenGui.

2. ยืนยันว่าอินสแตนซ์ StyleLink ใหม่ปรากฏอยู่ใต้ ScreenGui โดยที่คุณสมบัติ StyleSheet ถูกตั้งค่าเป็นแผ่นออกแบบ StyleSheet.

   

   

   หาก StyleLink ไม่ถูกสร้างขึ้น คุณสามารถสร้างได้อย่างรวดเร็วโดยการเลือก ScreenGui ใน Explorer รวมถึงแผ่นออกแบบ StyleSheet ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์. จากนั้นคลิกปุ่ม แทรก StyleLink ในส่วนด้านขวาบนของแผงหลักของตัวแก้ไข.

กฎสไตล์

กฎ สไตล์ จะใช้กับทุกอินสแตนซ์ที่ตรงกับการกำหนด Selector ของกฎเพื่อจับคู่ลักษณะต่าง ๆ เช่น ชื่อคลาส แท็กอินสแตนซ์ และความสัมพันธ์ในลำดับชั้น. ในระดับสูง การจับคู่และการแก้ไขอินสแตนซ์ผ่านการกำหนด Selector ของกฎจะทำงานผ่าน:

• ตัวเลือก คลาส ของ Roblox ที่มุ่งเป้าไปที่อินสแตนซ์ทั้งหมดของคลาส UI ที่กำหนด เช่น Frame, ImageLabel, TextButton, เป็นต้น.
• ตัวเลือก แท็ก ที่มุ่งเป้าไปที่วัตถุ UI เฉพาะที่ ถูกแท็ก ผ่าน CollectionService.
• ตัวเลือก ตัวแก้ไข ที่ใช้ผ่าน UIComponents เช่น UICorner หรือ UIStroke.
• ตัวเลือก สถานะ ของ GuiObject ที่สอดคล้องกับหนึ่งในสี่ค่าของ Enum.GuiState เช่น Hover.
• การเลือกชื่ออินสแตนซ์ตามค่าของ Instance.Name ของวัตถุ UI.

กฎคลาส

ตัวเลือก คลาส ของสไตล์จะมุ่งเป้าไปที่อินสแตนซ์ทั้งหมดของคลาส UI ที่กำหนด. การตั้งค่ากฎต่อไปนี้จะจัดสไตล์ Frames ทั้งหมดด้วยสีพื้นหลังและขนาดที่สม่ำเสมอ.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้เลือก Frame ในสาขา UI Elements.

   

2. เชื่อมโยงโทเค็น สไตล์ ที่สร้างขึ้นก่อนหน้านี้สองตัวกับคุณสมบัติ Frame สองตัว:

   คุณสมบัติ	โทเค็นสไตล์
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. คลิก เพิ่มคุณสมบัติ… ในแผงหลักและเลือกคุณสมบัติที่จำเป็น. โปรดทราบว่าคุณสามารถพิมพ์คำสำคัญเพื่อค้นหาคุณสมบัติในเมนูแบบเลื่อนลงได้อย่างรวดเร็ว.
   2. แทนที่จะป้อนค่าแบบคงที่ ให้คลิกปุ่ม ⋮ และเลือก เชื่อมโยง โทเค็น.
   3. คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็นที่เกี่ยวข้อง.

   

   

3. แทรก Frame ใหม่ลงใน ScreenGui ที่คุณ สร้างและเชื่อมโยง ไว้ก่อนหน้านี้. สไตล์ที่คุณกำหนดควรจะถูกนำไปใช้โดยอัตโนมัติ.

   

กฎแท็ก

ตัวเลือก แท็ก ของอินสแตนซ์จะมุ่งเป้าไปที่วัตถุ UI เฉพาะที่ ถูกแท็ก ผ่าน CollectionService. การตั้งค่ากฎต่อไปนี้จะจัดสไตล์ TextButton ที่ถูกแท็กว่า ButtonPrimary ด้วยสีพื้นหลังที่กำหนดเอง ฟอนต์ และขนาดข้อความ.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้ชี้ไปที่แผ่น StyleSheet, คลิกปุ่ม ⋮, และนำทางไปที่ ใหม่ ⟩ แท็ก.

   

2. เปลี่ยนชื่อกฎแท็กใหม่เป็น .ButtonPrimary (โปรดสังเกตจุดนำหน้า .).

   

3. เชื่อมโยงโทเค็น สไตล์ ที่สร้างขึ้นก่อนหน้านี้สามตัวกับคุณสมบัติ TextButton สามตัว:

   คุณสมบัติ	โทเค็นสไตล์
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. คลิก เพิ่มคุณสมบัติ… ในแผงหลักและเลือกคุณสมบัติที่จำเป็น. โปรดจำไว้ว่าคุณสามารถพิมพ์คำสำคัญเพื่อค้นหาคุณสมบัติในเมนูแบบเลื่อนลงได้อย่างรวดเร็ว.
   2. แทนที่จะป้อนค่าแบบคงที่ ให้คลิกปุ่ม ⋮ และเลือก เชื่อมโยง โทเค็น.
   3. คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็นที่เกี่ยวข้อง.

   

   

4. แทรก TextButton ใหม่ลงใน ScreenGui ที่คุณ สร้างและเชื่อมโยง ไว้ก่อนหน้านี้และ แท็ก มันว่า ButtonPrimary. ทางลัดที่สะดวกมีดังนี้:

   1. ตรวจสอบให้แน่ใจว่า TextButton ใหม่ถูกเลือกใน Explorer.
   2. เมื่อเลือกกฎแท็ก .ButtonPrimary ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้คลิก ใช้แท็ก ในแผงหลัก. สไตล์ที่คุณกำหนดควรจะถูกนำไปใช้โดยอัตโนมัติ.

   

   

ตัวแก้ไข UI

ตัวเลือกตัวแก้ไขอินสแตนซ์จะใช้ UIComponents เช่น UICorner หรือ UIStroke เพื่อจัดสไตล์วัตถุเพิ่มเติม. การตั้งค่ากฎต่อไปนี้จะจัดสไตล์ TextLabel ด้วยขนาดข้อความที่กำหนดเองและมุมที่โค้งมน.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้เลือก TextLabel ในสาขา UI Elements.

   

2. เชื่อมโยงโทเค็น สไตล์ ที่สร้างขึ้นก่อนหน้านี้กับคุณสมบัติ TextSize:

   1. คลิก เพิ่มคุณสมบัติ… ในแผงหลักและเลือกคุณสมบัติ TextSize. โปรดจำไว้ว่าคุณสามารถพิมพ์คำสำคัญเพื่อค้นหาคุณสมบัติในเมนูแบบเลื่อนลงได้อย่างรวดเร็ว.
   2. แทนที่จะป้อนค่าแบบคงที่ ให้คลิกปุ่ม ⋮ และเลือก เชื่อมโยง โทเค็น.
   3. คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็น $Text32.

   

   

จำเป็นต้องมี อินสแตนซ์จำลอง เพื่อกำหนดค่าและใช้มุมโค้งให้กับองค์ประกอบอื่น ๆ. เพื่อสร้างหนึ่ง:

1. ในคอลัมน์ด้านซ้าย ให้ชี้ไปที่ TextLabel, คลิกปุ่ม ⋮, และนำทางไปที่ ใหม่ ⟩ อินสแตนซ์จำลอง ⟩ UICorner.

   

   อินสแตนซ์จำลอง UICorner ใหม่จะปรากฏอยู่ใต้ TextLabel ในคอลัมน์ด้านซ้าย.

   

2. เมื่อเลือกอินสแตนซ์ UICorner ใหม่ในคอลัมน์ด้านซ้าย ให้เชื่อมโยงโทเค็น สไตล์ ที่สร้างขึ้นก่อนหน้านี้กับคุณสมบัติ CornerRadius:

   1. คลิก เพิ่มคุณสมบัติ… ในแผงหลักและเลือกคุณสมบัติ CornerRadius.
   2. แทนที่จะป้อนค่าแบบคงที่ ให้คลิกปุ่ม ⋮ และเลือก เชื่อมโยง โทเค็น.
   3. คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็น $Rad20.

   

3. แทรก TextLabel ใหม่ลงใน ScreenGui ที่คุณ สร้างและเชื่อมโยง ไว้ก่อนหน้านี้. สไตล์ที่คุณกำหนดควรจะถูกนำไปใช้โดยอัตโนมัติ.

   

กฎสถานะ

ตัวเลือก สถานะ ของ GuiObject จะสอดคล้องกับหนึ่งในสี่ค่าของ GuiState เช่น Hover, ช่วยให้คุณกำหนดการเปลี่ยนแปลงสไตล์สำหรับสถานะที่โต้ตอบได้โดยอัตโนมัติ. การตั้งค่ากฎต่อไปนี้สร้างสถานะ hover ที่มีการหมุน -4 องศาสำหรับ ImageButtons ทั้งหมด.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้เลือก ImageButton ในสาขา UI Elements.

   

2. คลิกปุ่ม ⋮ และนำทางไปที่ ใหม่ ⟩ GuiState ⟩ Hover.

   

   อินสแตนซ์ตัวแก้ไขสถานะ Hover ใหม่จะปรากฏอยู่ใต้ ImageButton ในคอลัมน์ด้านซ้าย.

   

3. เมื่อเลือกตัวแก้ไข Hover ใหม่ในคอลัมน์ด้านซ้าย ให้คลิก เพิ่มคุณสมบัติ… ในแผงหลักและเลือก Rotation. โปรดจำไว้ว่าคุณสามารถพิมพ์คำสำคัญเพื่อค้นหาคุณสมบัติในเมนูแบบเลื่อนลงได้อย่างรวดเร็ว.

4. ป้อน -4 ในฟิลด์ค่าของคุณสมบัติ.

   

5. แทรก ImageButton ใหม่ลงใน ScreenGui ที่คุณ สร้างและเชื่อมโยง ไว้ก่อนหน้านี้. เมื่อคุณชี้ไปที่ปุ่มในมุมมอง มันควรหมุน 4 องศาทวนเข็มนาฬิกา.

   

คำถามสไตล์

คำถาม สไตล์, คล้ายกับ คำถามของ CSS container และ media, ช่วยให้คุณสามารถใช้ตรรกะเงื่อนไขกับ UI ของคุณตามขนาดของคอนเทนเนอร์ ประเภทการป้อนข้อมูล หรือปัจจัยอื่น ๆ. ตัวแก้ไขสไตล์ให้กระบวนการทำงานที่ราบรื่นในการสร้างทั้งตรรกะคำถาม (เงื่อนไข) และสไตล์ที่เกิดขึ้นเป็นชุดที่รวมกัน.

คำถามที่มีอยู่ในตัว

เงื่อนไข StyleQuery บางอย่างเป็นที่นิยมมาก เช่น การเปลี่ยนคุณสมบัติตาม ViewportDisplaySize. เพื่อทำให้สิ่งนี้ง่ายขึ้น ตัวแก้ไขสไตล์รวมถึง คำถามที่มีอยู่ในตัว ซึ่งช่วยให้คุณสร้างกฎเงื่อนไขโดยไม่ต้องมีอินสแตนซ์จำลองหรือจริงของ StyleQuery; แทนที่จะใช้กฎคำถามด้วยตัวเลือกที่กำหนดไว้ล่วงหน้าเช่น ViewportDisplaySizeSmall.

ขั้นตอนต่อไปนี้แสดงวิธีการสร้างคำถามที่มีอยู่ในตัวสำหรับ TextLabel เพื่อจัดการกับขนาดมุมมอง Small, Medium, และ Large.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้ชี้ไปที่ TextLabel, คลิกปุ่ม ⋮, และนำทางไปที่ ใหม่ ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.

   

   สิ่งนี้สร้างโฟลเดอร์ Queries ภายใต้กฎ TextLabel ที่มีสามกฎคำถาม:

   • @ViewportDisplaySizeLarge — กำหนดคุณสมบัติที่ใช้เมื่อมุมมองเป็น Large.
   • @ViewportDisplaySizeMedium — กำหนดคุณสมบัติที่ใช้เมื่อมุมมองเป็น Medium.
   • @ViewportDisplaySizeSmall — กำหนดคุณสมบัติที่ใช้เมื่อมุมมองเป็น Small.

   

2. คลิก เพิ่มคุณสมบัติ… ใต้กฎคำถามแต่ละกฎและตั้งค่าค่าข้อความ Text ที่ควรแสดงเมื่อคำถามนั้นใช้งานอยู่:

   กฎคำถาม	คุณสมบัติ	ค่า
   @ViewportDisplaySizeLarge	Text	Large Text
   @ViewportDisplaySizeMedium	Text	Medium Text
   @ViewportDisplaySizeSmall	Text	Small Text

3. เพื่อยืนยันคำถาม ใช้ Device Emulator เพื่อตรวจสอบว่า UI ตอบสนองต่อความละเอียดที่แตกต่างกันอย่างไรในสามอุปกรณ์ที่แตกต่างกัน:

   1. แทรก TextLabel ใหม่ลงใน ScreenGui.

   2. เปลี่ยน อุปกรณ์ ใน Device Emulator เพื่อดูข้อความเปลี่ยนแปลงแบบเรียลไทม์.

      ขนาด	การจำลองตัวอย่าง
      Large	PS5, PS4, Xbox One
      Medium	Average Laptop, HD 720
      Small	iPhone XR, iPad 7th Generation

คำถามที่กำหนดเอง

คุณสามารถเพิ่มคำถามสไตล์ไปยังกฎที่มีอยู่เพื่อสร้าง UI ที่ตอบสนองซึ่งปรับให้เข้ากับคอนเทนเนอร์ของมัน. การตั้งค่าต่อไปนี้กำหนดค่า TextLabel ให้เปลี่ยนลักษณะโดยอัตโนมัติเมื่อขยายไปยังความกว้าง 400 พิกเซลหรือมากกว่า.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้ชี้ไปที่ TextLabel, คลิกปุ่ม ⋮, และนำทางไปที่ ใหม่ ⟩ StyleQuery ⟩ Custom.

   

   การกระทำนี้สร้างโฟลเดอร์ Queries ภายใต้กฎ TextLabel ที่มีสองรายการที่เชื่อมโยง:

   • ::StyleQuery กฎอินสแตนซ์จำลองที่คุณกำหนด เงื่อนไข.
   • @StyleQuery กฎที่คุณกำหนด คุณสมบัติ ที่จะใช้เมื่อเงื่อนไขเหล่านั้นเป็นจริง.

   

2. เลือกกฎ TextLabel หลักในแผงหลักและกำหนดคุณสมบัติเริ่มต้นต่อไปนี้:

   คุณสมบัติ	ค่า
   BackgroundColor3	$Magenta
   Text	Default Text

3. เลือกกฎ ::StyleQuery ในแผงหลัก คลิก เพิ่มเงื่อนไข…, และกำหนดค่าต่อไปนี้:

   เงื่อนไข	ค่า
   MinSize	400, 0

   ดู StyleQuery.IsActive เป็นข้อมูลอ้างอิงสำหรับเงื่อนไขอื่น ๆ ที่มีอยู่ผ่านกฎ ::StyleQuery.

4. เลือกกฎ @StyleQuery ในแผงหลักและตั้งค่าคุณสมบัติที่ควรใช้เมื่อคำถามนั้นใช้งานอยู่:

   คุณสมบัติ	ค่า
   BackgroundColor3	$Gold
   Text	Large Text

เพื่อยืนยันคำถาม คุณสามารถปรับขนาด TextLabel ด้วยตนเองในมุมมอง.

1. แทรก TextLabel ใหม่ลงใน ScreenGui.

2. ปรับความกว้างของมันเพื่อดูการสลับสไตล์แบบเรียลไทม์.

   ความกว้าง 0–400 พิกเซลความกว้างมากกว่า 400 พิกเซล

   ขณะที่ความกว้างของ TextLabel เล็กกว่า เงื่อนไข MinSize จะไม่ถูกตอบสนองและป้ายจะใช้สีพื้นหลังและข้อความเริ่มต้น.

   

การเปลี่ยนสไตล์

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

ค่าเริ่มต้น

เพื่อเปลี่ยนหลายคุณสมบัติ UI ด้วยพารามิเตอร์เดียวกัน คุณสามารถตั้งค่าการเปลี่ยนแปลงเริ่มต้นที่ใช้กับ ทุก คุณสมบัติ เว้นแต่จะมีการตั้งค่าการเปลี่ยนแปลงอื่น ๆ สำหรับคุณสมบัติที่เฉพาะเจาะจง.

1. เลือก TextButton ในสาขา UI Elements และจากนั้นในแผงหลัก ให้เพิ่มคุณสมบัติใหม่สามตัวด้วยค่าต่อไปนี้:

   คุณสมบัติ	ค่า
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. ชี้ไปที่แถว TextButton หลัก คลิกปุ่ม ⋮ และนำทางไปที่ แทรก ⟩ การเปลี่ยนแปลง.

   

   การเปลี่ยนแปลงเริ่มต้นของ 1, Quad, Out, 0 จะถูกแทรกโดยตรงใต้กฎ TextButton ซึ่งบ่งบอกถึงการเปลี่ยนแปลง 1 วินาที, สไตล์การผ่อนคลาย Quad, ทิศทางการผ่อนคลาย Out, และไม่มีการหน่วงเวลา.

   

3. ชี้ไปที่แถว TextButton หลัก คลิกปุ่ม ⋮ และนำทางไปที่ ใหม่ ⟩ GuiState ⟩ Hover.

   

4. สำหรับตัวแก้ไข Hover ใหม่ ให้เพิ่มคุณสมบัติใหม่สองตัวเป็น เป้าหมาย สำหรับสถานะ hover.

   คุณสมบัติ	ค่า
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. แทรก TextButton ใหม่ลงใน ScreenGui ที่คุณ สร้างและเชื่อมโยง ไว้ก่อนหน้านี้. เมื่อคุณชี้ไปที่ปุ่มในมุมมอง มันควรจะสว่างขึ้นและหมุน 5 องศาทวนเข็มนาฬิกา.

   

การเชื่อมโยงโทเค็น

เพื่อใช้พฤติกรรมการเปลี่ยนแปลงซ้ำในหลายกฎ คุณสามารถกำหนด โทเค็น ที่แทนประเภทข้อมูล TweenInfo. การตั้งค่ากฎต่อไปนี้สร้างสถานะ hover เพื่อเปลี่ยน TextButtons ทั้งหมดไปยัง/จากการหมุน -5 องศาและสีพื้นหลังที่สว่างขึ้น.

1. หากคุณยังไม่ได้สร้างแผ่น โทเค็น ชื่อ TokenSheet.

   

2. เมื่อเลือกแผ่นโทเค็นใหม่ ให้สร้างโทเค็นใหม่สองตัวโดยคลิก เพิ่มโทเค็น… ในแผงหลัก.

   ชื่อโทเค็น	ประเภท	พารามิเตอร์การเปลี่ยนแปลง
   CubicOut	TweenInfo	Duration = 1.25 EasingStyle = Cubic EasingDirection = Out Delay = 0
   QuadInOut	TweenInfo	Duration = 0.5 EasingStyle = Quad EasingDirection = InOut Delay = 0

   

3. เลือก TextButton ในสาขา UI Elements และจากนั้นในแผงหลัก ให้เพิ่มคุณสมบัติใหม่สามตัวด้วยค่าต่อไปนี้:

   คุณสมบัติ	ค่า
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. สำหรับคุณสมบัติใหม่แต่ละตัว ยกเว้น AutoButtonColor, ชี้ไปที่แถวของมัน คลิกปุ่ม ⋮ และเลือก แทรก ⟩ การเปลี่ยนแปลง.

   

5. ชี้ไปที่แถว การเปลี่ยนแปลง ใหม่ใต้แต่ละคุณสมบัติ คลิกปุ่ม ⋮ และเลือก เชื่อมโยง โทเค็น. จากนั้น แทนที่จะป้อนค่าแบบคงที่ ให้คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็นการเปลี่ยนแปลงที่เหมาะสม.

   

   การเปลี่ยนแปลงคุณสมบัติ	โทเค็นการเปลี่ยนแปลง
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. ชี้ไปที่แถว TextButton หลัก คลิกปุ่ม ⋮ และนำทางไปที่ ใหม่ ⟩ GuiState ⟩ Hover.

   

7. สำหรับตัวแก้ไข Hover ใหม่ ให้เพิ่มคุณสมบัติใหม่สองตัวเป็น เป้าหมาย สำหรับสถานะ hover.

   คุณสมบัติ	ค่า
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. แทรก TextButton ใหม่ลงใน ScreenGui ที่คุณ สร้างและเชื่อมโยง ไว้ก่อนหน้านี้. เมื่อคุณชี้ไปที่ปุ่มในมุมมอง มันควรจะสว่างขึ้นและหมุน 5 องศาทวนเข็มนาฬิกา.

   

ธีมสไตล์

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

การสร้างธีม

เพื่อความสามารถในการขยาย ธีมจะถูกจัดระเบียบในโฟลเดอร์. ในขณะที่โฟลเดอร์เดียวอาจเพียงพอสำหรับวัตถุประสงค์ส่วนใหญ่ คุณสามารถจัดระเบียบธีมในโฟลเดอร์เช่น "สี" หรือ "ฟอนต์" หากต้องการ.

1. สร้างโฟลเดอร์ธีมใหม่:

   1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้ชี้ไปที่ ธีม, คลิก ⊕, และเลือก ธีมใหม่.
   2. เปลี่ยนชื่อรายการ โฟลเดอร์ ใหม่เป็น ทั่วไป.

   

2. สร้างแผ่นสไตล์ธีมใหม่:

   1. ชี้ไปที่โฟลเดอร์ ทั่วไป ใหม่ คลิกปุ่ม ⋮, และเลือก แผ่นธีมใหม่.
   2. เปลี่ยนชื่อเป็น ThemeA.

   

โทเค็นธีม

เมื่อธีมถูกสร้างขึ้นแล้ว คุณสามารถเชื่อมโยงโทเค็นของมันกับคุณสมบัติวัตถุ UI ต่าง ๆ เช่น BackgroundColor3 ของ TextButton. แผ่นธีมต้องใช้ชุดโทเค็นทั่วไปเพื่อทำงานอย่างถูกต้อง.

เมื่อเลือก ThemeA ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์:

1. เชื่อมโยงโทเค็น สไตล์ ที่สร้างขึ้นก่อนหน้านี้สามตัวกับโทเค็นธีมใหม่สามตัว:

   โทเค็นธีม	โทเค็นสไตล์
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. คลิก เพิ่มโทเค็น… ในแผงหลักและป้อนชื่อโทเค็นธีม.
   2. คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็นสไตล์ที่เกี่ยวข้อง.

   

2. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้เลือก TextButton ในสาขา UI Elements.

   

3. เชื่อมโยงโทเค็นของธีมกับคุณสมบัติ TextButton ใหม่สามตัว:

   คุณสมบัติ	โทเค็นธีม
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. คลิก เพิ่มคุณสมบัติ… ในแผงหลักและเลือกคุณสมบัติที่จำเป็น.
   2. แทนที่จะป้อนค่าแบบคงที่ ให้คลิกปุ่ม ⋮ และเลือก เชื่อมโยง โทเค็น.
   3. คลิก $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็นธีมที่เหมาะสม.

   

   เมื่อเชื่อมโยงโทเค็นของธีม ให้มองหาคำว่า $[Token] in ThemeA ในการชี้เพื่อให้แน่ใจว่าโทเค็นมาจาก ธีม และไม่ใช่จากแผ่นโทเค็นทั่วโลก (โปรดจำไว้ว่าธีมจะสืบทอดโทเค็นทั่วโลกอยู่แล้ว).

   

การทำสำเนาธีม

เมื่อคุณมีธีมที่จัดตั้งขึ้นทั่วไปแล้ว คุณสามารถ ทำสำเนา และเปลี่ยนโทเค็นต่าง ๆ เพื่อกำหนดสไตล์ธีมที่ไม่ซ้ำกัน.

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้ชี้ไปที่ธีม ThemeA, คลิกปุ่ม ⋮, และเลือก ทำสำเนา.

2. เปลี่ยนชื่อธีมที่ทำสำเนาเป็น ThemeB.

   

3. เชื่อมโยงโทเค็นของธีมสองตัวกับโทเค็นสไตล์ที่แตกต่างกันสองตัว:

   โทเค็นธีม	โทเค็นสไตล์
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. ทางด้านขวาของฟิลด์ค่าของคุณสมบัติ ให้คลิกปุ่ม ⋮ และเลือก ยกเลิกการเชื่อมโยง โทเค็น.
   2. คลิก ⋮ อีกครั้งและเลือก เชื่อมโยงโทเค็น.
   3. ในฟิลด์ค่าของมัน ให้คลิก $ และเลือกโทเค็นสไตล์ที่เกี่ยวข้องใหม่.

   

การสลับธีม

เมื่อคุณมี ธีมหลายธีม คุณสามารถสลับระหว่างธีมได้ผ่านโฟลเดอร์ธีม หรือผ่านสคริปต์ตามที่อธิบายไว้ใน SetDerives().

1. ในคอลัมน์ด้านซ้ายของตัวแก้ไขสไตล์ ให้เลือกโฟลเดอร์ ทั่วไป ในสาขา ธีม.

2. ในแผงหลัก ให้สลับระหว่างธีมโดยใช้ปุ่มวิทยุ.

   ThemeAThemeB