เครื่องมือจัดการสไตล์

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

เข้าถึง เครื่องมือจัดการสไตล์ ผ่านแท็บ UI.

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

โทเค็นสไตล์

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

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

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

   

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

   

   ชื่อโทเค็น	ประเภท	ค่า
   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 ถูกสร้างผ่านปุ่ม Create Design. ประกอบไปด้วยกฎหมวดหมู่สำหรับวัตถุ UI ทั่วไปอย่างเช่น Frame และ TextLabel. นอกจากนี้ยังมีสองอินสแตนซ์ StyleDerive ที่มีการถ่ายทอด (สืบทอด) โทเค็น และสไตล์จากแผ่นสไตล์พื้นฐานเพื่อใช้ในการตั้งค่าการจัดสไตล์ของคุณเอง.

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

1. เรียกดู StarterGui ใน Explorer และแทรก ScreenGui.

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

   

   

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

กฎสไตล์

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

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

กฎคลาส

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

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

   

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

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

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

   

   

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

   

กฎแท็ก

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

1. ในคอลัมน์ซ้ายของเครื่องมือจัดการสไตล์ ให้ชี้ไปที่ชีท StyleSheet, คลิกที่ปุ่ม ⋮, และไปที่ New ⟩ Tag.

   

2. เปลี่ยนชื่อกฎแท็กใหม่เป็น .ButtonPrimary (โปรดทราบว่าเป็น . ที่นำหน้า).

   

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

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

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

   

   

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

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

   

   

ตัวแก้ไข UI

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

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

   

2. เชื่อมโยงโทเค็นสไตล์ที่สร้างไว้ก่อนหน้านี้ไปยัง TextSize:

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

   

   

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

1. ในคอลัมน์ซ้ายให้ชี้ไปที่ TextLabel, คลิกที่ปุ่ม ⋮, และไปที่ New ⟩ Pseudo Instance ⟩ UICorner.

   

   อินสแตนซ์ UICorner เสมือนได้ปรากฏอยู่ใต้ส่วน TextLabel ในคอลัมน์ซ้าย.

   

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

   1. คลิก Add a Property… ในแผงหลักและเลือก CornerRadius.
   2. แทนที่จะใส่ค่าแบบคงที่ คลิกที่ปุ่ม ⋮ และเลือก Link Token.
   3. คลิกที่ $ ที่ปรากฏในฟิลด์ค่าและเลือกโทเค็น $Rad20.

   

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

   

กฎ state

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

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

   

2. คลิกที่ปุ่ม ⋮ และไปที่ New ⟩ GuiState ⟩ Hover.

   

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

   

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

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

   

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

   

คำค้นสไตล์

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

คำค้นในตัว

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

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

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

   

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

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

   

2. คลิกที่ Add a Property… ภายใต้แต่ละกฎค้นหาและตั้งค่าข้อความสตริง Text ที่ควรแสดงเมื่อกฎค้นหานั้นใช้งาน:

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

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

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

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

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

คำค้นที่กำหนดเอง

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

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

   

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

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

   

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

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

3. เลือกกฎ ::StyleQuery ในแผงหลัก คลิก Add a Condition…, และกำหนดดังนี้:

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

   ดู StyleQuery.IsActive เป็นข้อมูลอ้างอิงการใช้งานเงื่อนไขอื่น ๆ ที่สามารถใช้ได้ผ่านกฎ ::StyleQuery.

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

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

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

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

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

   0–400 Pixel WidthOver 400 Pixel Width

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

   

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

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

ค่าเริ่มต้น

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

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

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

   

2. ชี้ที่แถว TextButton แม่คลิกที่ปุ่ม ⋮ และไปที่ Insert ⟩ Transition.

   

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

   

3. ชี้ที่แถว TextButton แม่ คลิกที่ปุ่ม ⋮ และไปที่ New ⟩ GuiState ⟩ Hover.

   

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

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

   

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

   

ลิงก์โทเค็น

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

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

   

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

   ชื่อโทเค็น	ประเภท	พารามิเตอร์ Tween
   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, ชี้ที่แถวของมัน คลิกที่ปุ่ม ⋮ และเลือก Insert ⟩ Transition.

   

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

   

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

   

6. ชี้ที่แถว TextButton แม่ คลิกที่ปุ่ม ⋮ และไปที่ New ⟩ GuiState ⟩ Hover.

   

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

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

   

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

   

ธีมสไตล์

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

การสร้างธีม

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

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

   1. ในคอลัมน์ซ้ายของเครื่องมือจัดการสไตล์ ให้ชี้ไปที่ Themes, คลิกที่ ⊕, และเลือก New Theme.
   2. เปลี่ยนชื่อรายการ Folder ใหม่ให้เป็น General.

   

2. สร้างชีทธีมใหม่:

   1. ชี้ไปที่โฟลเดอร์ General ใหม่ คลิกที่ปุ่ม ⋮ และเลือก New Theme StyleSheet.
   2. เปลี่ยนชื่อเป็น ThemeA.

   

โทเค็นธีม

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

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

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

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

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

   

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

   

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

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

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

   

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

   

การคัดลอกธีม

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

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

2. เปลี่ยนชื่อธีมที่คัดลอกเป็น ThemeB.

   

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

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

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

   

การสลับธีม

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

1. ในคอลัมน์ซ้ายของเครื่องมือจัดการสไตล์ ให้เลือกโฟลเดอร์ General ในสาขา Themes.

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

   ThemeAThemeB