Modyfikatory wyglądu interfejsu użytkownika

Korzystając z modyfikatorów wyglądu, możesz jeszcze bardziej dostosować wygląd swoich GuiObjects.

• Zastosuj gradient do tła obiektu.
• Zastosuj obrys do tekstu lub krawędzi.
• Ustaw zaokrąglone rogi dla obiektu.
• Zwiększ padding między krawędziami obiektu.
• Dodaj cień za obiektem.

Gradient

Obiekt UIGradient stosuje gradient kolorów i przezroczystości do swojego rodzica GuiObject.

Możesz skonfigurować gradient, wykonując następujące kroki:

• Ustawiając jego kolory za pomocą ColorSequence w właściwości gradientu Color.
• Ustawiając jego przezroczystość za pomocą NumberSequence w właściwości gradientu Transparency.
• Wybierając typ gradientu za pomocą właściwości Type.
• Wybierając punkt początkowy gradientu (wewnątrz lub na zewnątrz granic rodzica) za pomocą właściwości Offset.
• Wybierając kąt gradientu za pomocą właściwości Rotation.
• Wybierając skalę gradientu za pomocą właściwości Scale.
• Wybierając zachowanie próbkowania krawędzi gradientu za pomocą właściwości TileMode.

Sekwencja kolorów

Aby ustawić sekwencję kolorów gradientu:

1. W oknie Eksploratora wybierz UIGradient.

2. W oknie Właściwości kliknij w pole właściwości Color, a następnie kliknij przycisk ⋯ po prawej stronie pola wejściowego.

   

3. Każdy trójkąt na dolnej osi sekwencji kolorów to punkt kluczowy, który określa wartość koloru w tym punkcie.

   

   1. Kliknij punkt kluczowy w sekwencji kolorów, aby go wybrać lub przemieścić, lub dodaj inny punkt kluczowy, klikając w dowolnym miejscu na wykresie.
   2. Kliknij mały kwadrat obok Kolor, aby otworzyć okno pop-up Kolory, a następnie wybierz pożądany kolor dla punktu kluczowego.
   3. W razie potrzeby powtórz te kroki, aby dodać/dostosować kolory na wykresie.

Przezroczystość

Aby dostosować przezroczystość gradientu w jego zakresie:

1. W oknie Eksploratora wybierz UIGradient.

2. W oknie Właściwości kliknij w pole właściwości Transparency, a następnie kliknij przycisk ⋯ po prawej stronie pola wejściowego.

   

3. Każdy kwadrat na wykresie sekwencji liczbowej to punkt kluczowy, który określa wartość przezroczystości w tym punkcie.

   

   1. Kliknij punkt kluczowy w sekwencji liczbowej, aby go wybrać lub przemieścić, lub dodaj inny punkt kluczowy, klikając w dowolnym miejscu na wykresie.
   2. Wprowadź konkretną kombinację czasu/wartości za pomocą pól Czas i Wartość.
   3. W razie potrzeby powtórz te kroki, aby dodać/dostosować poziomy przezroczystości na wykresie.

Typ

Właściwość Type ustawia typ gradientu spośród Linear, Radial lub Conical.

• Linear — Sekwencja kolorów/przezroczystości przechodzi w prostą linię przez element. Kierunek jest kontrolowany przez jego rotację, a pozycja przez jego przesunięcie. To jest domyślne.

• Radial — Sekwencja kolorów/przezroczystości promieniuje na zewnątrz z centrum elementu, opcjonalnie przesunięta przez Offset. Promień jest definiowany przez średnią szerokości i wysokości elementu podzieloną przez dwa, efektywnie $\text{(szerokość+w wysokość)/4}$. Rotation nie ma wpływu na gradient radialny.

• Conical — Sekwencja kolorów/przezroczystości obraca się zgodnie z ruchem wskazówek zegara wokół środka elementu, opcjonalnie przesunięta przez Offset. Rotation kontroluje kąt początkowy i końcowy obrotu. Domyślnie obraca się od 0 do 360 stopni, ale wartości Scale mniejsze niż 1 mogą zmniejszyć ten kąt.

Przesunięcie i rotacja

Właściwości Offset i Rotation pozwalają dostosować punkty kontrolne gradientu i jego kąt. Jak pokazano na poniższych diagramach, Offset opiera się na procencie szerokości lub wysokości rodzica, a zarówno wartości dodatnie, jak i ujemne są ważne.

Podobnie, gdy obracasz gradient, punkty kontrolne również się obracają:

Skala

Właściwość Scale mnoży zasięg gradientu, kontrolując, jak dużo sekwencji kolorów/przezroczystości jest widoczne w elemencie.

• Gdy Scale jest mniejsze niż 1, gradient obejmuje mniej niż pełny zasięg. Pozostała sekwencja kolorów/przezroczystości jest wypełniana zgodnie z właściwością TileMode.

• Gdy Scale jest większe niż 1, gradient obejmuje więcej niż pełny zasięg i tylko część sekwencji kolorów/przezroczystości jest widoczna.

Tryb kafelków

Właściwość TileMode ustawia, jak gradient powtarza się, gdy pełna sekwencja nie pokrywa w pełni elementu rodzica.

• Clamp — Domyślny tryb, w którym wartości kolorów/przezroczystości na początku i końcu sekwencji rozciągają się w nieskończoność, więc wartości początkowe wypełniają obszar przed gradientem, a wartości końcowe wypełniają obszar po nim.

• Repeat — Gradient powtarza się, owijając sekwencję kolorów/przezroczystości bezszwowo od końca do początku. Może to spowodować widoczną szew, jeśli pierwsze i ostatnie wartości kolorów/przezroczystości w sekwencji różnią się.

