Edytor Stylów

Wbudowany Edytor Stylów to kompleksowe narzędzie, które pozwala na tworzenie, zarządzanie i stosowanie stylów UI w grach Roblox za pomocą kombinacji tokenów, arkuszy projektowych, reguł stylów i motywów.

Uzyskaj dostęp do Edytora Stylów za pomocą zakładki UI.

Po otwarciu kliknij przycisk Utwórz Projekt, aby wygenerować zestaw podstawowych stylów.

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.

1. Utwórz nowy arkusz stylów tokenów:

   1. W lewym kolumnie Edytora Stylów najedź na Tokeny, kliknij ⊕, a następnie wybierz Nowy Arkusz Tokenów.
   2. Zmień nazwę nowego arkusza na TokenSheet.

   

2. Po wybraniu nowego arkusza tokenów utwórz kilka tokenów, klikając Dodaj Token… w głównym panelu. Te tokeny będą używane w tym przewodniku zarówno dla reguł, jak i motywów.

   

   Nazwa tokena	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 stylu projektowego 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ć zastosowany do danego drzewa, chociaż można używać motywów, aby zamieniać powiązane style w 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ą tokeny i style z arkusza bazowego dla zastosowania w twoich własnych ustawieniach stylów.

Po posiadaniu arkusza projektowego możesz skonfigurować testowy kontener na ekranie, którego chcesz użyć z Edytorem Stylów, lub kontener w doświadczeniu, jeśli zajdzie taka potrzeba.

1. Najedź na StarterGui w Eksploratorze i wstaw ScreenGui.

2. Potwierdź, że nowa instancja StyleLink pojawia się pod ScreenGui z wartością StyleSheet ustawioną na arkusz projektowy StyleSheet.

   

   

   Jeśli StyleLink nie został stworzony, możesz szybko stworzyć nowy, wybierając ScreenGui w Eksploratorze oraz arkusz projektowy StyleSheet w lewej kolumnie Edytora Stylów. Następnie kliknij przycisk Wstaw StyleLink w górnej prawej sekcji głównego panelu edytora.

Reguły stylów

Reguły stylów mają zastosowanie do każdej instancji, która pasuje do definicji Selector reguły, aby dopasować cechy takie jak nazwa klasy, tag instancji oraz relacje hierarchiczne. Na ogólnym poziomie, dopasowywanie i modyfikowanie instancji za pomocą definicji Selector działa poprzez:

• Selekcje klasy Roblox, które mają na celu wszystkie instancje danej klasy UI, na przykład Frame, ImageLabel, TextButton itd.
• Selekcje tagów instancji, które mają na celu konkretne obiekty UI otagowane przez CollectionService.
• Modyfikatory instancji (ui-modifier) stosowane poprzez fantomowe UIComponents, takie jak UICorner lub UIStroke.
• Selekcje stanu GuiObject, które odpowiadają jednemu z czterech wartości enum Enum.GuiState, takich jak Hover.
• Selekcja nazwy instancji zgodnie z wartością Instance.Name obiektu UI.

Reguła klasy

Selektor klasy stylu class ma na celu wszystkie instancje danej klasy UI. Następująca konfiguracja reguły stylów ustawia wszystkie Frames z jednolitą kolorystyką tła i rozmiarem.

1. W lewym kolumnie Edytora Stylów wybierz Frame w gałęzi UI Elements.

   

2. 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

   1. 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 rozwijanym menu.
   2. Zamiast wpisywać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz z Tokenem.
   3. Kliknij $, które pojawia się w polu wartości i wybierz odpowiedni token powiązany.

   

   

3. Wstaw nowy Frame do ScreenGui, który wcześniej utworzyłeś i powiązałeś. Zdefiniowane style powinny automatycznie się do niego zastosować.

   

Reguła tagu

Selektory tagów instancji tag mają na celu konkretne obiekty UI otagowane przez CollectionService. Następująca konfiguracja reguły ustawia styl dla TextButton otagowanego jako ButtonPrimary z niestandardowym kolorem tła, czcionką i rozmiarem tekstu.

1. W lewym kolumnie Edytora Stylów najedź na arkusz StyleSheet, kliknij przycisk ⋮ i przejdź do Nowy ⟩ Tag.

   

2. Zmień nazwę nowej reguły tagu na .ButtonPrimary (wprowadzając .).

   

