9-Slice UI Tasarımı

*Bu içerik, yapay zekâ (beta) kullanılarak çevrildi ve hatalar içerebilir. Sayfayı İngilizce görüntülemek için buraya tıkla.

Özelleştirilmiş kenarlar ve köşeler oluştururken, genellikle lokalize edilen metni veya bilinmeyen boyutların diğer içeriklerini görsel olarak çevrelemek zorunda kalacaksınız. Bu, kenarları veya köşeleri şişirerek boyutlarınızı değiştirmeyi önleyenizi oluşturur.

9-Slice'siz
9-Slice ile

9-Slice yaklaşımının altında, bir görüntü (tek bir Roblox görüntü kaynağı) içerisindeki görüntüler, her biri farklı ölçekleme kurallarıyla bölünür.

Alt İçerikBüyütme
137 0> 90> ( köşeler)hiçbiri
28 (üst/alt kenarlar)yatay
46 (gitti sol/sağ kenarlar)vertikal
5 (orta)yatay +垂直

Stüdyo Editörü

Dilim konfigürasyonu, doğrudan şekilde Enum.ScaleType ve dilim özelliklerini bir görüntü etiketinde veya düğmesinde ayarlayarak mümkündür, ancak Studio'nun yerleşik 9-Slice Editor daha iyi.

Editörü Açılıyor

Stüdyo'da görsel 9-Slice Editor açmak için:

  1. Açın bir ImageLabel veya ImageButton ile bir geçerli varlık kimliği girilmiş Görüntü alanında.
  1. Ölçek Türü özelliğini Dilim olarak ayarla.
  1. Görünür olan Dilim Merkezi özelliğine tıklayın, sonra satır içindeki özelliğine tıklayın.
  1. Açılan pencerede, dilimlerin kenarlarını temsil eden 4 kırmızı çizgi bulunur. Kaynağın boyutu da gösterilir.

Ofsetleri Ayarlama

Stüdyo'da, kırmızı çizgileri sol, sağ, üst ve alt kenarlardan çekerek bozulma değerlerini ayarlayın.

Etkileyicilerin yeniden konumlandırılmasıyla, UI öğesi otomatik olarak güncellenir ve sonuçları gösterir.

Dilim ayarları
500×200 ImageLabel Sonucu
Dilim ayarları
500×200 ImageLabel Sonucu