Korzystając z modyfikatorów wyglądu, możesz jeszcze bardziej spersonalizować wygląd swoich GuiObjects.
- Zastosuj gradient do tła obiektu.
- Zastosuj obrys do tekstu lub ramki.
- Ustaw zaokrąglone rogi dla obiektu.
- Zwiększ margines 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 poprzez:
- Wybór punktu początkowego gradientu (wewnętrznego lub zewnętrznego względem granic rodzica) za pomocą właściwości Offset.
- Wybór kąta gradientu za pomocą właściwości Rotation.
Sekwencja kolorów
Aby ustawić sekwencję kolorów gradientu:
W oknie Explorer wybierz UIGradient.
W oknie Properties kliknij w polu właściwości Color, a następnie kliknij przycisk ⋯ po prawej stronie pola. Wyświetli się okno wyboru 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 żądany kolor dla punktu kluczowego.
W razie potrzeby możesz:
- Dodać kolejny punkt kluczowy, klikając gdziekolwiek 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 całym zakresie:
W oknie Explorer wybierz UIGradient.
W oknie Properties kliknij w polu właściwości Transparency, a następnie kliknij przycisk ⋯ po prawej stronie pola. Wyświetli się okno wyboru sekwencji liczbowej.
Każdy kwadrat na wykresie sekwencji liczbowej 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 gdziekolwiek 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ą ci dostosować punkty kontrolne gradientu oraz jego kąt. Jak ilustrują poniższe diagramy, Offset opiera się na procencie szerokości lub wysokości rodzica, a zarówno wartości dodatnie, jak i ujemne są prawidłowe.
Podobnie, gdy obracasz gradient, punkty kontrolne także się obracają:
Obrys
Instancja UIStroke stosuje obrys do tekstu lub ramki. Kluczowe cechy obejmują:
- Możliwość ustawienia przezroczystości obrysu niezależnie od przezroczystości rodzica.
- Możliwość dostosowywania pozycji i/lub przemieszczenia w odniesieniu do ramki rodzica.
- Trzy style krawędzi (zaokrąglone, fazowane lub ścięte).
- Obsługa obrysu gradientu poprzez instancję 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 odniesieniu do rodzica, w zależności od StrokeSizingMode modyfikatora. Jeśli obrys jest na tekście, a StrokeSizingMode jest ustawiony 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ę UIGradient jako dziecko, aby utworzyć gradientowe obrysy.
Zarówno obiekt rodzica, jak i UIStroke mogą mieć dziecko UIGradient, umożliwiając ustawienie gradientów zarówno na obrysie, jak i wypełnieniu niezależnie.
Obrys tekstu lub ramki
W zależności od typu rodzica, UIStroke działa jako obrys tekstu lub jako ramka. Gdy rodzisz UIStroke do obiektu tekstowego, takiego jak TextLabel, stosuje się do obrysu tekstu; gdy rodzisz UIStroke do innych GuiObjects, stosuje się do ramki.
Gdy jest zastosowane 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 ramkę niezależnie, rodzicie dwie instancje UIStroke do obiektu tekstowego, z jednym ustawionym na Kontekstowy i drugim na Ramkę.
Pozycja/offset ramki
BorderStrokePosition ustawia pozycję obrysu w odniesieniu do ramki rodzica, a BorderOffset pozwala określić dodatkowy offset dla pozycji obrysu.
Przezroczystość
Właściwość Transparency ustawia przezroczystość obrysu niezależnie od BackgroundTransparency obiektu rodzica lub TextTransparency. Umożliwia to renderowanie tekstu i ramki, które są "puste" (składające się tylko z obrysu).
Styl krawędzi
Właściwość LineJoinMode pozwala kontrolować, jak interpretowane są rogi. Akceptuje ona wartość Round, Bevel lub Miter.
Warstwy
Aby nałożyć wiele instancji UIStroke na GuiObject od frontu do tyłu, możesz skorzystać z właściwości ZIndex. Te z niższym ZIndex są renderowane pod (za) tymi z wyższym ZIndex.
Zauważ, że kolejność renderowania 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 na podstawie całkowitej długości najkrótszego 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 także kontrolować indywidualne rogi za pomocą właściwości TopLeftRadius, TopRightRadius, BottomRightRadius i BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Margines
Obiekt UIPadding stosuje górny, dolny, lewy i/lub prawy margines do zawartości rodzica GuiObject. Na przykład, możesz przesunąć tekst w obrębie etykiety tekstowej w dół lub w górę, stosując offset do właściwości modyfikatora PaddingBottom.
Cień
Obiekt UIShadow renderuje cień za swoim rodzicem UI. Kluczowe cechy obejmują:
- Dostosuj rozmycie cienia.
- Dostosuj kolor i przezroczystość cienia.
- Dostosuj przesunięcie i rozprzestrzenienie 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ę łagodniejsze. Zauważ, że czynnik skali tej właściwości UDim jest względny w stosunku do szerokości lub wysokości rodzica, w zależności od tego, która z nich 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ń względem pozycji rodzica, podczas gdy Spread rozszerza lub zmniejsza cień w odniesieniu do rozmiaru rodzica.
