ตัวปรับเปลี่ยนลักษณะ UI

การใช้ ตัวปรับเปลี่ยนลักษณะ จะทำให้คุณสามารถปรับแต่งลักษณะของ GuiObjects ได้มากยิ่งขึ้น

• ใช้ กราเดียนต์ กับพื้นหลังของวัตถุ
• ใช้ เส้นขอบ กับข้อความหรือขอบ
• ตั้ง มุมโค้ง สำหรับวัตถุ
• เพิ่ม ช่องว่าง ระหว่างขอบของวัตถุ
• เพิ่ม เงา ที่ด้านหลังของวัตถุ

กราเดียนต์

วัตถุ UIGradient จะใช้สีและการทำให้โปร่งใสในการสร้างกราเดียนต์กับวัตถุพ่อของมัน GuiObject

คุณสามารถตั้งค่ากราเดียนต์ได้โดย:

• ตั้ง สี ผ่าน ColorSequence ในคุณสมบัติ Color ของกราเดียนต์
• ตั้ง ความโปร่งใส ผ่าน NumberSequence ในคุณสมบัติ Transparency ของกราเดียนต์
• เลือกจุดเริ่มต้นของกราเดียนต์ (อยู่ภายในหรือนอกขอบของพ่อ) ผ่านคุณสมบัติ Offset
• เลือกมุมของกราเดียนต์ผ่านคุณสมบัติ Rotation

ลำดับสี

ในการตั้งค่าลำดับสีของกราเดียนต์:

1. ในหน้าต่าง Explorer เลือก UIGradient

2. ในหน้าต่าง Properties คลิกภายในช่องคุณสมบัติ Color แล้วคลิกที่ปุ่ม ⋯ ที่อยู่ขวาของกล่องป้อนข้อมูล หน้าต่างป๊อปอัพลำดับสีปรากฏขึ้น

   

   แต่ละสามเหลี่ยมในแกนด้านล่างของลำดับสีคือ จุดสำคัญ ที่กำหนดค่าสีในจุดนั้น

   

3. คลิกจุดสำคัญในลำดับสี แล้วคลิกที่สี่เหลี่ยมเล็ก ๆ ถัดจาก Color เพื่อเปิดหน้าต่างป๊อปอัพ Colors

4. เลือกสีที่ต้องการสำหรับจุดสำคัญนั้น

   

5. หากจำเป็น คุณสามารถ:

   • เพิ่มจุดสำคัญอีกจุดโดยการคลิกที่ใดที่หนึ่งบนกราฟ
   • ลากจุดสำคัญที่มีอยู่ไปยังตำแหน่งใหม่ หรือเลือกจุดสำคัญและป้อนค่าตำแหน่งเวลาผ่านช่อง Time
   • ลบจุดสำคัญโดยเลือกมันแล้วคลิกที่ปุ่ม Delete
   • รีเซ็ตลำดับโดยคลิกที่ปุ่ม Reset

ความโปร่งใส

ในการปรับความโปร่งใสของกราเดียนต์ในทุกช่วง:

1. ในหน้าต่าง Explorer เลือก UIGradient

2. ในหน้าต่าง Properties คลิกภายในช่องคุณสมบัติ Transparency แล้วคลิกที่ปุ่ม ⋯ ที่อยู่ขวาของกล่องป้อนข้อมูล หน้าต่างป๊อปอัพลำดับหมายเลขปรากฏขึ้น

   

   แต่ละสี่เหลี่ยมในกราฟลำดับหมายเลขคือ จุดสำคัญ ที่กำหนดค่าความโปร่งใสในจุดนั้น

   

3. คลิกและลากจุดสำคัญใด ๆ รอบ ๆ หรือเลือกจุดสำคัญและป้อนค่าความสัมพันธ์เวลาค่าผ่านช่อง Time และ Value

   

4. หากจำเป็น คุณสามารถ:

   • เพิ่มจุดสำคัญอีกจุดโดยการคลิกที่ใดที่หนึ่งบนกราฟ
   • ลบจุดสำคัญโดยเลือกมันและคลิกที่ปุ่ม Delete
   • รีเซ็ตลำดับโดยคลิกที่ปุ่ม Reset

