Özel kenar ve köşeleri olan UI oluştururken, genellikle farklı en-boy oranlarında öğeler render etmeniz ve lokalize edilmiş metni veya bilinmeyen boyutlardaki diğer içerikleri görsel olarak çevrelemeniz gerekir. Bu, sınırları veya köşeleri bozmadan farklı boyutlarda UI öğeleri oluşturmanıza olanak tanır.
9 dilim yaklaşımında, bir görüntü (tek bir Roblox görüntü varlığı) içsel olarak dokuz alt-görüntüye ayrılır ve her biri farklı ölçekleme kurallarına sahiptir.
| Alt-görüntü | Ölçekleme |
|---|---|
| 1 3 7 9 (köşeler) | hiçbiri |
| 2 8 (üst/aşağı kenarlar) | yatay |
| 4 6 (sol/sağ kenarlar) | dikey |
| 5 (merkez) | yatay + dikey |
Studio düzenleyici
Dilim yapılandırması, bir görüntü etiketi veya düğmesine doğrudan Enum.ScaleType ve dilim özelliklerini ayarlayarak mümkündür, ancak Studio'nun yerleşik 9-Dilim Düzenleyicisi daha sezgisel bir deneyim sunar.
Düzenleyiciyi açma
Studio'da görsel 9-Dilim Düzenleyicisi'ni açmak için:
- ScaleType özelliğini Dilim olarak ayarlayın.
- Görünen SliceCenter özelliğine tıklayın, ardından satırdaki … üzerine tıklayın.
- Açılan pencerede, dilimlerin kenarlarını temsil eden 4 kırmızı çizgi görüntünün üzerine yerleştirilmiştir. Kaynak görüntü boyutu da görüntülenir.
Ofsetleri ayarlama
Studio'da, görüntünün sol, sağ, üst ve alt kenarlarına olan ofsetleri ayarlamak için kırmızı çizgileri sürükleyin.
Daha iyi bir hassasiyet için düzenleyici penceresinin sağ tarafındaki alanlara ofset değerleri girin.
Sürükleyici çizgileri yeniden konumlandırdıkça, UI öğesi otomatik olarak sonucu gösterecek şekilde güncellenir.
Ofset değerleri, UI nesnesinin SliceCenter özellik değerlerinden farklıdır ve kaynak görüntünün bir kenarı ile o tarafla ilişkili sürükleyici arasındaki piksel sayısını temsil eder.