Stijl Editor

De ingebouwde Stijl Editor is een uitgebreide tool waarmee je UI-stijlen voor Roblox-spellen kunt maken, beheren en toepassen via een combinatie van tokens, ontwerpsheets, stijlregels en thema's.

Toegang tot de Stijl Editor via het UI-tabblad.

Zodra je het opent, klik je op de knop Ontwerp Maken om een basisstijlset te genereren.

Stijl tokens

Stijl tokens, gedefinieerd via attributen van een token StyleSheet, vertegenwoordigen UI-eigenschapsvariabelen die in verschillende stijlen en componenten kunnen worden gebruikt; bijvoorbeeld, er kan een gemeenschappelijke kleur zijn voor een Frame.BackgroundColor3, TextLabel.TextColor3, en UIStroke.Color. Tokens zijn vergelijkbaar met CSS-variabelen.

1. Maak een nieuwe tokenstijlblad:

   1. In de linkerkolom van de Stijl Editor, beweeg de muis over Tokens, klik op de ⊕, en selecteer Nieuwe Token StijlSheet.
   2. Hernoem het nieuwe blad naar TokenSheet.

   

2. Met het nieuwe tokenblad geselecteerd, maak je verschillende tokens door op Voeg een Token toe… in het hoofdvenster te klikken. Deze tokens zullen door deze gids heen worden gebruikt voor zowel regels als thema's.

   

   Token Naam	Type	Waarde
   Goud	Color3	#ffcc00
   Magenta	Color3	#ff0099
   Oranje	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

   

Ontwerpsheets

Een ontwerpstijlblad aggregeert stijlregels en kan worden gekoppeld aan DataModel-bomen om stijl-eigenschappen toe te passen op UI-instanties. Slechts één StyleSheet kan van toepassing zijn op een gegeven boom, hoewel je thema's kunt gebruiken om gerelateerde stijlen in je UI te wisselen, een concept dat later in deze gids wordt behandeld.

Een voorgevuld ontwerpsheet genaamd StyleSheet wordt gemaakt via de knop Ontwerp Maken. Het bevat klasseregels voor veelvoorkomende UI-objecten zoals Frame en TextLabel. Het bevat ook twee StyleDerive-instanties die tokens en stijlen van het basisstijlblad afleiden (erfgen) voor gebruik in je aangepaste stylingconfiguraties.

Zodra je een ontwerpsheet hebt, kun je een test op‑scherm container instellen om te gebruiken met de Stijl Editor, of een in‑game container als dat gewenst is.

1. Beweeg de muis over StarterGui in de Explorer en voeg een ScreenGui in.

2. Bevestig dat er een nieuwe StyleLink-instantie verschijnt onder de ScreenGui met zijn StyleSheet-eigenschap ingesteld op het StyleSheet-ontwerpsheet.

   

   

   Als de StyleLink niet is gemaakt, kun je er snel een maken door de ScreenGui in de Explorer te selecteren, evenals het StyleSheet-ontwerpsheet in de linkerkolom van de Stijl Editor. Klik vervolgens op de knop Voeg StyleLink toe in het rechterbovenste gedeelte van het hoofdvenster van de editor.

Stijlregels

Stijl regels zijn van toepassing op elke instantie die overeenkomt met de definitie van de Selector van de regel om kenmerken zoals de klassenaam, instantie-tag en hiërarchische relaties te matchen. Op hoog niveau werkt het matchen en wijzigen van instanties via de definitie van de Selector door middel van:

• Roblox klasse selectors die alle instanties van een gegeven UI-klasse targeten, bijvoorbeeld Frame, ImageLabel, TextButton, enz.
• Instanties tag selectors die specifieke UI-objecten targeten die zijn getagd via CollectionService.
• Instantie modifiers toegepast via phantom UIComponents zoals UICorner of UIStroke.
• GuiObject staat selectors die overeenkomen met een van de vier Enum.GuiState enum-waarden zoals Hover.
• Instantienaamselectie volgens de waarde van de UI-object Instance.Name.

Klasse regel

Een stijl klasse selector target alle instanties van een gegeven UI-klasse. De volgende regelopstelling stijlt alle Frames met een uniforme achtergrondkleur en grootte.

1. In de linkerkolom van de Stijl Editor, selecteer Frame in de UI Elementen-tak.

   

