ตัวปรับขนาดและข้อจำกัด

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

ขนาด

วัตถุ UIScale เก็บค่าตัวเลขที่คูณกับคุณสมบัติ AbsoluteSize ของ GuiObject ที่เป็นพ่อแม่ สำหรับตัวอย่าง หากคุณต้องการให้วัตถุมีขนาดเป็นสองเท่าจากขนาดปัจจุบัน คุณสามารถใส่วัตถุ UIScale พร้อมกับ Scale ที่มีค่าเป็น 2

ตัวปรับขนาดนี้มีประโยชน์สำหรับการ "ซูมเข้า" ขณะออกแบบอินเทอร์เฟซผู้ใช้ที่ละเอียดใน Studio เนื่องจากมันจะปรับขนาดวัตถุและลูกทั้งหมดของมันอย่างมีสัดส่วน รวมถึงตัวปรับรูปลักษณ์ที่นำไปใช้ ตัวปรับรูปลักษณ์ เช่น UIStroke หรือ UICorner นอกจากนี้ยังมีประโยชน์ในการ สร้างอนิเมชัน ขนาดของวัตถุ เช่น เพื่อเพิ่มขนาดของปุ่มเล็กน้อยเมื่อผู้เล่นเลื่อนเมาส์ไปเหนือมัน

การปรับขนาดโดยอัตโนมัติ

คุณสมบัติ AutomaticSize จะปรับขนาด GuiObject พ่อแม่ตามขนาดของวัตถุที่เป็นลูกโดยอัตโนมัติ คุณสามารถใช้คุณสมบัตินี้ในหลายกรณี รวมถึง:

• ขยาย GuiObject เพื่อให้พอดีกับข้อความที่ถูก แปล ในหลายภาษา
• อนุญาตให้ผู้ใช้ ป้อนข้อความ ภายใน TextBox โดยปรับขนาดโดยอัตโนมัติตามจำนวนข้อความที่ป้อน
• ปรับขนาดวัตถุข้อความโดยอัตโนมัติด้วยการใช้ rich text markup รวมถึงประเภทและขนาดฟอนต์

คุณสามารถเปิดใช้คุณสมบัติ AutomaticSize สำหรับ GuiObject ใด ๆ โดยค่าเริ่มต้นจะตั้งค่าเป็น None แต่คุณสามารถเปลี่ยนค่าเพื่อควบคุมทิศทางที่เฉพาะเจาะจงว่าคุณสมบัติ GuiObject จะปรับขนาดเพื่อให้พอดีกับเนื้อหาของมันอย่างไร

ในการเปิดใช้งานการปรับขนาดโดยอัตโนมัติ:

1. ในหน้าต่าง Explorer คลิกที่ GuiObject ใดก็ได้ เช่น Frame, TextBox หรือ ImageLabel

2. ในหน้าต่าง Properties ไปที่คุณสมบัติ AutomaticSize (AutomaticCanvasSize สำหรับ ScrollingFrame) และตั้งค่าเป็นหนึ่งในตัวเลือกต่อไปนี้:

   • X — ปรับขนาดเนื้อหาในแนวนอน
   • Y — ปรับขนาดเนื้อหาในแนวตั้ง
   • XY — ปรับขนาดเนื้อหาในทั้งแนวนอนและแนวตั้ง

   

เมื่อเปิดใช้งานการปรับขนาดโดยอัตโนมัติแล้ว โปรดทราบว่าคุณสมบัติวัตถุอื่น ๆ มีพฤติกรรมตามนี้:

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

• ป้ายชื่อด้านบนมีค่า AnchorPoint ของ (0, 0.5) ซึ่งยึดให้มันอยู่กลางด้านซ้าย
• ป้ายชื่อกลางมีค่า AnchorPoint ของ (0.5, 0.5) ซึ่งยึดให้มันอยู่กลาง
• ป้ายชื่อด้านล่างมีค่า AnchorPoint ของ (1, 0.5) ซึ่งยึดให้มันอยู่กลางด้านขวา

ข้อจำกัด

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

ขนาด

UISizeConstraint กำหนดขนาดขั้นต่ำและสูงสุดสำหรับ GuiObject ข้อจำกัดนี้ช่วยให้มั่นใจได้ว่า GuiObject จะไม่เล็กหรือใหญ่เกินไปในขนาดหน้าจอที่แตกต่างกัน

ตัวอย่างเช่น หากคุณตั้งค่าคุณสมบัติ MinSize เป็น (200, 200) และคุณสมบัติ MaxSize เป็น (400, 400) GuiObject จะไม่สามารถปรับขนาดเล็กกว่าหรือใหญ่กว่าพิกเซลขนาด 200×200 หรือ 400×400

ขนาดข้อความ

UITextSizeConstraint กำหนดขนาดฟอนต์ขั้นต่ำและสูงสุดสำหรับ GuiObject ที่มีข้อความ เช่น TextLabel, TextButton, หรือ TextBox ข้อจำกัดนี้ช่วยให้มั่นใจได้ว่า ข้อความ ภายใน GuiObject จะไม่อ่านไม่ออกหรือใหญ่เกินไป

หากคุณเปิดใช้งานคุณสมบัติ TextScaled ของ GuiObject พ่อแม่ ขนาดข้อความจะปรับขนาดพร้อมกับขนาดของภาชนะและปฏิบัติตามข้อจำกัดแม้ว่าอาจจะเล็กหรือใหญ่กว่าค่าของ MinTextSize และ MaxTextSize

ตัวอย่างเช่น วัตถุ TextLabel ต่อไปนี้มีข้อจำกัด UITextSizeConstraint ที่มีค่า MinTextSize เป็น 50 และค่าขนาดสูงสุดเป็น 80 ถึงแม้ว่าวัตถุ TextLabel จะมีขนาดเล็กลง แต่ฟอนต์จะไม่เล็กกว่าจำนวน 50 พิกเซล และเมื่อวัตถุมีขนาดใหญ่ ฟอนต์จะไม่เกิน 80 พิกเซล

อัตราส่วนภาพ

UIAspectRatioConstraint บังคับ อัตราส่วนความกว้างต่อความสูง ให้อยู่ใน GuiObject โดยไม่คำนึงถึงขนาดหลักของมัน แม้ว่าขนาดนั้นจะถูกตั้งค่าเป็นเปอร์เซ็นต์ของพ่อแม่ หากคุณต้องการใส่ข้อจำกัดนี้เป็นลูกของ Frame และตั้งค่าคุณสมบัติ AspectRatio ไว้ที่ 2 (2:1) จะรักษาความกว้างของเฟรมให้เป็นสองเท่าของความสูง ในทำนองเดียวกัน การตั้งค่าคุณสมบัติ AspectRatio ไว้ที่ 0.5 (0.5:1) จะทำให้ความกว้างของเฟรมเป็นครึ่งหนึ่งของความสูง

การตั้งค่าคุณสมบัติ AspectRatio ของข้อจำกัดนี้เป็นค่าเริ่มต้นที่ 1 (1:1) เป็นวิธีที่สะดวกในการป้องกันการปรับขนาด/ยืดที่ไม่สัดส่วนของ ImageLabel ที่มีทรัพย์สินของภาพสี่เหลี่ยม เช่น อวตารภาพย่อ