Khi tạo giao diện người dùng với các đường biên và góc tùy chỉnh, bạn sẽ thường cần hiển thị các phần tử theo tỉ lệ khác nhau và bao quanh một cách trực quan văn bản địa phương hóa hoặc các nội dung khác có kích thước không xác định. Điều này cho phép bạn tạo ra các phần tử giao diện với kích thước khác nhau mà không làm biến dạng các đường biên hoặc góc.
Theo phương pháp 9-slice, một hình ảnh (một tài sản hình ảnh Roblox đơn) được chia nội bộ thành chín hình ảnh con, mỗi hình có quy tắc thay đổi kích thước khác nhau.
| Hình ảnh con | Thay đổi kích thước |
|---|---|
| 1 3 7 9 (góc) | không có |
| 2 8 (đường biên trên/dưới) | horizonal |
| 4 6 (đường biên trái/phải) | thẳng đứng |
| 5 (trung tâm) | horizonal + thẳng đứng |
Trình biên tập Studio
Việc cấu hình cắt có thể thực hiện qua việc trực tiếp đặt Enum.ScaleType và các thuộc tính cắt trên một nhãn hình ảnh hoặc nút, nhưng Trình biên tập 9-Slice tích hợp sẵn của Studio thì trực quan hơn.
Mở trình biên tập
Để mở Trình biên tập 9-Slice hình ảnh trong Studio:
- Đặt thuộc tính ScaleType thành Slice.
- Nhấp vào thuộc tính SliceCenter xuất hiện, sau đó nhấp vào … trong hàng.
- Trong cửa sổ mở ra, 4 đường kẻ đỏ phủ lên hình ảnh, thể hiện các đường biên của các phần cắt. Kích thước hình ảnh gốc cũng được hiển thị.
Đặt độ lệch
Trong Studio, kéo các đường kẻ đỏ để đặt các độ lệch từ các cạnh trái, phải, trên và dưới của hình ảnh.
Nếu bạn cần sự chính xác tốt hơn, hãy nhập các giá trị độ lệch vào các trường ở bên phải của cửa sổ trình biên tập.
Khi bạn di chuyển các đường kéo, phần tử giao diện sẽ tự động cập nhật để hiển thị kết quả.
Các giá trị độ lệch khác với các giá trị thuộc tính SliceCenter của đối tượng giao diện và đại diện cho số pixel giữa một cạnh của hình ảnh gốc và đường kéo liên quan đến bên đó.