2. Koppel twee eerder gemaakte stijl tokens aan twee Frame-eigenschappen:

   Eigenschap	Stijl Token
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. Klik op Voeg een Eigenschap toe… in het hoofdvenster en selecteer de benodigde eigenschap. Merk op dat je trefwoorden kunt typen om sneller eigenschappen in het dropdownmenu te vinden.
   2. In plaats van een statische waarde in te voeren, klik je op de ⋮-knop en selecteer je Koppel Token.
   3. Klik op de $ die in het waardeveld verschijnt en selecteer de juiste bijbehorende token.

   

   

3. Voeg een nieuwe Frame in de ScreenGui die je eerder hebt gemaakt en gelinkt. De stijlen die je hebt gedefinieerd, zouden automatisch op deze moeten worden toegepast.

   

Tag regel

Instantie tag selectors targeten specifieke UI-objecten die zijn getagd via CollectionService. De volgende regelopstelling stijlt een TextButton die is getagd als ButtonPrimary met een aangepaste achtergrondkleur, lettertype en tekstgrootte.

1. In de linkerkolom van de Stijl Editor, beweeg de muis over het StyleSheet-blad, klik op de ⋮-knop en navigeer naar Nieuw ⟩ Tag.

   

2. Hernoem de nieuwe tagregel naar .ButtonPrimary (let op de leidende .).

   

3. Koppel drie eerder gemaakte stijl tokens aan drie TextButton-eigenschappen:

   Eigenschap	Stijl Token
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. Klik op Voeg een Eigenschap toe… in het hoofdvenster en selecteer de benodigde eigenschap. Vergeet niet dat je trefwoorden kunt typen om sneller eigenschappen in het dropdownmenu te vinden.
   2. In plaats van een statische waarde in te voeren, klik je op de ⋮-knop en selecteer je Koppel Token.
   3. Klik op de $ die in het waardeveld verschijnt en selecteer de juiste bijbehorende token.

   

   

4. Voeg een nieuwe TextButton in de ScreenGui die je eerder hebt gemaakt en gelinkt en tag deze als ButtonPrimary. Een handige snelkoppeling is als volgt:

   1. Zorg ervoor dat de nieuwe TextButton is geselecteerd in de Explorer.
   2. Met de .ButtonPrimary tagregel geselecteerd in de linkerkolom van de Stijl Editor, klik je op Pas Tag toe in het hoofdvenster. De stijlen die je hebt gedefinieerd, zouden automatisch op de knop moeten worden toegepast.

   

   

UI modifier

Instantie modifier selectors passen phantom UIComponents zoals UICorner of UIStroke toe om een object verder te stylen. De volgende regelopstelling stijlt een TextLabel met een aangepaste tekstgrootte en afgeronde hoeken.

1. In de linkerkolom van de Stijl Editor, selecteer TextLabel in de UI Elementen-tak.

   

2. Koppel een eerder gemaakt stijl token aan de TextSize-eigenschap:

   1. Klik op Voeg een Eigenschap toe… in het hoofdvenster en selecteer de TextSize-eigenschap. Vergeet niet dat je trefwoorden kunt typen om sneller eigenschappen in het dropdownmenu te vinden.
   2. In plaats van een statische waarde in te voeren, klik je op de ⋮-knop en selecteer je Koppel Token.
   3. Klik op de $ die in het waardeveld verschijnt en selecteer de $Text32 token.

   

   

Een pseudo-instantie is vereist om afgeronde hoeken te configureren en toe te passen op andere elementen. Om er een te maken:

1. In de linkerkolom, beweeg de muis over TextLabel, klik op de ⋮-knop en navigeer naar Nieuw ⟩ Pseudo Instantie ⟩ UICorner.

   

   Een nieuwe UICorner pseudo-instantie verschijnt onder het TextLabel-element in de linkerkolom.

   

2. Met de nieuwe UICorner-instantie geselecteerd in de linkerkolom, koppel een eerder gemaakt stijl token aan de CornerRadius-eigenschap:

   1. Klik op Voeg een Eigenschap toe… in het hoofdvenster en selecteer de CornerRadius-eigenschap.
   2. In plaats van een statische waarde in te voeren, klik je op de ⋮-knop en selecteer je Koppel Token.
   3. Klik op de $ die in het waardeveld verschijnt en selecteer de $Rad20 token.

   

3. Voeg een nieuwe TextLabel in de ScreenGui die je eerder hebt gemaakt en gelinkt. De stijlen die je hebt gedefinieerd, zouden automatisch op deze moeten worden toegepast.

   

Staat regel

GuiObject staat selectors komen overeen met een van de vier GuiState enum-waarden zoals Hover, waardoor je automatisch stijlwijzigingen voor interactieve staten kunt configureren. De volgende regelopstelling creëert een hoverstaat van -4 graden rotatie voor alle ImageButtons.

