ตัวปรับลักษณะ 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 อินสแตนซ์ที่มี ZIndex ต่ำกว่าจะเรนเดอร์อยู่ด้านล่าง (ด้านหลัง) อินสแตนซ์ที่มี 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 จะขยายหรือหดเงาไปยังขนาดของพ่อแม่