Saat membuat UI dengan batas dan sudut kustom, Anda sering kali perlu merender elemen pada rasio aspek yang berbeda dan secara visual mengelilingi teks yang dilokalisasi atau konten lain dengan dimensi yang tidak diketahui. Ini memungkinkan Anda membuat elemen UI dengan ukuran yang bervariasi tanpa mendistorsi batas atau sudut.
Di bawah pendekatan 9-lapisan, satu gambar (aset gambar Roblox tunggal) dibagi secara internal menjadi sembilan sub-gambar, masing-masing dengan aturan skala yang berbeda.
| Sub-gambar | Skala |
|---|---|
| 1 3 7 9 (sudut) | tidak ada |
| 2 8 (tepi atas/bawah) | horizontal |
| 4 6 (tepi kiri/kanan) | vertikal |
| 5 (tengah) | horizontal + vertikal |
Editor Studio
Konfigurasi lapisan mungkin dilakukan dengan mengatur langsung Enum.ScaleType dan properti lapisan di label gambar atau tombol, tetapi Editor 9-Lapisan bawaan Studio lebih intuitif.
Membuka editor
Untuk membuka Editor 9-Lapisan visual di Studio:
- Atur properti ScaleType ke Slice.
- Klik pada properti SliceCenter yang muncul, lalu klik pada … di dalam baris.
- Di jendela yang terbuka, 4 garis merah overlay gambar, mewakili tepi dari lapisan. Ukuran gambar sumber juga ditampilkan.
Menetapkan offset
Di Studio, seret garis merah untuk mengatur offset dari tepi kiri, kanan, atas, dan bawah gambar.
Jika Anda membutuhkan ketepatan yang lebih baik, masukkan nilai offset di field di sisi kanan jendela editor.
Saat Anda memindahkan garis pemindah, elemen UI secara otomatis diperbarui untuk menunjukkan hasilnya.
Nilai offset berbeda dari nilai properti SliceCenter objek UI dan mewakili jumlah piksel antara tepi gambar sumber dan pemindah yang terkait dengan sisi itu.