1. In de linkerkolom van de Stijl Editor, selecteer ImageButton in de UI Elementen-tak.

   

2. Klik op de ⋮-knop en navigeer naar Nieuw ⟩ GuiState ⟩ Hover.

   

   Een nieuwe Hover staat modifier-instantie verschijnt onder het ImageButton-element in de linkerkolom.

   

3. Met de nieuwe Hover modifier geselecteerd in de linkerkolom, klik op Voeg een Eigenschap toe… in het hoofdvenster en selecteer Rotation. Vergeet niet dat je trefwoorden kunt typen om sneller eigenschappen in het dropdownmenu te vinden.

4. Voer -4 in het waardeveld van de eigenschap in.

   

5. Voeg een nieuwe ImageButton in de ScreenGui die je eerder hebt gemaakt en gelinkt. Wanneer je over de knop in de viewport beweegt, zou deze 4 graden tegen de klok in moeten draaien.

   

Stijl queries

Stijl queries, vergelijkbaar met CSS-container- en mediaqueries, stellen je in staat om voorwaardelijke logica op je UI toe te passen op basis van de grootte van de container, het invoertype of andere factoren. De Stijl Editor biedt een gestroomlijnde workflow om zowel de querylogica (voorwaarden) als de resulterende stijlen als een uniforme set te creëren.

Ingebouwde queries

Sommige StyleQuery-voorwaarden zijn zeer gebruikelijk, zoals het wijzigen van eigenschappen op basis van de ViewportDisplaySize. Om dit te vereenvoudigen, bevat de Stijl Editor ingebouwde queries waarmee je voorwaardelijke regels kunt maken zonder dat je een pseudo- of echte instantie van een StyleQuery nodig hebt; in plaats daarvan gebruik je eenvoudig een queryregel met een vooraf gedefinieerde selector zoals ViewportDisplaySizeSmall.

De volgende stappen demonstreren hoe je ingebouwde queries voor een TextLabel kunt genereren om om te gaan met Small, Medium, en Large viewportgroottes.

1. In de linkerkolom van de Stijl Editor, beweeg de muis over TextLabel, klik op de ⋮-knop en navigeer naar Nieuw ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.

   

   Dit creëert een Queries-map onder de TextLabel-regel met drie queryregels:

   • @ViewportDisplaySizeLarge — Definieer eigenschappen die van toepassing zijn wanneer de viewport Large is.
   • @ViewportDisplaySizeMedium — Definieer eigenschappen die van toepassing zijn wanneer de viewport Medium is.
   • @ViewportDisplaySizeSmall — Definieer eigenschappen die van toepassing zijn wanneer de viewport Small is.

   

2. Klik op Voeg een Eigenschap toe… onder elke queryregel en stel de specifieke Text-string in die moet worden weergegeven wanneer die query actief is:

   Query Regel	Eigenschap	Waarde
   @ViewportDisplaySizeLarge	Text	Grote Tekst
   @ViewportDisplaySizeMedium	Text	Gemiddelde Tekst
   @ViewportDisplaySizeSmall	Text	Kleine Tekst

3. Om de queries te verifiëren, gebruik de Apparaatemulator om te testen hoe de UI reageert op verschillende resoluties op drie verschillende apparaten:

   1. Voeg een nieuwe TextLabel in de ScreenGui.

   2. Wijzig het Apparaat in de Apparaatemulator om de tekst in realtime te zien veranderen.

      Grootte	Voorbeeld Emulaties
      Large	PS5, PS4, Xbox One
      Medium	Gemiddelde Laptop, HD 720
      Small	iPhone XR, iPad 7e Generatie

Aangepaste query

Je kunt een stijlquery aan elke bestaande regel toevoegen om responsieve UI te creëren die zich aanpast aan zijn container. De volgende opstelling configureert een TextLabel om automatisch zijn uiterlijk te veranderen wanneer het zich uitbreidt tot een breedte van 400 pixels of meer.

1. In de linkerkolom van de Stijl Editor, beweeg de muis over TextLabel, klik op de ⋮-knop en navigeer naar Nieuw ⟩ StyleQuery ⟩ Aangepast.

   

   Deze actie creëert een Queries-map onder de TextLabel-regel met twee gekoppelde items:

   • ::StyleQuery pseudo-instantie regel waar je de Voorwaarden definieert.
   • @StyleQuery regel waar je de Eigenschappen definieert die moeten worden toegepast wanneer aan die voorwaarden is voldaan.

   