การเลื่อนและการหมุน

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

ในทำนองเดียวกัน เมื่อคุณหมุนกราเดียนต์ จุดควบคุมจะหมุนตาม:

เส้นขอบ

อินสแตนซ์ของ UIStroke ใช้เพื่อสร้างเส้นขอบรอบข้อความหรือขอบ คุณสมบัติหลักได้แก่:

• ปรับ สี และ ความหนา ของเส้นขอบ
• สามารถตั้งค่าความ โปร่งใส ของเส้นขอบแยกจากความโปร่งใสของพ่อ
• ปรับ ตำแหน่งและ/หรือลักษณะเด่น ตามขอบของพ่อ
• สามารถเลือก สไตล์มุม สามแบบ (กลม, มุมเฉียง, หรือมุมแหลม)
• รองรับ กราเดียนต์ ของเส้นขอบผ่านอินสแตนซ์ UIGradient

ความหนา

คุณสามารถตั้งค่าความกว้างของเส้นขอบผ่านคุณสมบัติ Thickness ที่วัดเป็นพิกเซล (ค่าเริ่มต้น) หรือปรับสเกลโดยสัมพันธ์กับพ่อ ขึ้นอยู่กับ StrokeSizingMode ของตัวปรับเปลี่ยน หากเส้นขอบอยู่บนข้อความและ StrokeSizingMode ถูกตั้งค่าเป็น ScaledSize ความหนาจะสัมพันธ์กับขนาดของฟอนต์

สีหรือกราเดียนต์

คุณสามารถตั้งค่าสีของเส้นขอบผ่านคุณสมบัติ Color รวมถึงการแทรกอินสแตนซ์ UIGradient เป็นลูกเพื่อสร้างเส้นขอบที่เป็นกราเดียนต์

เส้นขอบข้อความหรือขอบ

ขึ้นอยู่กับประเภทของพ่อ UIStroke จะทำงานเป็น เส้นขอบข้อความ หรือเป็น เส้นขอบ เมื่อคุณเชื่อม UIStroke กับวัตถุข้อความเช่น TextLabel จะใช้กับเส้นขอบของข้อความ; เมื่อคุณเชื่อม UIStroke กับวัตถุ GuiObjects อื่น ๆ จะใช้กับขอบ

เมื่อนำไปใช้กับวัตถุข้อความ คุณสามารถเปลี่ยนพฤติกรรมเส้นขอบเริ่มต้นด้วยคุณสมบัติ ApplyStrokeMode ทำให้คุณสามารถใช้เส้นขอบกับขอบของวัตถุแทนที่จะเป็นข้อความ คุณสามารถควบคุมเส้นขอบข้อความและขอบได้โดยการเชื่อมโยงสองอินสแตนซ์ของ UIStroke กับวัตถุข้อความ โดยหนึ่งในนั้นตั้งค่าเป็น Contextual และอีกหนึ่งตั้งค่าเป็น Border

ตำแหน่ง/ลักษณะเด่นของเส้นขอบ

BorderStrokePosition กำหนดตำแหน่งของเส้นขอบสัมพันธ์กับขอบของพ่อและ BorderOffset ทำให้คุณสามารถกำหนดค่าลักษณะเด่นเพิ่มเติมสำหรับตำแหน่งของเส้นขอบ

ความโปร่งใส

คุณสมบัติ Transparency จะตั้งค่าความโปร่งใสของเส้นขอบแยกจากคุณสมบัติ BackgroundTransparency ของวัตถุพ่อหรือ TextTransparency ซึ่งอนุญาตให้คุณสร้างข้อความและขอบที่ "โปร่ง" (ประกอบด้วยเส้นขอบเพียงอย่างเดียว)

สไตล์มุม

คุณสมบัติ LineJoinMode จะให้คุณควบคุมวิธีการตีความมุม มันยอมรับค่าที่เป็น Round, Bevel, หรือ Miter