3. 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

   1. 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 rozwijanym menu.
   2. Zamiast wpisywać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz z Tokenem.
   3. Kliknij $, które pojawia się w polu wartości i wybierz odpowiedni token powiązany.

   

   

4. Wstaw nowy TextButton do ScreenGui, który wcześniej stworzono i powiązano i otaguj go jako ButtonPrimary. Wygodny skrót jest następujący:

   1. Upewnij się, że nowy TextButton jest wybrany w Eksploratorze.
   2. Z wybraną regułą .ButtonPrimary w lewej kolumnie Edytora Stylów kliknij Zastosuj Tag w głównym panelu. Zdefiniowane style powinny automatycznie zostać zastosowane do przycisku.

   

   

Modyfikator UI

Selektory modyfikatorów instancji stosują fantomowe UIComponents, takie jak UICorner lub UIStroke, aby dalej stylizować obiekt. Następująca konfiguracja reguły ustawia styl dla TextLabel z niestandardowym rozmiarem tekstu i zaokrąglonymi rogami.

1. W lewym kolumnie Edytora Stylów wybierz TextLabel w gałęzi UI Elements.

   

2. Połącz wcześniej utworzony token stylu z właściwością TextSize:

   1. 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 rozwijanym menu.
   2. Zamiast wpisywać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz z Tokenem.
   3. Kliknij $, które pojawia się w polu wartości i wybierz token $Text32.

   

   

Aby skonfigurować i zastosować zaokrąglone rogi do innych elementów, potrzebny jest pseudo obiekt. Aby go stworzyć:

1. W lewym kolumnie najedź na TextLabel, kliknij przycisk ⋮ i przejdź do Nowy ⟩ Pseudo Instancja ⟩ UICorner.

   

   Nowa pseudo instancja UICorner pojawia się w lewej kolumnie pod elementem TextLabel.

   

2. Mając wybraną nową instancję UICorner w lewej kolumnie, połącz wcześniej utworzony token stylu z właściwością CornerRadius:

   1. Kliknij Dodaj Właściwość… w głównym panelu i wybierz właściwość CornerRadius.
   2. Zamiast wpisywać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz z Tokenem.
   3. Kliknij $, które pojawia się w polu wartości i wybierz token $Rad20.

   

3. Wstaw nowy TextLabel do ScreenGui, który wcześniej stworzono i powiązano. Stylizacje, które zdefiniowałeś, powinny automatycznie się do niego zastosować.

   

Reguła stanu

Selektory 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 o rotacji -4 stopnie dla wszystkich ImageButtons.

1. W lewym kolumnie Edytora Stylów wybierz ImageButton w gałęzi UI Elements.

   

2. Kliknij przycisk ⋮ i przejdź do Nowy ⟩ GuiState ⟩ Hover.

   

   Nowa instancja modyfikatora Hover pojawia się pod elementem ImageButton w lewej kolumnie.

   

3. Z nowym modyfikatorem Hover zaznaczonym 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 rozwijanym menu.

4. Wpisz -4 w polu wartości.

   

5. Wstaw nowy ImageButton do ScreenGui, który wcześniej stworzono i powiązano. Kiedy najedziesz myszką na przycisk w widoku, powinien on obrócić się o 4 stopnie w lewo.

   

Zapytania stylów

Zapytania stylów, podobne do zapytania o pojemniki i media CSS, pozwalają na zastosowanie logiki warunkowej do UI w zależności od rozmiaru pojemnika, typu wejścia lub innych czynników. Edytor Stylów zapewnia uproszczony przepływ pracy do 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 faktycznej instancji StyleQuery; zamiast tego, używasz po prostu reguły zapytania z wcześniej zdefiniowanym selektorem, takim jak ViewportDisplaySizeSmall.

Poniższe kroki demonstrują, jak wygenerować wbudowane zapytania dla TextLabel, aby obsłużyć rozmiary widoków Small, Medium i Large.

1. W lewym 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 widok ma Large.
   • @ViewportDisplaySizeMedium — Zdefiniuj właściwości, które mają zastosowanie, gdy widok ma Medium.
   • @ViewportDisplaySizeSmall — Zdefiniuj właściwości, które mają zastosowanie, gdy widok ma Small.

   

2. Kliknij Dodaj Właściwość… pod każdą regułą zapytania i ustaw konkretne łańcuchi Text, które powinny być wyświetlane, gdy to zapytanie jest aktywne:

   Reguła zapytania	Właściwość	Wartość
   @ViewportDisplaySizeLarge	Text	Duży Tekst
   @ViewportDisplaySizeMedium	Text	Średni Tekst
   @ViewportDisplaySizeSmall	Text	Mały Tekst

