Ö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.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Comparison-Without.png)
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Comparison-With.png)
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.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Concept-Diagram.png)
Alt İçerik | Bü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:
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Properties-Image.png)
- Ölçek Türü özelliğini Dilim olarak ayarla.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Properties-ScaleType.png)
- Görünür olan Dilim Merkezi özelliğine tıklayın, sonra satır içindeki … özelliğine tıklayın.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Properties-SliceCenter.png)
- Açılan pencerede, dilimlerin kenarlarını temsil eden 4 kırmızı çizgi bulunur. Kaynağın boyutu da gösterilir.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Editor-View.png)
Ofsetleri Ayarlama
Stüdyo'da, kırmızı çizgileri sol, sağ, üst ve alt kenarlardan çekerek bozulma değerlerini ayarlayın.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Offset-Diagram.png)
Etkileyicilerin yeniden konumlandırılmasıyla, UI öğesi otomatik olarak güncellenir ve sonuçları gösterir.
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Example-A-Editor.png)
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Example-A-ImageLabel.png)
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Example-B-Editor.png)
![](https://prod.docsiteassets.roblox.com/assets/ui/9-slice/9-Slice-Example-B-ImageLabel.png)