การจัดเรียงชั้น

ในการจัดชั้นหลาย ๆ อินสแตนซ์ของ UIStroke บน GuiObject จากหน้าไปหลัง คุณสามารถใช้คุณสมบัติ ZIndex ได้ โดยที่ค่าต่ำกว่าจะเรนเดอร์อยู่ใต้ (ด้านหลัง) ค่าที่สูงกว่า

โปรดทราบว่าลำดับการเรนเดอร์สำหรับอินสแตนซ์ UIStroke ที่มีค่า ZIndex เท่ากันนั้นไม่แน่นอน อย่าทำการใช้หลายอินสแตนซ์ของ UIStroke ที่มีดัชนีเดียวกันหากลำดับการเรนเดอร์มีความสำคัญ

มุม

อินสแตนซ์ของ UICorner ใช้ในการปรับรูปทรงมุมของพ่อ GuiObject คุณสามารถควบคุมรัศมีที่ถูกนำไปใช้ผ่านคุณสมบัติ CornerRadius โดยใช้ Scale หรือ Offset

Scale จะทำให้มุมโค้งเป็น เปอร์เซ็นต์ โดยอิงจากความยาวทั้งหมดของ ด้านที่สั้นที่สุด ของพ่อ ซึ่งหมายความว่า หากสเกลอยู่ที่ 0.5 หรือสูงกว่านั้น จะทำให้พ่อมีรูปร่างเป็น "เม็ดแป้ง" โดยไม่คำนึงถึงความกว้างหรือความสูงของมัน Offset จะทำให้มุมโค้งเป็นจำนวน พิกเซล ที่เฉพาะเจาะจง โดยไม่คำนึงถึงความกว้าง/ความสูงของพ่อ

คุณยังสามารถควบคุม มุมเดียว ผ่านคุณสมบัติ TopLeftRadius, TopRightRadius, BottomRightRadius, และ BottomLeftRadius

ช่องว่าง

วัตถุ UIPadding จะพัฒนาช่องว่างด้านบน ด้านล่าง ซ้าย และ/หรือ ขวา ให้กับเนื้อหาของพ่อ GuiObject ตัวอย่างเช่น คุณสามารถเคลื่อนข้อความภายในป้ายข้อความไปด้านล่างหรือด้านบนโดยการเพิ่มการเลื่อนให้กับคุณสมบัติ PaddingBottom ของตัวปรับเปลี่ยน

เงา

วัตถุ UIShadow จะเรนเดอร์เงาที่ด้านหลังของอินสแตนซ์ UI ของพ่อ ฟีเจอร์หลักได้แก่:

• ปรับ ความเบลอ ของเงา
• ปรับ สีและความโปร่งใส ของเงา
• ปรับ การเลื่อนและการกระจาย ของเงา
• หากพ่อถูกหมุนด้วย GuiObject.Rotation เงาก็จะถูกหมุนด้วย
• หากพ่อมี มุมโค้ง เงาก็จะมีมุมโค้งเช่นกัน

ความเบลอ

คุณสมบัติ BlurRadius จะกำหนดความเบลอของเงา ค่าที่สูงกว่าจะทำให้ขอบของเงาดูอ่อนตัวมากขึ้น โปรดทราบว่าปัจจัย สเกล ของคุณสมบัติ UDim นี้สัมพันธ์กับความกว้างหรือความสูงของพ่อ ซึ่งมักจะสั้นที่สุด

สีและความโปร่งใส

คุณสมบัติ Color จะกำหนดสีของเงา ขณะที่ Transparency จะตั้งค่าความโปร่งใสของเงา โดยที่ 0 หมายถึงโปร่งเต็มที่และ 1 หมายถึงโปร่งใสเต็มที่

การเลื่อนและการกระจาย

คุณสมบัติ Offset จะเลื่อนเงาให้สัมพันธ์กับตำแหน่งของพ่อ ขณะที่ Spread จะขยายหรือหดเงาสัมพันธ์กับขนาดของพ่อ