2. Selecteer de bovenliggende TextLabel-regel in het hoofdvenster en definieer de volgende standaard eigenschappen:

   Eigenschap	Waarde
   BackgroundColor3	$Magenta
   Text	Standaard Tekst

3. Selecteer de ::StyleQuery-regel in het hoofdvenster, klik op Voeg een Voorwaarde toe…, en configureer het volgende:

   Voorwaarde	Waarde
   MinSize	400, 0

   Zie StyleQuery.IsActive als referentie voor andere voorwaarden die beschikbaar zijn via de ::StyleQuery-regel.

4. Selecteer de @StyleQuery-regel in het hoofdvenster en stel de eigenschappen in die moeten worden toegepast wanneer de query actief is:

   Eigenschap	Waarde
   BackgroundColor3	$Gold
   Text	Grote Tekst

Om de query te verifiëren, kun je handmatig een TextLabel in de viewport aanpassen.

1. Voeg een nieuwe TextLabel in de ScreenGui.

2. Pas de breedte aan om de stijl in realtime te zien wisselen.

   0–400 Pixel BreedteMeer dan 400 Pixel Breedte

   Terwijl de breedte van de TextLabel kleiner is, wordt de MinSize-voorwaarde niet voldaan en gebruikt het label zijn standaard achtergrondkleur en tekst.

   

Stijl overgangen

Stijl overgangen, vergelijkbaar met CSS-overgangen, laten je eigenschapswaarden over een bepaalde duur tweenen.

Standaard

Om veel UI-eigenschappen met dezelfde parameters te tweenen, kun je een standaardovergang instellen die van toepassing is op alle eigenschappen, tenzij een andere overgang expliciet is ingesteld voor een specifieke eigenschap.

1. Selecteer TextButton in de UI Elementen-tak en voeg vervolgens in het hoofdvenster drie nieuwe eigenschappen toe met de volgende waarden:

   Eigenschap	Waarde
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. Beweeg de muis over de bovenliggende TextButton-rij, klik op de ⋮-knop en navigeer naar Voeg toe ⟩ Overgang.

   

   Een standaardovergang van 1, Quad, Out, 0 wordt direct onder de TextButton-regel ingevoegd, wat een overgang van 1 seconde aangeeft, easing-stijl Quad, easing-richting Out, en geen vertraging.

   

3. Beweeg de muis over de bovenliggende TextButton-rij, klik op de ⋮-knop en navigeer naar Nieuw ⟩ GuiState ⟩ Hover.

   

4. Voor de nieuwe Hover-modifier, voeg je twee nieuwe eigenschappen toe als de doelen voor de hoverstaat.

   Eigenschap	Waarde
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. Voeg een nieuwe TextButton in de ScreenGui die je eerder hebt gemaakt en gelinkt. Wanneer je over de knop in de viewport beweegt, zou deze geleidelijk moeten oplichten en 5 graden tegen de klok in moeten draaien.

   

Token-gekoppeld

Om overgangsgedragingen over meerdere regels te hergebruiken, kun je tokens definiëren die het TweenInfo-gegevenstype vertegenwoordigen. De volgende regelopstelling creëert een hoverstaat om alle TextButtons naar/van -5 graden rotatie en een lichtere achtergrondkleur te laten overgaan.

1. Als je dat nog niet hebt gedaan, maak een tokenstijlblad genaamd TokenSheet.

   

2. Met het nieuwe tokenblad geselecteerd, maak je twee nieuwe tokens door op Voeg een Token toe… in het hoofdvenster te klikken.

   Token Naam	Type	Tween Parameters
   CubicOut	TweenInfo	Duur = 1.25 EasingStyle = Cubic EasingDirection = Out Vertraging = 0
   QuadInOut	TweenInfo	Duur = 0.5 EasingStyle = Quad EasingDirection = InOut Vertraging = 0

   

3. Selecteer TextButton in de UI Elementen-tak en voeg vervolgens in het hoofdvenster drie nieuwe eigenschappen toe met de volgende waarden:

   Eigenschap	Waarde
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. Voor elke nieuwe eigenschap, behalve AutoButtonColor, beweeg je de muis over de rij, klik je op de ⋮-knop en selecteer je Voeg toe ⟩ Overgang.

   

5. Beweeg de muis over de nieuwe Overgang-rij onder elke eigenschap, klik op de ⋮-knop en selecteer Koppel Token. Klik vervolgens in plaats van een statische waarde in te voeren op de $ die in het waardeveld verschijnt en selecteer de juiste overgangstoken.

   

   Eigenschap Overgang	Overgang Token
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. Beweeg de muis over de bovenliggende TextButton-rij, klik op de ⋮-knop en navigeer naar Nieuw ⟩ GuiState ⟩ Hover.

   

