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 czynności:
- 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.
Sekwencja kolorów
Aby ustawić sekwencję kolorów gradientu:
W oknie Eksploratora wybierz UIGradient.
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. Wyświetli się okno sekwencji kolorów.
Każdy trójkąt na dolnej osi sekwencji kolorów to punkt kluczowy, który określa wartość koloru w tym punkcie.
Kliknij punkt kluczowy w sekwencji kolorów, a następnie kliknij mały kwadrat obok Kolor, aby otworzyć okno pop-up Kolory.
Wybierz pożądany kolor dla punktu kluczowego.
W razie potrzeby możesz:
- Dodać kolejny punkt kluczowy, klikając w dowolnym miejscu na wykresie.
- Przeciągnąć istniejący punkt kluczowy w nowe miejsce lub wybrać punkt kluczowy i wprowadzić konkretną wartość czasu za pomocą pola Czas.
- Usunąć punkt kluczowy, wybierając go i klikając przycisk Usuń.
- Zresetować sekwencję, klikając przycisk Resetuj.
Przezroczystość
Aby dostosować przezroczystość gradientu w jego zakresie:
W oknie Eksploratora wybierz UIGradient.
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. Wyświetli się okno sekwencji liczb.
Każdy kwadrat na wykresie sekwencji liczb to punkt kluczowy, który określa wartość przezroczystości w tym punkcie.
Kliknij i przeciągnij dowolny punkt kluczowy, lub wybierz punkt kluczowy i wprowadź konkretną kombinację czasu/wartości za pomocą pól Czas i Wartość.
W razie potrzeby możesz:
- Dodać kolejny punkt kluczowy, klikając w dowolnym miejscu na wykresie.
- Usunąć punkt kluczowy, wybierając go i klikając przycisk Usuń.
- Zresetować sekwencję, klikając przycisk Resetuj.
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ą:
Obrys
Instancja UIStroke stosuje obrys do tekstu lub krawędzi. Kluczowe cechy obejmują:
- Możliwość ustawienia przezroczystości obrysu 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 ostrym).
- Obsługa gradientu obrysu za pomocą instancji UIGradient.
Grubość
Możesz ustawić szerokość obrysu 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 obrys jest na tekście, a StrokeSizingMode jest ustawione na ScaledSize, grubość jest proporcjonalna do rozmiaru czcionki.
Kolor lub gradient
Możesz ustawić kolor obrysu za pomocą właściwości Color, a także wstawić instancję podrzędną UIGradient, aby stworzyć gradientowe obrysy.
Zarówno obiekt rodzica, jak i UIStroke mogą mieć podrzędne instancje UIGradient, co pozwala na ustawienie gradientów na obrysie i wypełnieniu niezależnie.
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 obrysu za pomocą właściwości ApplyStrokeMode, co pozwala na zastosowanie obrysu do granic obiektu zamiast samego tekstu. Możesz nawet kontrolować obrys tekstu i krawędzi 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ę obrysu w stosunku do krawędzi rodzica, a BorderOffset pozwala określić dodatkowe przesunięcie pozycji obrysu.
Przezroczystość
Właściwość Transparency ustawia przezroczystość obrysu 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 obrysu).
Styl rogów
Właściwość LineJoinMode pozwala kontrolować, jak interpretowane są rogi. Przyjmuje 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.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
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.
UIShadow nie obsługuje tekstu. Jeśli dodasz ten modyfikator do TextLabel lub TextButton, renderuje cień obszaru prostokątnego obiektu, a nie tekstu.
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.