3. Aby zweryfikować zapytania, użyj Emulatora Urządzeń, aby przetestować, jak UI reaguje na różne rozdzielczości na trzech różnych urządzeniach:

   1. Wstaw nowy TextLabel do ScreenGui.

   2. Zmień Urządzenie w Emulatorze Urządzeń, aby zobaczyć tekst zmieniający się w czasie rzeczywistym.

      Rozmiar	Przykładowe Emulacje
      Large	PS5, PS4, Xbox One
      Medium	Średni Laptop, HD 720
      Small	iPhone XR, iPad 7. generacji

Niestandardne zapytanie

Możesz dodać zapytanie stylu do każdej istniejącej reguły, aby stworzyć responsywne UI, które dostosowuje się do swojego pojemnika. Poniższa konfiguracja ustawia TextLabel, aby automatycznie zmieniać swój wygląd tylko wtedy, gdy rozszerza się do szerokości 400 pikseli lub więcej.

1. W lewym 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, gdzie definiujesz Warunki.
   • @StyleQuery reguła, gdzie definiujesz Właściwości, które mają zastosowanie, gdy te warunki są spełnione.

   

2. Wybierz regułę główną 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

3. Wybierz regułę ::StyleQuery w głównym panelu, kliknij Dodaj Warunek…, a następnie skonfiguruj:

   Warunek	Wartość
   MinSize	400, 0

   Zobacz StyleQuery.IsActive jako odniesienie do innych warunków dostępnych za pośrednictwem reguły ::StyleQuery.

4. Wybierz regułę @StyleQuery w głównym panelu i ustaw właściwości, które powinny mieć zastosowanie, 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.

1. Wstaw nowy TextLabel do ScreenGui.

2. Dostosuj jego szerokość, aby zobaczyć, jak styl zmienia się w czasie rzeczywistym.

   0–400 Pikseli SzerokościPowyżej 400 Pikseli Szerokości

   Gdy szerokość TextLabel jest mniejsza, warunek MinSize nie jest spełniony i etykieta używa domyślnego koloru tła i tekstu.

   

Przejścia stylów

Przejścia stylów, porównywalne do przejść CSS, pozwalają na płynne zmienianie wartości właściwości w określonym czasie.

Domyślne

Aby płynnie zmieniać wiele właściwości UI z tymi samymi parametrami, możesz ustawić domyślne przejście, które ma zastosowanie do wszystkich właściwości, chyba że inne przejście jest wyraźnie ustawione dla konkretnej właściwości.

1. 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

   

2. Najedź na wiersz główny TextButton, kliknij przycisk ⋮ i przejdź do Wstaw ⟩ Przejście.

   

   Domyślne przejście wynoszące 1, Quad, Out, 0 wstawia się bezpośrednio pod regułą TextButton, wskazując przejście trwające 1 sekundę, z wygładzaniem stylu Quad, kierunek wygładzania Out i bez opóźnienia.

   

3. Najedź na wiersz główny TextButton, kliknij przycisk ⋮ i przejdź do Nowy ⟩ GuiState ⟩ Hover.

   

4. Dla nowego modyfikatora Hover dodaj dwie nowe właściwości jako cele dla stanu najechania.

   Właściwość	Wartość
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Wstaw nowy TextButton do ScreenGui, który wcześniej stworzono i powiązano. Kiedy najedziesz myszką na przycisk w widoku, powinien on stopniowo jaśnieć i obracać się o 5 stopni w lewo.

   

Połączone z tokenami

Aby ponownie wykorzystać zachowania przejścia w różnych 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.

1. Jeśli jeszcze tego nie zrobiłeś, utwórz arkusz tokenów o nazwie TokenSheet.

   

2. Mając wybrany nowy arkusz tokenów, stwórz dwa nowe tokeny, klikając Dodaj Token… w głównym panelu.

   Nazwa Tokena	Typ	Parametry Tween
   CubicOut	TweenInfo	Duration = 1.25 EasingStyle = Cubic EasingDirection = Out Delay = 0
   QuadInOut	TweenInfo	Duration = 0.5 EasingStyle = Quad EasingDirection = InOut Delay = 0

   

3. 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

   