• Mirror — Gradient odbija się na każdej granicy, więc sekwencja kolorów/przezroczystości ping-ponguje. To powoduje płynne powtórzenie bez szwu, ponieważ kierunek odwraca się na każdej krawędzi kafelka.

Obrys

Instancja UIStroke stosuje kontur do tekstu lub krawędzi. Kluczowe cechy obejmują:

• Regulowana kolor i grubość konturu.
• Możliwość ustawienia przezroczystości konturu niezależnie od przezroczystości rodzica.
• Możliwość dostosowania pozycji i/lub przesunięcia w stosunku do krawędzi rodzica.
• Trzy style rogów (zaokrąglony, fazowany lub szpiczasty).
• Wsparcie dla gradientu konturu za pomocą instancji UIGradient.

Grubość

Możesz ustawić szerokość konturu za pomocą właściwości Thickness, która jest mierzona w pikselach (domyślnie) lub skalowana w stosunku do rodzica, w zależności od StrokeSizingMode modyfikatora. Jeśli kontur jest na tekście, a StrokeSizingMode jest ustawione na ScaledSize, grubość jest proporcjonalna do rozmiaru czcionki.

Kolor lub gradient

Możesz ustawić kolor konturu za pomocą właściwości Color, a także wstawić instancję podrzędną UIGradient, aby stworzyć gradientowe kontury.

Obrys tekstu lub krawędzi

W zależności od typu rodzica, UIStroke działa jako obrys tekstu lub jako krawędź. Gdy rodzisz UIStroke do obiektu tekstowego, takiego jak TextLabel, stosuje się do obrysu tekstu; gdy rodzisz UIStroke do innych GuiObjects, stosuje się do krawędzi.

Gdy jest stosowany do obiektu tekstowego, możesz nadpisać domyślne zachowanie konturu za pomocą właściwości ApplyStrokeMode, co pozwala na zastosowanie konturu do granic obiektu zamiast samego tekstu. Możesz nawet kontrolować obrys tekstu i krawędź niezależnie, rodzając dwie instancje UIStroke do obiektu tekstowego, jedna ustawiona na Kontekstowy, a druga na Krawędź.

Pozycja/offset krawędzi

BorderStrokePosition ustawia pozycję konturu w stosunku do krawędzi rodzica, a BorderOffset pozwala określić dodatkowe przesunięcie pozycji konturu.

Przezroczystość

Właściwość Transparency ustawia przezroczystość konturu niezależnie od BackgroundTransparency obiektu rodzica lub TextTransparency. Pozwala to na renderowanie tekstu i krawędzi, które są "puste" (składające się tylko z konturu).

Styl rogów

Właściwość LineJoinMode pozwala kontrolować, jak interpretowane są rogi. Akceptuje wartość Round, Bevel lub Miter.

Warstwowanie

Aby warstwować wiele instancji UIStroke na GuiObject od przodu do tyłu, możesz wykorzystać właściwość ZIndex. Te z niższym ZIndex renderują się pod (za) tymi z wyższym ZIndex.

Zauważ, że kolejność renderowania dla instancji UIStroke z tym samym ZIndex jest nieokreślona. Nie stosuj wielu instancji UIStroke z tym samym indeksem, jeśli ich kolejność renderowania ma znaczenie.

Rogi

Instancja UICorner stosuje deformację do rogów swojego rodzica GuiObject. Możesz kontrolować zastosowany promień za pomocą właściwości CornerRadius, używając Scale lub Offset.

Scale zaokrągla rogi do procentu w oparciu o całkowitą długość najkrótszej krawędzi rodzica, co oznacza, że skala 0.5 lub wyższa deformuje rodzica w kształt "pigułki", niezależnie od jego szerokości lub wysokości. Offset zaokrągla rogi do konkretnej liczby pikseli, niezależnie od szerokości/wysokości rodzica.

Możesz również kontrolować indywidualne rogi za pomocą właściwości TopLeftRadius, TopRightRadius, BottomRightRadius i BottomLeftRadius.

Padding

Obiekt UIPadding stosuje padding górny, dolny, lewy i/lub prawy do zawartości rodzica GuiObject. Na przykład możesz przesunąć tekst wewnątrz etykiety tekstowej w dół lub w górę, stosując przesunięcie do właściwości PaddingBottom modyfikatora.

Cień

Obiekt UIShadow renderuje cień za swoim rodzicem UI. Kluczowe cechy obejmują:

• Dostosowanie rozmycia cienia.
• Dostosowanie koloru i przezroczystości cienia.
• Dostosowanie przesunięcia i rozprzestrzenienia cienia.
• Jeśli rodzic jest obrócony przez GuiObject.Rotation, cień również zostanie obrócony.
• Jeśli rodzic ma zaokrąglone rogi, cień również będzie miał zaokrąglone rogi.

Rozmycie

Właściwość BlurRadius określa rozmycie cienia. Większa wartość sprawia, że krawędzie cienia wydają się bardziej miękkie. Zauważ, że czynnik skali tej właściwości UDim jest względny do szerokości lub wysokości rodzica, w zależności od tego, która jest krótsza.

Kolor i przezroczystość

Właściwość Color określa kolor cienia, podczas gdy Transparency ustawia przezroczystość cienia, gdzie 0 oznacza całkowitą nieprzezroczystość, a 1 całkowitą przezroczystość.

Przesunięcie i rozprzestrzenienie

Właściwość Offset przesuwa cień w stosunku do pozycji rodzica, podczas gdy Spread rozszerza lub zmniejsza cień w stosunku do rozmiaru rodzica.