Wbudowany edytor stylów jest kompleksowym narzędziem, które pozwala tworzyć, zarządzać i stosować style UI dla doświadczeń Roblox za pomocą kombinacji tokenów , arkuszy projektowych , zasad stylu i motywów .
Dostęp do edytora stylu za pośrednictwem zakładki Interfejs użytkownika (jeśli nie jest widoczny, uzyskaj dostęp z zakładki Dom).
Gdy otworzysz, kliknij przycisk Utwórz projekt , aby wygenerować zestaw podstawowych stylów.
Tworzenie ustawienia stylu za pomocą edytora stylu generuje BaseStyleSheet wewnątrz katalogu Design w ramach ReplicatedStorage .Ta podstawowa tabela synchronizuje określone domyślne poziomy silnika, takie jak domyślny Color3 z domyślnymi, które pochodzą z procesów wstawiania w Studio.Bardzo się zaleca, abyś nie usunął ani nie próbował modyfikować podstawowej tabeli stylów — zamiast tego zbuduj żetony i zasady stylu wokół arkusza projektowego, aby dopasować do celów interfejsu użytkownika.
Ponadto, arkusz stylu StyleSheet jest generowany w folderze Projekt , który zawiera StyleDerive do podstawowego arkusza stylu.Jeśli zdecydujesz się usunąć to StyleDerive , niesformatowane wartości dla GuiObjects mogą stać się nieoczekiwanymi wartościami, na przykład domyślną Size z . .
Żetony stylu
Style tokenów , zdefiniowane za pomocą atrybutów tokena StyleSheet , reprezentują zmienne właściwości interfejsu, które można używać w różnych stylach i komponentach; na przykład, może istnieć wspólny kolor dla Frame.BackgroundColor3 , TextLabel.TextColor3 i UIStroke.Color .Żetony są porównywalne z zmiennymi CSS.
Chociaż nie są wymagane do stylizacji interfejsu, tokeny są mocno zalecane do rozszerzalnego projektowania i aktualizacji stylu interfejsu z czasem.Powinieneś rozpocząć od utworzenia następujących tokenów, aby zrozumieć, w jaki sposób wiążą się z innymi aspektami uniwersalnego stylowania.
Utwórz nową arkusz stylu tokenów:
- W lewej kolumnie edytora stylu przewiń Tokeny , kliknij ⊕ i wybierz Nowy styl arkusza tokenów .
- Zmień nazwę nowej tabeli na TokenSheet.
Po wybraniu nowej karty tokenów utwórz kilka tokenów, klikając Dodaj token… w głównym panelu.Te żetony zostaną wykorzystane w całym tym przewodniku zarówno do zasad jak i motywów.
Nazwa tokena Typ Wartość Gold Color3 #ffcc00 Magenta Color3 #ff0099 Orange Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 number liczba 24 Text32 number liczba 32 
Arkusze projektowe
Opracowanie stylu graficznego łączy zasady stylu i może być powiązane z DataModel drzewami, aby zastosować właściwości stylu do instancji interfejsu.Tylko jeden StyleSheet może mieć zastosowanie do danego drzewa, choć możesz używać motywów do wymiany powiązanych stylów na swojej stronie UI, koncepcję omówioną później w tym przewodniku.
Strona projektowa wypełniona nazwą StyleSheet jest tworzona za pomocą przycisku Utwórz projekt .Zawiera reguły klasy dla powszechnych obiektów interfejsu użytkownika, takich jak Frame i TextLabel.Zawiera również dwie instancje StyleDerive, które pochodzą (odziedziczają) tokeny i style z podstawowej strony stylowej do użycia w swoich niestandardowych konfiguracjach stylizacji.
Gdy masz arkusz projektu, możesz skonfigurować test pojemnik na ekranie do użycia z edytorem stylów lub pojemnik w doświadczeniu, jeśli tego chcesz.
Najedź na StarterGui w Explorerze i włóż ScreenGui.
Potwierdź, że nowa instancja StyleLink pojawia się pod ScreenGui z jej ustawieniem StyleSheet właściwości w arkuszu stylów StyleSheet .
Zasady stylu
Reguły stylu mają zastosowanie do każdej instancji, która spełnia definicję reguły w celu dopasowania cech takich jak nazwa klasy, tag instancji i relacje hierarchiczne.Na wysokim poziomie dopasowanie i modyfikacja instancji za pomocą definicji Selector reguły działa poprzez:
- Selektory klasy Roblox które celują we wszystkie instancje danej klasy interfejsu użytkownika, na przykład , , itp.
- Instancja tag selektorów, które celują w konkretne obiekty interfejsu użytkownika oznaczone poprzez CollectionService.
- Instancja modyfikatory zastosowane za pomocą fantazji UIComponents takie jak UICorner lub UIStroke .
- GuiObjectstan selektory, które odpowiadają jednej z czterech Enum.GuiState wartości enum, takich jak Hover .
- Wybór nazwy instancji zgodnie z wartością obiektu UI Instance.Name.
Zasada klasy
Selektor stylu klasy celuje we wszystkie instancje danej klasy UI.Następujące style konfiguracji zasady ustawiają wszystkie Frames z jednolitą tłem kolorowym i rozmiarem.
W lewej kolumnie edytora stylu wybierz ramę w gałęzi elementów interfejsu .
Połącz dwa wcześniej utworzone tokeny stylu z dwiema właściwościami Frame
Właściwość Stylowy token BackgroundColor3 $Magenta Size $SquareL - Kliknij Dodaj właściwość… w głównym panelu i wybierz niezbędną właściwość.Zauważ, ż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 Token Linkowy .
- Kliknij $, który pojawia się w polu wartości, i wybierz odpowiedni powiązany token.
Włóż nowy do >, który wcześniej stworzyłeś i połączyłeś >. Style, które zdefiniowałeś, powinny automatycznie do niego pasować.
Zasada tagu
Instancja tag selektory docelowe obiekty UI oznaczone poprzez CollectionService.Poniższy styl konfiguracji zasady konfiguruje tag TextButton, oznaczony jako ButtonPrimary, z niestandardowym tłem, czcionką i rozmiarem tekstu.
W lewej kolumnie edytora stylu przewiń nad arkuszem Style Sheet , kliknij przycisk ⋮ i przejdź do Nowego > tagu .
Zmień nazwę nowej reguły tagu .ButtonPrimary (zauważ przód . ).
Połącz trzy wcześniej utworzone tokeny stylu z trzema właściwościami TextButton
Właściwość Stylowy token BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - Kliknij Dodaj właściwość… w głównym panelu i wybierz niezbędną 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 Token Linkowy .
- Kliknij $, który pojawia się w polu wartości, i wybierz odpowiedni powiązany token.
Wprowadź nowy TextButton w ScreenGui wcześniej utworzony i połączony i tag jako ButtonPrimary.Wygodne skróty są następujące:
- Upewnij się, że nowy TextButton jest wybrany w Explorer .
- Z tagiem .ButtonPrimary wybranym w lewej kolumnie edytora stylu, kliknij Zastosuj tag w głównym panelu.Style, które zdefiniowałeś, powinny automatycznie odnosić się do przycisku.
Edytor interfejsu
Selektory modyfikatorów instancji stosują fantom UIComponents takie jak UICorner lub UIStroke do dalszego stylizowania obiektu.Następujący styl konfiguracji zasady ustawia TextLabel z niestandardowym rozmiarem tekstu i zaokrąglonymi krawędziami.
W lewej kolumnie edytora stylu wybierz Etykietę tekstową w gałęzi elementów interfejsu .
Połącz wcześniej utworzony stylistyczny token 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 Token Linkowy .
- Kliknij $, który pojawia się w polu wartości, i wybierz token $Text32.
Wymagana jest fałszywa instancja , aby skonfigurować i zastosować zaokrąglone krawędzie do innych elementów. Aby stworzyć jedną:
W lewej kolumnie przewiń nad Etykietą tekstową , kliknij przycisk ⋮ i przejdź do Nowego ⟩ Pseudo-instancji ⟩ UICorner .
Pojawia się nowa UICorner pseudoinstancja pod elementem TextLabel w lewej kolumnie.
Z nową instancją UICorner wybraną 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 Token Linkowy .
- Kliknij $, który pojawia się w polu wartości, i wybierz token $Rad20.
Włóż nowy do >, który wcześniej stworzyłeś i połączyłeś >. Style, które zdefiniowałeś, powinny automatycznie do niego pasować.
Zasada stanu
GuiObject stan selektory odpowiadają jednej z czterech GuiState wartości enum, takich jak Hover, umożliwiając automatyczne konfigurowanie zmian stylu dla interaktywnych stanów.Poniższe ustawienie zasady tworzy stan przewijania o -4 stopniach rotacji dla wszystkich ImageButtons.
W lewej kolumnie edytora stylu wybierz Przycisk obrazu w gałęzi Elementy interfejsu .
Kliknij przycisk ⋮ i przejdź do Nowe ⟩ GuiState ⟩ Przesuwanie .
Pojawia się nowa instancja modyfikatora stanu Przesuwanie w stanie pod obrazem Przycisk obrazu w lewej kolumnie.
Z nowym modyfikatorem Przesuwanie 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.
Wpisz -4 w polu wartości właściwości.
Włóż nowy do >, który wcześniej stworzyłeś i połączyłeś >.Kiedy przewijesz palcem po przycisku w oknie, powinien się obrócić o 4 stopnie w kierunku przeciwnym do ruchu wskazówek zegara.
Tematy stylu
Styl motywy składa się z zestawów konkretnych tokenów, które można wymienić, na przykład kolorowych tokenów definiujących temat "jasny" i "ciemny".
Tworzenie motywu
Dla rozszerzalności tematy są zorganizowane w foldery.Chociaż pojedyncza karta może wystarczyć do większości celów, możesz dowolnie organizować tematy w kartach takich jak "kolory" lub "czcionki", jeśli tego zapragniesz.
Utwórz nowy folder tematyczny:
- W lewej kolumnie edytora stylu przewiń Motywy , kliknij ⊕ i wybierz Nowy motyw .
- Zmień nazwę nowego Przedmiotu katalogu na Ogólne .
Utwórz nową arkusz stylu tematu:
- Najedź na nową kartę Ogólne , kliknij przycisk ⋮ i wybierz Nowy styl arkusza tematycznego .
- Zmień nazwę na ThemeA .
Żetony tematu
Gdy temat zostanie zbudowany, możesz powiązać jego tokeny z różnymi właściwościami obiektu interfejsu użytkownika, takimi jak BackgroundColor3 z TextButton.Tematyczne arkusze muszą używać wspólnego zestawu tokenów, aby poprawnie działać.
Z TematemA wybranym w lewej kolumnie edytora stylu:
Połącz trzy wcześniej utworzone tokeny stylu z trzema nowymi tokenami tematycznymi:
Token motywu Stylowy token BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - Kliknij Dodaj token... w głównym panelu i wprowadź nazwę żetonu tematu.
- Kliknij $, który pojawia się w polu wartości, i wybierz powiązany token stylu.
W lewej kolumnie edytora stylu wybierz Przycisk tekstowy w gałęzi Elementy interfejsu .
Połącz tokeny tematu 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 niezbędną właściwość.
- Zamiast wprowadzać statyczną wartość, kliknij przycisk ⋮ i wybierz Token Linkowy .
- Kliknij $, który pojawia się w polu wartości, i wybierz odpowiedni token tematu.
Podczas łączenia tokenów tematu poszukaj $[Token] w ThemeA w celu sprawdzenia, czy token pochodzi z tematu i nie z globalnej tabeli tokenów (pamiętaj, że temat już wyodrębnia globalne tokeny).
Duplikacja tematu
Po ustanowieniu ogólnej tematyki możesz powtórzyć ją i zmienić różne tokeny, aby określić unikalny styl tematu.
W lewej kolumnie edytora stylu przewiń temat TematA , kliknij przycisk ⋮ i wybierz Powtórz .
Zmień nazwę powielonej tematyki na ThemeB .
Połącz dwa tokeny tematu z dwoma różnymi tokenami stylu:
Token motywu Stylowy token BackColor $Magenta ButtonTextSize $Text24 - Po prawej stronie pola wartości właściwości kliknij przycisk ⋮ i wybierz Rozłącz token .
- Kliknij ponownie ⋮ i wybierz Token Linkowy .
- W jego polu wartości kliknij $ i wybierz nowy powiązany stylowy token.
Wymiana motywów
Gdy masz kilka tematów, możesz przełączać się między nimi za pomocą katalogu tematu lub za pomocą skryptu, o czym mowa w SetDerives().
W lewej kolumnie edytora stylu wybierz katalog Ogólne w gałęzi Motywy .
W głównym panelu przełączaj między tematami za pomocą przycisków radiowych.