4. Dla każdej nowej właściwości, z wyjątkiem AutoButtonColor, najedź na jej wiersz, kliknij przycisk ⋮ i wybierz Wstaw ⟩ Przejście.

   

5. Najedź na nowy wiersz Przejście pod każdą właściwością, kliknij przycisk ⋮, a następnie wybierz Połącz z Tokenem. 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

   

6. Najedź na wiersz główny TextButton, kliknij przycisk ⋮ i przejdź do Nowy ⟩ GuiState ⟩ Hover.

   

7. Dla nowego modyfikatora Hover dodaj dwie nowe właściwości jako cele dla stanu najechania.

   Właściwość	Wartość
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Wstaw nowy TextButton do ScreenGui, który wcześniej stworzono i powiązano. Kiedy najedziesz myszką na przycisk w widoku, powinien on stopniowo jaśnieć i obracać się o 5 stopni w lewo.

   

Motywy stylów

Motywy stylów składają się z zestawów specyficznych tokenów, które mogą być zamieniane, na przykład tokeny kolorystyczne, które definiują "jasny" i "ciemny" motyw.

Tworzenie motywów

Dla elastyczności motywy są organizowane w foldery. Chociaż jeden folder może wystarczyć do większości celów, możesz dowolnie organizować motywy w folderach, takich jak "kolory" lub "czcionki".

1. Utwórz nowy folder motywów:

   1. W lewym kolumnie Edytora Stylów najedź na Motywy, kliknij ⊕, a następnie wybierz Nowy Motyw.
   2. Zmień nazwę nowego elementu Folder na Ogólne.

   

2. Utwórz nowy arkusz stylów motywu:

   1. Najedź na nowy folder Ogólne, kliknij przycisk ⋮ oraz wybierz Nowy Arkusz Stylów Motywu.
   2. Zmień jego nazwę na MotywA.

   

Tokeny motywów

Gdy motyw jest skonstruowany, możesz powiązać jego tokeny z różnymi właściwościami obiektów UI, takimi jak BackgroundColor3 w TextButton. Arkusze motywów muszą używać wspólnego zestawu tokenów, aby działały prawidłowo.

Gdy MotywA jest zaznaczony w lewej kolumnie Edytora Stylów:

1. Połącz trzy wcześniej utworzone tokeny stylów z trzema nowymi tokenami motywu:

   Token Motywu	Token Stylu
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. Kliknij Dodaj Token… w głównym panelu i wprowadź nazwę tokena motywu.
   2. Kliknij $, które pojawia się w polu wartości i wybierz powiązany token stylu.

   

2. W lewej kolumnie Edytora Stylów wybierz TextButton w gałęzi UI Elements.

   

3. Połącz tokeny motywu z trzema nowymi właściwościami TextButton:

   Właściwość	Token Motywu
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. Kliknij Dodaj Właściwość… w głównym panelu i wybierz potrzebną właściwość.
   2. Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Połącz z Tokenem.
   3. Kliknij $, które pojawia się w polu wartości i wybierz odpowiedni token motywu.

   

   Podczas łączenia tokenów motywu, szukaj $[Token] w MotywieA w nadjeździe, aby wiedzieć, że token pochodzi z motywu, a nie z globalnego arkusza tokenów (pamiętaj, że motyw już dziedziczy globalne tokeny).

   

Duplikacja motywów

Gdy masz ogólnie ustalony motyw, możesz go duplikować i zmienić różne tokeny, aby zdefiniować unikalny styl motywu.

1. W lewej kolumnie Edytora Stylów najedź na motyw MotywA, kliknij przycisk ⋮ i wybierz Duplikuj.

2. Zmień nazwę skopiowanego motywu na MotywB.

   

3. Połącz dwa tokeny motywu z dwoma różnymi tokenami stylów:

   Token Motywu	Token Stylu
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. Kliknij przycisk ⋮ obok pola wartości właściwości i wybierz Odłącz Token.
   2. Kliknij ponownie ⋮ i wybierz Połącz Token.
   3. W polu wartości kliknij $ i wybierz nowy powiązany token stylu.

   

Zamiana motywów

Po posiadaniu wielu motywów możesz przełączać się między nimi za pomocą folderu motywów lub za pomocą skryptu, jak opisano w SetDerives().

1. W lewej kolumnie Edytora Stylów wybierz folder Ogólne w gałęzi Motywy.

2. W głównym panelu przełączaj między motywami, używając przycisków radiowych.

   MotywAMotywB