Gdy tworzysz UI z niestandardowymi krawędziami i rogami, często będziesz musiał renderować elementy w różnych proporcjach oraz wizualnie otaczać lokalizowany tekst lub inne treści o nieznanych wymiarach. Pozwala to na tworzenie elementów UI o różnych rozmiarach bez zniekształcania krawędzi lub rogów.
W podejściu 9-slice, jeden obraz (pojedyńczy zasób obrazu Roblox) jest wewnętrznie podzielony na dziewięć podobrazów, z których każde ma różne zasady skalowania.
| Podobraz | Skalowanie |
|---|---|
| 1 3 7 9 (rogi) | brak |
| 2 8 (górne/dolne krawędzie) | poziome |
| 4 6 (lewe/prawe krawędzie) | pionowe |
| 5 (środek) | poziome + pionowe |
Edytor Studio
Konfiguracja cięcia jest możliwa poprzez bezpośrednie ustawienie Enum.ScaleType i właściwości cięcia na etykiecie obrazu lub przycisku, ale wbudowany Edytor 9-Slice w Studio jest bardziej intuicyjny.
Otwieranie edytora
Aby otworzyć wizualny Edytor 9-Slice w Studio:
- Ustaw właściwość ScaleType na Slice.
- Kliknij na właściwość SliceCenter, która się pojawia, a następnie kliknij na … w wierszu.
- W oknie, które się otworzy, 4 czerwone linie nakładają się na obraz, reprezentując krawędzie cięć. Rozmiar źródłowego obrazu jest również wyświetlany.
Ustawianie przesunięć
W Studio przeciągnij czerwone linie, aby ustawić przesunięcia od lewej, prawej, górnej i dolnej krawędzi obrazu.
Jeśli potrzebujesz lepszej precyzji, wpisz wartości przesunięcia w polach po prawej stronie okna edytora.
Gdy przesuwasz linie przeciągające, element UI automatycznie aktualizuje się, aby pokazać wynik.
Wartości przesunięcia różnią się od wartości właściwości SliceCenter obiektu UI i reprezentują liczbę pikseli między krawędzią źródłowego obrazu a uchwytem związanym z daną stroną.