7. Voor de nieuwe Hover-modifier, voeg je twee nieuwe eigenschappen toe als de doelen voor de hoverstaat.

   Eigenschap	Waarde
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. Voeg een nieuwe TextButton in de ScreenGui die je eerder hebt gemaakt en gelinkt. Wanneer je over de knop in de viewport beweegt, zou deze geleidelijk moeten oplichten en 5 graden tegen de klok in moeten draaien.

   

Stijl thema's

Stijl thema's bestaan uit sets van specifieke tokens die kunnen worden gewisseld, bijvoorbeeld kleur tokens die een "lichte" en "donkere" thema definiëren.

Thema creatie

Voor uitbreidbaarheid zijn thema's georganiseerd in mappen. Terwijl een enkele map voldoende kan zijn voor de meeste doeleinden, ben je vrij om thema's in mappen zoals "kleuren" of "lettertypen" te organiseren als dat gewenst is.

1. Maak een nieuwe themamap:

   1. In de linkerkolom van de Stijl Editor, beweeg de muis over Thema's, klik op de ⊕, en selecteer Nieuwe Thema.
   2. Hernoem het nieuwe Map-item naar Algemeen.

   

2. Maak een nieuw themastijlblad:

   1. Beweeg de muis over de nieuwe Algemeen-map, klik op de ⋮-knop en selecteer Nieuwe Thema StijlSheet.
   2. Hernoem het naar ThemaA.

   

Thema tokens

Zodra een thema is geconstrueerd, kun je de tokens koppelen aan verschillende UI-objecteigenschappen zoals de BackgroundColor3 van een TextButton. Themasheets moeten een gemeenschappelijke set tokens gebruiken om correct te functioneren.

Met ThemaA geselecteerd in de linkerkolom van de Stijl Editor:

1. Koppel drie eerder gemaakte stijl tokens aan drie nieuwe thematokens:

   Thema Token	Stijl Token
   AchtergrondKleur	$Gold
   KnopLettertype	$Oswald
   KnopTekstGrootte	$Text32

   1. Klik op Voeg een Token toe… in het hoofdvenster en voer de naam van het thematoken in.
   2. Klik op de $ die in het waardeveld verschijnt en selecteer de bijbehorende stijl token.

   

2. In de linkerkolom van de Stijl Editor, selecteer TextButton in de UI Elementen-tak.

   

3. Koppel de tokens van het thema aan drie nieuwe TextButton-eigenschappen:

   Eigenschap	Thema Token
   BackgroundColor3	$AchtergrondKleur
   FontFace	$KnopLettertype
   TextSize	$KnopTekstGrootte

   1. Klik op Voeg een Eigenschap toe… in het hoofdvenster en selecteer de benodigde eigenschap.
   2. In plaats van een statische waarde in te voeren, klik je op de ⋮-knop en selecteer je Koppel Token.
   3. Klik op de $ die in het waardeveld verschijnt en selecteer de juiste thematoken.

   

   Wanneer je de tokens van het thema koppelt, zoek dan naar $[Token] in ThemaA in de hover-over om te weten dat de token afkomstig is van het thema en niet van het globale tokenblad (vergeet niet dat het thema al de globale tokens afleidt).

   

Thema duplicatie

Zodra je een thema algemeen hebt vastgesteld, kun je het dupliceren en verschillende tokens wijzigen om een unieke themastijl te definiëren.

1. In de linkerkolom van de Stijl Editor, beweeg de muis over het ThemaA-thema, klik op de ⋮-knop en selecteer Dupliceer.

2. Hernoem het gedupliceerde thema naar ThemaB.

   

3. Koppel twee van de thematokens aan twee verschillende stijl tokens:

   Thema Token	Stijl Token
   AchtergrondKleur	$Magenta
   KnopTekstGrootte	$Text24

   1. Klik rechts van het waardeveld van de eigenschap op de ⋮-knop en selecteer Koppel Token los.
   2. Klik opnieuw op ⋮ en selecteer Koppel Token.
   3. Klik in het waardeveld op de $ en selecteer de nieuwe bijbehorende stijl token.

   

Thema wisselen

Zodra je meerdere thema's hebt, kun je tussen hen wisselen via de themamap, of via een script zoals uiteengezet in SetDerives().

1. In de linkerkolom van de Stijl Editor, selecteer de Algemeen-map in de Thema's-tak.

2. In het hoofdvenster, wissel tussen de thema's met de keuzerondjes.

   ThemaAThemaB