Podczas tworzenia interfejsu z niestandardowymi krawędziami i kątami często będziesz musiał renderować elementy w różnych proporcjach aspektu i wizualnie otaczać lokalizowanym tekstem lub innymi treściami o nieznanych wymiarach. To pozwala na tworzenie elementów interfejsu różnych rozmiarów bez zniekształcania krawędzi lub kątów.
Podchodząc pod 9-Slice podejście, jeden obraz (jedno źródło obrazu Roblox) jest wewnętrznie podzielony na dziewięć podobnych podobnych obrazów, każdy z różnymi zasadami skalowania.
| Podobny wgląd | Skalowanie |
|---|---|
| 137 0> 9 0> (kąty) | żadna |
| 28 (krawędzi góry/dół) | poziomy |
| 46 (lewe/prawe krawędzie) | vertkalny |
| 5 (centrum) | poziomy + wertykalny |
Studio Edytor
Konfiguracja kawałkowania jest możliwa poprzez bezpośrednie ustawienie Enum.ScaleType i właściwości kawałkowania na etykiecie lub przycisku obrazu, ale Studio's zbudowany 9-Slice Editor jest bardziej intuicyjny.
Otwórz edytor
Aby otworzyć wizualny 9-Slice Editor w Studio:
- Ustaw właściwość ScaleType na Slice .
- Kliknij na właściwość SliceCenter , która się pojawia, a następnie kliknij … w linii.
- W otwartym oknie 4 czerwone linie superpozycja obrazu, przedstawiające krawędzie plików. Wielkość źródłowego obrazu jest również wyświetlana.
Ustawianie Offsetów
W Studio, przeciągnij czerwone linie, aby ustawić aleatory odległości od lewego, prawego, górnego i dolnego krawędzi obrazu.
Jeśli potrzebujesz lepszej precyzji, wpisz wartości odchylenia w polach po prawej stronie okna edytora.
Podczas przesuwania linii drażerów, element UI aktualizuje się automatycznie, aby pokazać wynik.
Wartości odchylenia są inne od wartości SliceCenter w obiekcie UI i reprezentują liczbę pikseli między krawędzi źródła obrazu a krawędzi powiązanej z tym stroną.