Wbudowany Edytor stylów to kompleksowe narzędzie, które pozwala na tworzenie, zarządzanie i stosowanie stylów UI dla gier Roblox poprzez połączenie tokenów, arkuszy projektowych, reguł stylów i motywów.
Uzyskaj dostęp do Edytora stylów za pośrednictwem zakładki UI.
Po otwarciu kliknij przycisk Utwórz projekt, aby wygenerować podstawowy zestaw stylów.
Tworzenie zestawu stylów projektowych za pomocą Edytora stylów generuje BaseStyleSheet wewnątrz folderu Design w ReplicatedStorage. Ten podstawowy arkusz synchronizuje konkretne domyślne wartości na poziomie silnika, takie jak domyślna wartość Color3 [163, 162, 165], z domyślnymi wartościami, które pochodzą z procesów wstawiania w Studio. Zdecydowanie zaleca się, abyś nie usuwał ani nie próbował modyfikować podstawowego arkusza stylów — zamiast tego buduj tokeny i reguły stylów wokół arkusza projektowego, aby dopasować je do swoich celów UI.
Dodatkowo, arkusz StyleSheet jest generowany w folderze Design, który zawiera StyleDerive do podstawowego arkusza stylów. Jeśli zdecydujesz się usunąć ten StyleDerive, nieostylowane wartości dla GuiObjects mogą stać się nieoczekiwanymi wartościami, na przykład domyślna Size 0, 0, 0, 0.
Tokeny stylów
Tokeny stylów, zdefiniowane przez atrybuty tokenu StyleSheet, reprezentują zmienne właściwości UI, które mogą być używane w różnych stylach i komponentach; na przykład, może istnieć wspólny kolor dla Frame.BackgroundColor3, TextLabel.TextColor3 i UIStroke.Color. Tokeny są porównywalne do zmiennych CSS.
Chociaż nie są wymagane do stylizacji UI, tokeny są zdecydowanie zalecane dla rozszerzalnego projektowania UI i aktualizacji stylów w czasie. Powinieneś zacząć od stworzenia następujących tokenów, aby zrozumieć, jak wiążą się z innymi aspektami uniwersalnego stylizowania.
Utwórz nowy arkusz stylów tokenów:
- W lewej kolumnie Edytora stylów najedź na Tokeny, kliknij ⊕ i wybierz Nowy arkusz tokenów.
- Zmień nazwę nowego arkusza na TokenSheet.
Z wybranym nowym arkuszem tokenów utwórz kilka tokenów, klikając Dodaj token… w głównym panelu. Te tokeny będą używane w całym tym przewodniku zarówno dla reguł, jak i motywów.
Nazwa tokenu Typ Wartość Złoty Color3 #ffcc00 Magenta Color3 #ff0099 Pomarańczowy Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 number 24 Text32 number 32 
Arkusze projektowe
Arkusz stylów projektowych agreguje reguły stylów i może być powiązany z drzewami DataModel, aby zastosować właściwości stylów do instancji UI. Tylko jeden StyleSheet może być stosowany do danego drzewa, chociaż możesz używać motywów, aby zamieniać powiązane style w całym UI, co zostanie omówione później w tym przewodniku.
Wstępnie wypełniony arkusz projektowy o nazwie StyleSheet jest tworzony za pomocą przycisku Utwórz projekt. Zawiera reguły klas dla wspólnych obiektów UI, takich jak Frame i TextLabel. Zawiera również dwie instancje StyleDerive, które dziedziczą (przyjmują) tokeny i style z podstawowego arkusza stylów do użycia w twoich niestandardowych konfiguracjach stylów.
Gdy masz arkusz projektowy, możesz skonfigurować testowy pojemnik na ekranie do użycia z Edytorem stylów lub pojemnik w grze, jeśli chcesz.
Najedź na StarterGui w Eksploratorze i wstaw ScreenGui.
Potwierdź, że nowa instancja StyleLink pojawia się pod ScreenGui z właściwością StyleSheet ustawioną na arkusz projektowy StyleSheet.
Jeśli StyleLink nie zostanie utworzony, możesz szybko utworzyć jeden, wybierając ScreenGui w Eksploratorze oraz arkusz projektowy StyleSheet w lewej kolumnie Edytora stylów. Następnie kliknij przycisk Wstaw StyleLink w górnej części głównego panelu edytora.
Reguły stylów
Reguły stylów stosują się do każdej instancji, która pasuje do definicji Selector reguły, aby dopasować cechy takie jak nazwa klasy, tag instancji i relacje hierarchiczne. Na wysokim poziomie, dopasowywanie instancji i modyfikacja za pomocą definicji Selector działają poprzez:
- Selekcje klas Roblox, które celują we wszystkich instancjach danej klasy UI, na przykład Frame, ImageLabel, TextButton itp.
- Selekcje stanu GuiObject, które odpowiadają jednej z czterech wartości enum Enum.GuiState, takich jak Hover.
- Wybór nazwy instancji zgodnie z wartością Instance.Name obiektu UI.
Reguła klasy
Selekcja klasy stylu celuje we wszystkie instancje danej klasy UI. Następująca konfiguracja reguły stylizuje wszystkie Frames z jednolitą kolorystyką tła i rozmiarem.
W lewej kolumnie Edytora stylów wybierz Frame w gałęzi UI Elements.
Połącz dwa wcześniej utworzone tokeny stylów z dwoma właściwościami Frame:
Właściwość Token stylu BackgroundColor3 $Magenta Size $SquareL - Kliknij Dodaj właściwość… w głównym panelu i wybierz potrzebną właściwość. Pamiętaj, że możesz wpisać słowa kluczowe, aby szybciej znaleźć właściwości w menu rozwijanym.
- Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz token.
- Kliknij $, które pojawia się w polu wartości i wybierz odpowiedni powiązany token.
Wstaw nowy Frame do ScreenGui, który wcześniej utworzyłeś i połączyłeś. Zdefiniowane style powinny automatycznie się do niego zastosować.
Reguła tagu
Selekcje tagów instancji celują w konkretne obiekty UI otagowane przez CollectionService. Następująca konfiguracja reguły stylizuje TextButton otagowany jako ButtonPrimary z niestandardowym kolorem tła, czcionką i rozmiarem tekstu.
W lewej kolumnie Edytora stylów najedź na arkusz StyleSheet, kliknij przycisk ⋮ i przejdź do Nowy ⟩ Tag.
Zmień nazwę nowej reguły tagu na .ButtonPrimary (zauważ prowadzący .).
Połącz trzy wcześniej utworzone tokeny stylów z trzema właściwościami TextButton:
Właściwość Token stylu BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Kliknij Dodaj właściwość… w głównym panelu i wybierz potrzebną właściwość. Pamiętaj, że możesz wpisać słowa kluczowe, aby szybciej znaleźć właściwości w menu rozwijanym.
- Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz token.
- Kliknij $, które pojawia się w polu wartości i wybierz odpowiedni powiązany token.
Wstaw nowy TextButton do ScreenGui, który wcześniej utworzyłeś i połączyłeś i otaguj go jako ButtonPrimary. Wygodny skrót jest następujący:
- Upewnij się, że nowy TextButton jest wybrany w Eksploratorze.
- Z wybraną regułą tagu .ButtonPrimary w lewej kolumnie Edytora stylów kliknij Zastosuj tag w głównym panelu. Zdefiniowane style powinny automatycznie zastosować się do przycisku.
Modyfikator UI
Selekcje modyfikatorów instancji stosują fantomowe UIComponents, takie jak UICorner lub UIStroke, aby dodatkowo stylizować obiekt. Następująca konfiguracja reguły stylizuje TextLabel z niestandardowym rozmiarem tekstu i zaokrąglonymi rogami.
W lewej kolumnie Edytora stylów wybierz TextLabel w gałęzi UI Elements.
Połącz wcześniej utworzony token stylu z właściwością TextSize:
- Kliknij Dodaj właściwość… w głównym panelu i wybierz właściwość TextSize. Pamiętaj, że możesz wpisać słowa kluczowe, aby szybciej znaleźć właściwości w menu rozwijanym.
- Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz token.
- Kliknij $, które pojawia się w polu wartości i wybierz token $Text32.
Aby skonfigurować i zastosować zaokrąglone rogi do innych elementów, wymagany jest pseudo obiekt. Aby go utworzyć:
W lewej kolumnie najedź na TextLabel, kliknij przycisk ⋮ i przejdź do Nowy ⟩ Pseudo obiekt ⟩ UICorner.
Nowy UICorner pseudo obiekt pojawia się pod elementem TextLabel w lewej kolumnie.
Z wybranym nowym obiektem UICorner w lewej kolumnie połącz wcześniej utworzony token stylu z właściwością CornerRadius:
- Kliknij Dodaj właściwość… w głównym panelu i wybierz właściwość CornerRadius.
- Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz token.
- Kliknij $, które pojawia się w polu wartości i wybierz token $Rad20.
Wstaw nowy TextLabel do ScreenGui, który wcześniej utworzyłeś i połączyłeś. Zdefiniowane style powinny automatycznie zastosować się do niego.
Reguła stanu
Selekcje stanu GuiObject odpowiadają jednej z czterech wartości enum GuiState, takich jak Hover, co pozwala na automatyczne konfigurowanie zmian stylów dla interaktywnych stanów. Następująca konfiguracja reguły tworzy stan najechania z rotacją o -4 stopnie dla wszystkich ImageButtons.
W lewej kolumnie Edytora stylów wybierz ImageButton w gałęzi UI Elements.
Kliknij przycisk ⋮ i przejdź do Nowy ⟩ GuiState ⟩ Hover.
Nowa instancja modyfikatora Hover pojawia się pod elementem ImageButton w lewej kolumnie.
Z nowym modyfikatorem Hover wybranym w lewej kolumnie kliknij Dodaj właściwość… w głównym panelu i wybierz Rotation. Pamiętaj, że możesz wpisać słowa kluczowe, aby szybciej znaleźć właściwości w menu rozwijanym.
Wprowadź -4 w polu wartości właściwości.
Wstaw nowy ImageButton do ScreenGui, który wcześniej utworzyłeś i połączyłeś. Gdy najedziesz na przycisk w widoku, powinien obrócić się o 4 stopnie w lewo.
Zapytania stylów
Zapytania stylów, podobne do zapytania kontenerów i mediów CSS, pozwalają na zastosowanie logiki warunkowej do UI w zależności od rozmiaru kontenera, typu wejścia lub innych czynników. Edytor stylów zapewnia uproszczony proces tworzenia zarówno logiki zapytań (warunków), jak i wynikowych stylów jako zintegrowanego zestawu.
Wbudowane zapytania
Niektóre warunki StyleQuery są bardzo powszechne, takie jak zmiana właściwości w zależności od ViewportDisplaySize. Aby to uprościć, Edytor stylów zawiera wbudowane zapytania, które pozwalają na tworzenie reguł warunkowych bez potrzeby posiadania pseudo lub rzeczywistej instancji StyleQuery; zamiast tego po prostu używasz reguły zapytania z predefiniowanym selektorem, takim jak ViewportDisplaySizeSmall.
Następujące kroki pokazują, jak wygenerować wbudowane zapytania dla TextLabel, aby obsługiwać rozmiary viewportu Small, Medium i Large.
W lewej kolumnie Edytora stylów najedź na TextLabel, kliknij przycisk ⋮ i przejdź do Nowy ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
To tworzy folder Zapytania pod regułą TextLabel, zawierający trzy reguły zapytań:
- @ViewportDisplaySizeLarge — Zdefiniuj właściwości, które mają zastosowanie, gdy viewport jest Large.
- @ViewportDisplaySizeMedium — Zdefiniuj właściwości, które mają zastosowanie, gdy viewport jest Medium.
- @ViewportDisplaySizeSmall — Zdefiniuj właściwości, które mają zastosowanie, gdy viewport jest Small.
Aby zweryfikować zapytania, użyj Emulatora urządzeń, aby przetestować, jak UI reaguje na różne rozdzielczości na trzech różnych urządzeniach:
Zmień Urządzenie w Emulatorze urządzeń, aby zobaczyć, jak tekst zmienia się w czasie rzeczywistym.
Niestandardne zapytanie
Możesz dodać zapytanie stylu do dowolnej istniejącej reguły, aby stworzyć responsywne UI, które dostosowuje się do swojego kontenera. Następująca konfiguracja ustawia TextLabel, aby automatycznie zmieniać swój wygląd tylko wtedy, gdy rozszerza się do szerokości 400 pikseli lub więcej.
W lewej kolumnie Edytora stylów najedź na TextLabel, kliknij przycisk ⋮ i przejdź do Nowy ⟩ StyleQuery ⟩ Custom.
Ta akcja tworzy folder Zapytania pod regułą TextLabel, zawierający dwa powiązane elementy:
- ::StyleQuery reguła pseudo-instancji, w której definiujesz Warunki.
- @StyleQuery reguła, w której definiujesz Właściwości, które mają być stosowane, gdy te warunki są spełnione.
Wybierz regułę nadrzędną TextLabel w głównym panelu i zdefiniuj następujące domyślne właściwości:
Właściwość Wartość BackgroundColor3 $Magenta Text Domyślny tekst Wybierz regułę ::StyleQuery w głównym panelu, kliknij Dodaj warunek… i skonfiguruj następujące:
Warunek Wartość MinSize 400, 0 Zobacz StyleQuery.IsActive jako odniesienie do innych warunków dostępnych przez regułę ::StyleQuery.
Wybierz regułę @StyleQuery w głównym panelu i ustaw właściwości, które powinny być stosowane, gdy zapytanie jest aktywne:
Właściwość Wartość BackgroundColor3 $Gold Text Duży tekst
Aby zweryfikować zapytanie, możesz ręcznie zmienić rozmiar TextLabel w widoku.
Dostosuj jego szerokość, aby zobaczyć, jak styl zmienia się w czasie rzeczywistym.
Gdy szerokość TextLabel jest mniejsza, warunek MinSize nie jest spełniony i etykieta używa swojego domyślnego koloru tła i tekstu.
Chociaż ręczne zmienianie rozmiaru to szybki sposób na sprawdzenie logiki responsywnej, możesz również użyć wbudowanych narzędzi emulacji Studio do dokładniejszego testowania:
- Użyj Emulatora urządzeń, aby przetestować, jak twoje UI reaguje na konkretne rozdzielczości ekranu i warunki ViewportDisplaySize.
- Użyj Emulatora kontrolera, aby zweryfikować logikę PreferredInput, na przykład przełączanie stylów, gdy wykryty jest gamepad.
Przejścia stylów
Przejścia stylów, porównywalne do przejść CSS, pozwalają na tweenowanie wartości właściwości przez określony czas.
Domyślne
Aby tweenować wiele właściwości UI z tymi samymi parametrami, możesz ustawić domyślne przejście, które stosuje się do wszystkich właściwości, chyba że dla konkretnej właściwości wyraźnie ustawione jest inne przejście.
Wybierz TextButton w gałęzi UI Elements, a następnie w głównym panelu dodaj trzy nowe właściwości z następującymi wartościami:
Właściwość Wartość AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
Najedź na wiersz nadrzędny TextButton, kliknij przycisk ⋮ i przejdź do Nowy ⟩ GuiState ⟩ Hover.
Dla nowego modyfikatora Hover dodaj dwie nowe właściwości jako cele dla stanu najechania.
Właściwość Wartość BackgroundColor3 #33AAFF Rotation -5 
Wstaw nowy TextButton do ScreenGui, który wcześniej utworzyłeś i połączyłeś. Gdy najedziesz na przycisk w widoku, powinien on stopniowo rozjaśniać się i obracać o 5 stopni w lewo.
Powiązane z tokenami
Aby ponownie używać zachowań przejścia w wielu regułach, możesz zdefiniować tokeny reprezentujące typ danych TweenInfo. Następująca konfiguracja reguły tworzy stan najechania, aby przejść wszystkie TextButtons do/od -5 stopni rotacji i jaśniejszego koloru tła.
Jeśli jeszcze tego nie zrobiłeś, utwórz arkusz tokenów o nazwie TokenSheet.
Wybierz TextButton w gałęzi UI Elements, a następnie w głównym panelu dodaj trzy nowe właściwości z następującymi wartościami:
Właściwość Wartość AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 Dla każdej nowej właściwości, z wyjątkiem AutoButtonColor, najedź na jej wiersz, kliknij przycisk ⋮ i wybierz Wstaw ⟩ Przejście.
Najedź na nowy wiersz Przejście pod każdą właściwością, kliknij przycisk ⋮ i wybierz Połącz token. Następnie, zamiast wprowadzać statyczną wartość, kliknij $, które pojawia się w polu wartości i wybierz odpowiedni token przejścia.
Przejście właściwości Token przejścia BackgroundColor3 $CubicOut Size $QuadInOut 
Najedź na wiersz nadrzędny TextButton, kliknij przycisk ⋮ i przejdź do Nowy ⟩ GuiState ⟩ Hover.
Dla nowego modyfikatora Hover dodaj dwie nowe właściwości jako cele dla stanu najechania.
Właściwość Wartość BackgroundColor3 #33AAFF Rotation -5 Wstaw nowy TextButton do ScreenGui, który wcześniej utworzyłeś i połączyłeś. Gdy najedziesz na przycisk w widoku, powinien on stopniowo rozjaśniać się i obracać o 5 stopni w lewo.
Motywy stylów
Motywy stylów składają się z zestawów konkretnych tokenów, które można zamieniać, na przykład tokenów kolorów, które definiują "jasny" i "ciemny" motyw.
Tworzenie motywu
Dla rozszerzalności motywy są organizowane w foldery. Chociaż pojedynczy folder może wystarczyć do większości celów, możesz swobodnie organizować motywy w folderach, takich jak "kolory" lub "czcionki", jeśli chcesz.
Utwórz nowy folder motywów:
- W lewej kolumnie Edytora stylów najedź na Motywy, kliknij ⊕ i wybierz Nowy motyw.
- Zmień nazwę nowego elementu Folder na Ogólny.
Utwórz nowy arkusz stylów motywu:
- Najedź na nowy folder Ogólny, kliknij przycisk ⋮ i wybierz Nowy arkusz stylów motywu.
- Zmień jego nazwę na MotywA.
Tokeny motywu
Gdy motyw jest skonstruowany, możesz połączyć jego tokeny z różnymi właściwościami obiektów UI, takimi jak BackgroundColor3 przycisku TextButton. Arkusze motywów muszą używać wspólnego zestawu tokenów, aby działały poprawnie.
Z MotywA wybranym w lewej kolumnie Edytora stylów:
Połącz trzy wcześniej utworzone tokeny stylów z trzema nowymi tokenami motywu:
Token motywu Token stylu BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Kliknij Dodaj token… w głównym panelu i wprowadź nazwę tokenu motywu.
- Kliknij $, które pojawia się w polu wartości i wybierz powiązany token stylu.
W lewej kolumnie Edytora stylów wybierz TextButton w gałęzi UI Elements.
Połącz tokeny motywu z trzema nowymi właściwościami TextButton:
Właściwość Token motywu BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - Kliknij Dodaj właściwość… w głównym panelu i wybierz potrzebną właściwość.
- Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz token.
- Kliknij $, które pojawia się w polu wartości i wybierz odpowiedni token motywu.
Podczas łączenia tokenów motywu, szukaj $[Token] w MotywA w podpowiedzi, aby wiedzieć, że token pochodzi z motywu, a nie z globalnego arkusza tokenów (pamiętaj, że motyw już dziedziczy globalne tokeny).
Duplikacja motywu
Gdy masz motyw ogólnie ustalony, możesz go duplikować i zmienić różne tokeny, aby zdefiniować unikalny styl motywu.
W lewej kolumnie Edytora stylów najedź na motyw MotywA, kliknij przycisk ⋮ i wybierz Duplikuj.
Zmień nazwę skopiowanego motywu na MotywB.
Połącz dwa tokeny motywu z dwoma różnymi tokenami stylów:
Token motywu Token stylu BackColor $Magenta ButtonTextSize $Text24 - Po prawej stronie pola wartości właściwości kliknij przycisk ⋮ i wybierz Odłącz token.
- Kliknij ⋮ ponownie i wybierz Połącz token.
- W polu wartości kliknij $ i wybierz nowy powiązany token stylu.
Zamiana motywów
Gdy masz wiele motywów, możesz przełączać się między nimi za pomocą folderu motywów lub za pomocą skryptu, jak opisano w SetDerives().
W lewej kolumnie Edytora stylów wybierz folder Ogólny w gałęzi Motywy.
W głównym panelu zamień motywy, używając przycisków radiowych.
