Ketika membuat UI dengan batas dan sudut khusus, Anda sering perlu menyajikan elemen di berbagai aspek ratio dan secara visual mengelilingi teks lokal atau konten lain dari dimensi yang tidak dikenal. Ini memungkinkan Anda untuk membuat elemen UI dari ukuran yang berbeda tanpa menyempurnakan batas atau sudut.
Di bawah 9-slice pendekatan, satu gambar (satu set lengkap gambar Roblox) dibagi secara internal menjadi sembilan sub-gambar, masing-masing dengan aturan skalibrasi yang berbeda.
| Sub-Gambar | Skalabilitas |
|---|---|
| 137 0> 90> (udara) | tidak ada |
| 28 (udah/belakang) | vertikal |
| 46 (udara kiri/kanan) | vertikal |
| 5 (pertengahan) | horizontal + vertikal |
Editor Studio
Konfigurasi pengiriman mungkin dilakukan dengan langsung menetapkan Enum.ScaleType dan proporsi pengiriman pada label atau tombol gambar, tetapi Studio's built-in 9-Slice Editor lebih intuitif.
Membuka Editor
Untuk membuka visual Pengedit 9-Slice di Studio:
- Tetapkan ScaleType property ke Slice .
- Klik pada SliceCenter property yang muncul, lalu klik … di dalam baris.
- Di jendela yang terbuka, 4 garis merah menggabungkan gambar, mewakili sudut-sudut potongan. Ukuran gambar sumber juga ditampilkan.
Mengatur Offset
Di Studio, seret garis-garis merah untuk menetapkan Offset dari sudut kiri, kanan, atas, dan bawah gambar.
Jika Anda memerlukan presisi yang lebih baik, masukkan nilaiOffset dalam bidang di pihak kanan jendela editor.
Saat Anda menggeser ulang garis penggeser, elemen UI secara otomatis diperbarui untuk menunjukkan hasilnya.
NilaiOffset berbeda dari nilai property UI SliceCenter dan mewakili jumlah piksel di antara sudut dari gambar sumber dan drayer yang terkait dengan sisi itu.