เมื่อสร้าง UI โดยมีขอบและมุมที่กำหนดเอง คุณจะต้องเรนเดอร์องค์ประกอบที่มีอัตราส่วนที่แตกต่างกันและล้อมรอบ ข้อความที่แปลภาษา หรือเนื้อหาอื่น ๆ ที่มีขนาดที่ไม่รู้จัก สิ่งนี้ช่วยให้คุณสร้างองค์ประกอบ UI ที่มีขนาดแตกต่างกันโดยไม่ทำให้ขอบหรือมุมบิดเบือน
ภายใต้แนวทาง 9-slice ภาพหนึ่ง (ทรัพยากรภาพ Roblox เดียว) จะถูกแบ่งภายในออกเป็นเก้า sub-images โดยแต่ละตัวจะมีกฎการปรับขนาดที่แตกต่างกัน
| Sub-image | Scaling |
|---|---|
| 1 3 7 9 (มุม) | ไม่มี |
| 2 8 (ขอบบน/ล่าง) | แนวนอน |
| 4 6 (ขอบซ้าย/ขวา) | แนวตั้ง |
| 5 (กลาง) | แนวนอน + แนวตั้ง |
ผู้แก้ไข Studio
การตั้งค่าการตัดสามารถทำได้โดยการตั้งค่า Enum.ScaleType และคุณสมบัติการตัดบนป้ายภาพหรือปุ่ม แต่ 9-Slice Editor ที่มีอยู่ใน Studio จะทำให้ง่ายต่อการใช้งานมากขึ้น
การเปิดโปรแกรมแก้ไข
ในการเปิด 9-Slice Editor ที่มีลักษณะใน Studio:
- ตั้งค่าคุณสมบัติ ScaleType เป็น Slice.
- คลิกที่คุณสมบัติ SliceCenter ที่ปรากฏขึ้น จากนั้นคลิกที่ … ภายในแถว
- ในหน้าต่างที่เปิดขึ้น จะมีเส้นสีแดง 4 เส้นซ้อนทับอยู่เหนือภาพ โดยแสดงถึงขอบของการตัด ขนาดภาพต้นฉบับจะแสดงอยู่ด้วย
ตั้งค่าค่าชดเชย
ใน Studio ให้ลากเส้นสีแดงเพื่อตั้งค่าค่าชดเชย (offsets) จากขอบซ้าย ขวา บน และล่างของภาพ
หากคุณต้องการความแม่นยำที่ดีกว่า ให้ป้อนค่าชดเชยในช่องทางด้านขวาของหน้าต่างโปรแกรมแก้ไข
เมื่อคุณปรับตำแหน่งเส้นดึง UI จะอัปเดตโดยอัตโนมัติเพื่อแสดงผลลัพธ์
ค่าชดเชยแตกต่างจากค่าคุณสมบัติ SliceCenter ของวัตถุ UI และแสดงถึงจำนวนพิกเซลระหว่างขอบของภาพต้นฉบับและตำแหน่งดึงที่เกี่ยวข้องกับด้านนั้น