ตัวปรับลักษณะการแสดงผล UI

โดยการใช้ ตัวปรับลักษณะการแสดงผล คุณสามารถปรับแต่งลักษณะของ GuiObjects ได้มากขึ้น

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

ไล่สี

วัตถุ UIGradient ใช้ไล่สีและความโปร่งใสกับ GuiObject ของมัน

คุณสามารถกำหนดค่าไล่สีได้โดย:

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

ลำดับสี

ในการตั้งลำดับสีของไล่สี:

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

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

   

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

   

   1. คลิกที่จุดสำคัญในลำดับสีเพื่อเลือกหรือปรับตำแหน่งมัน หรือเพิ่มจุดสำคัญอีกจุดโดยการคลิกที่ใดก็ได้บนกราฟ
   2. คลิกที่สี่เหลี่ยมเล็กๆ ข้าง Color เพื่อเปิดหน้าต่างป๊อปอัพ Colors จากนั้นเลือกสีที่ต้องการสำหรับจุดสำคัญ
   3. หากจำเป็น ให้ทำซ้ำขั้นตอนเหล่านี้เพื่อเพิ่ม/ปรับสีทั่วกราฟ

ความโปร่งใส

ในการปรับความโปร่งใสของไล่สีทั่วทั้งช่วง:

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

2. ในหน้าต่าง Properties ให้คลิกภายในช่องคุณสมบัติ Transparency จากนั้นคลิกปุ่ม ⋯ ที่ด้านขวาของกล่องป้อนข้อมูล

   

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

   

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

ประเภท

คุณสมบัติ Type ของไล่สีตั้งประเภทจาก Linear, Radial, หรือ Conical

• Linear — ลำดับสี/ความโปร่งใสเปลี่ยนแปลงในเส้นตรงข้ามองค์ประกอบ ทิศทางถูกควบคุมโดย การหมุน และตำแหน่งโดย การเลื่อน นี่คือค่าเริ่มต้น

• Radial — ลำดับสี/ความโปร่งใสกระจายออกจากศูนย์กลางขององค์ประกอบ โดยอาจเลื่อนโดย Offset รัศมีถูกกำหนดโดยค่าเฉลี่ยของความกว้างและความสูงขององค์ประกอบหารด้วยสอง ซึ่งมีค่าเท่ากับ $\text{(width+height)/4}$ Rotation ไม่มีผลต่อไล่สีแบบรัศมี

• Conical — ลำดับสี/ความโปร่งใสหมุนตามเข็มนาฬิการอบศูนย์กลางขององค์ประกอบ โดยอาจเลื่อนโดย Offset Rotation ควบคุมมุมเริ่มต้นและมุมสิ้นสุดของการหมุน โดยค่าเริ่มต้นจะหมุนจาก 0 ถึง 360 องศา แต่ค่าของ Scale ที่น้อยกว่า 1 สามารถลดมุมนี้ได้

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

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

ในทำนองเดียวกัน เมื่อคุณหมุนไล่สี จุดควบคุมก็จะหมุนด้วย:

ขนาด

ขนาดของไล่สี Scale จะคูณขอบเขตของไล่สี ควบคุมว่ามีลำดับสี/ความโปร่งใสเท่าใดที่มองเห็นได้ภายในองค์ประกอบ

• เมื่อ Scale น้อยกว่า 1 ไล่สีจะครอบคลุมพื้นที่น้อยกว่าขอบเขตทั้งหมด ความสี/ความโปร่งใสที่เหลือจะถูกเติมเต็มตามคุณสมบัติ TileMode

• เมื่อ Scale มากกว่า 1 ไล่สีจะครอบคลุมพื้นที่มากกว่าขอบเขตทั้งหมดและมีเพียงบางส่วนของสี/ความโปร่งใสที่มองเห็นได้

โหมดการสุ่มตัวอย่าง

คุณสมบัติ TileMode กำหนดวิธีที่ไล่สีทำซ้ำเมื่อชุดลำดับทั้งหมดไม่ครอบคลุมองค์ประกอบพ่อแม่ทั้งหมด

• Clamp — โหมดเริ่มต้นที่ค่าของสี/ความโปร่งใสที่จุดเริ่มต้นและจุดสิ้นสุดของลำดับจะขยายออกไปไม่สิ้นสุด ดังนั้นค่าที่เริ่มต้นจะเติมพื้นที่ใดๆ ก่อนไล่สีและค่าที่สิ้นสุดจะเติมพื้นที่ใดๆ หลังจากนั้น

• Repeat — ไล่สีจะทำซ้ำโดยการห่อหุ้มลำดับสี/ความโปร่งใสอย่างไร้รอยต่อจากจุดสิ้นสุดกลับไปยังจุดเริ่มต้น ซึ่งอาจทำให้เกิดรอยต่อที่มองเห็นได้หากค่าของสี/ความโปร่งใสที่แรกและสุดท้ายในลำดับแตกต่างกัน

• Mirror — ไล่สีจะสะท้อนที่แต่ละขอบเขตเพื่อให้ลำดับสี/ความโปร่งใสสลับไปมา ซึ่งจะทำให้เกิดการทำซ้ำที่ราบรื่นโดยไม่มีรอยต่อ เนื่องจากทิศทางจะกลับด้านที่ขอบของแต่ละแผ่น

เส้นขอบ

อินสแตนซ์ 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 จะขยายหรือหดเงาไปยังขนาดสัมพันธ์กับพ่อแม่