เมื่อสร้าง UI ด้วยเส้นขอบและมุมที่กําหนดเองคุณมักจะต้องแสดงองค์ประกอบในอัตราส่วนแง่มุมที่แตกต่างกันและรอบด้วยภาพเพื่อรอบ ข้อความที่แปล หรือเนื้อหาอื่นๆ ของมิติที่ไม่รู้จักสิ่งนี้ช่วยให้คุณสามารถสร้างองค์ประกอบ UI ขนาดต่างๆ โดยไม่บิดเบือนขอบหรือมุม
ภายใต้การเข้าถึงแบบ 9 สไลซ์ รูปภาพหนึ่ง (แอสเซทรูปภาพเดียวของ Roblox) จะถูกแบ่งออกเป็นเก้าภาพย่อยที่มีกฎการปรับขนาดที่แตกต่างกัน
| ภาพย่อย | การปรับขนาด |
|---|---|
| 1379 (มุม) | ไม่มี |
| 28 (ขอบบน/ล่าง) | แนวนอน |
| 46 (ขอบซ้าย/ขวา) | แนวตั้ง |
| 5 (กลาง) | แนวนอน + แนวตั้ง |
ตัวแก้ไขสตูดิโอ
การกำหนดค่าสไลซ์เป็นไปได้โดยการตั้งค่า Enum.ScaleType และคุณสมบัติสไลซ์โดยตรงบนป้ายชื่อหรือปุ่มภาพ แต่เครื่องมือ ตัดสไลซ์ในตัวของ Studio ใช้งานได้ง่ายกว่า
เปิดตัวแก้ไข
เพื่อเปิดตัวแก้ไขภาพ 9-Slice Editor ใน Studio:
- ตั้งค่าคุณสมบัติ ประเภทเครื่องชั่ง เป็น สไลซ์
- คลิกที่คุณสมบัติ SliceCenter ที่ปรากฏจากนั้นคลิกที่ … ภายในแถว
- ในหน้าต่างที่เปิดขึ้น 4 เส้นสีแดงซ้อนภาพที่แสดงเส้นขอบของชิ้นส่วน ขนาดภาพที่มาจากแหล่งก็ถูกแสดงเช่นกัน
ตั้งค่าความเคลื่อนที่
ในสตูดิโอ ลากเส้นสีแดงเพื่อตั้งค่า การเลื่อน จากขอบซ้าย ขวา ด้านบน และด้านล่างของภาพ
หากต้องการความแม่นยําที่ดีกว่าให้ป้อนมูลค่าออฟเซ็ตในช่องบนด้านขวาของหน้าต่างเอเดอร์
เมื่อคุณเปลี่ยนตำแหน่งเส้นลาก องค์ประกอบ UI ผลการค้นหา
มูลค่าออฟเซ็ตแตกต่างจากมูลค่าความเรียบของตัววัตถุ UI และแทนที่จำนวนพิกเซลระหว่างขอบของภาพที่มาจากแหล่งและดรากเกอร์ที่เกี่ยวข้องกับด้านนั้น