UI-uiterlijk modifiers

Door gebruik te maken van uiterlijk modifiers kun je het uiterlijk van je GuiObjects verder aanpassen.

• Pas een verloop toe op de achtergrond van een object.
• Pas een omtrek toe op tekst of een rand.
• Stel afgeronde hoeken in voor een object.
• Verhoog de padding tussen de randen van een object.
• Voeg een schaduw toe achter een object.

Verloop

Het UIGradient object past een kleur- en transparantieverloop toe op zijn bovenliggende GuiObject.

Je kunt het verloop configureren door:

• De kleuren in te stellen via een ColorSequence in de Color eigenschap van het verloop.
• De transparantie in te stellen via een NumberSequence in de Transparency eigenschap van het verloop.
• Het type van het verloop te kiezen via de Type eigenschap.
• Het startpunt van het verloop te kiezen (binnen of buiten de grenzen van de bovenliggende) via de Offset eigenschap.
• De hoek van het verloop te kiezen via de Rotation eigenschap.
• De schaal van het verloop te kiezen via de Scale eigenschap.
• Het gedrag van de randmonsters van het verloop te kiezen via de TileMode eigenschap.

Kleurvolgorde

Om de kleurvolgorde van een verloop in te stellen:

1. Selecteer het UIGradient in het Explorer venster.

2. Klik in het Properties venster in het veld van de Color eigenschap, en klik vervolgens op de ⋯ knop rechts van het invoerveld.

   

3. Elke driehoek op de onderste as van de kleurvolgorde is een sleutelpunt dat de kleurwaarde op dat punt bepaalt.

   

   1. Klik op een sleutelpunt in de kleurvolgorde om het te selecteren of opnieuw te positioneren, of voeg een ander sleutelpunt toe door ergens op de grafiek te klikken.
   2. Klik op het kleine vierkantje naast Kleur om het Kleuren pop-upvenster te openen, en selecteer vervolgens de gewenste kleur voor het sleutelpunt.
   3. Herhaal deze stappen indien nodig om kleuren over de grafiek toe te voegen/aan te passen.

Transparantie

Om de transparantie van een verloop over zijn bereik aan te passen:

1. Selecteer het UIGradient in het Explorer venster.

2. Klik in het Properties venster in het veld van de Transparency eigenschap, en klik vervolgens op de ⋯ knop rechts van het invoerveld.

   

3. Elk vierkant over de getalvolgorde grafiek is een sleutelpunt dat de transparantiewaarde op dat punt bepaalt.

   

   1. Klik op een sleutelpunt in de getalvolgorde om het te selecteren of opnieuw te positioneren, of voeg een ander sleutelpunt toe door ergens op de grafiek te klikken.
   2. Voer een specifieke tijd/waarde combinatie in via de Tijd en Waarde invoervelden.
   3. Herhaal deze stappen indien nodig om transparantieniveaus over de grafiek toe te voegen/aan te passen.

Type

De Type eigenschap van een verloop stelt het type in uit Linear, Radial, Elliptical, of Conical.

• Linear — De kleur/transparantievolgorde verandert in een rechte lijn over het element. De richting wordt gecontroleerd door zijn rotatie en de positie door zijn offset. Dit is de standaardinstelling.

• Radial — De kleur/transparantievolgorde straalt naar buiten vanuit het midden van het element, optioneel verschoven door Offset. De straal wordt gedefinieerd door het gemiddelde van de breedte en hoogte van het element gedeeld door twee, effectief $\text{(breedte+hoogte)/4}$. Rotation heeft geen effect op een radiaal verloop.

• Elliptical — De kleur/transparantievolgorde straalt naar buiten vanuit het midden van het element in een ellips, optioneel verschoven door Offset. De horizontale en verticale stralen van de ellips zijn de helft van de breedte en hoogte van het element, zodat de ellips in de grenzen van het element past. Rotation roteert de assen van de ellips.

• Conical — De kleur/transparantievolgorde draait met de klok mee rond het midden van het element, optioneel verschoven door Offset. Rotation controleert de start- en eindhoek van de draaiing. Standaard draait dit van 0 tot 360 graden, maar Scale waarden minder dan 1 kunnen die hoek verkleinen.

Offset en rotatie

De Offset en Rotation eigenschappen laten je de controlepunten van het verloop en de hoek aanpassen. Zoals geïllustreerd in de volgende diagrammen, is Offset gebaseerd op een percentage van de breedte of hoogte van de bovenliggende, en zowel positieve als negatieve waarden zijn geldig.

Evenzo, wanneer je het verloop roteert, draaien de controlepunten ook:

Schaal

De Scale van een verloop vermenigvuldigt de omvang van het verloop, en controleert hoeveel van de kleur/transparantievolgorde zichtbaar is binnen het element.

• Wanneer Scale minder dan 1 is, beslaat het verloop minder dan de volledige omvang. De resterende kleur/transparantie wordt ingevuld volgens de TileMode eigenschap.

• Wanneer Scale groter dan 1 is, beslaat het verloop meer dan de volledige omvang en is slechts een deel van de kleur/transparantie zichtbaar.

• Voor Elliptical verlopen, beïnvloedt Scale beide stralen van de ellips.

Tegelmodus

De TileMode eigenschap stelt in hoe het verloop herhaalt wanneer de volledige volgorde de bovenliggende niet volledig bedekt.

• Clamp — Standaardmodus waarbij de kleur/transparantie waarden aan het begin en einde van de volgorde oneindig uitbreiden, zodat de startwaarden elk gebied vóór het verloop vullen en de eindwaarden elk gebied erna vullen.

• Repeat — Het verloop herhaalt door de kleur/transparantie volgorde naadloos van einde naar begin te wikkelen. Dit kan een zichtbare naad produceren als de eerste en laatste kleur/transparantie waarden in de volgorde verschillen.

• Mirror — Het verloop reflecteert bij elke grens zodat de kleur/transparantie volgorde ping‑pongt. Dit produceert een soepele herhaling zonder naad, aangezien de richting omkeert bij elke tegelrand.

Omtrek

De UIStroke instantie past een omtrek toe op tekst of een rand. Belangrijke kenmerken zijn:

• Aanpasbare kleur en dikte van de omtrek.
• Mogelijkheid om de omtrek transparantie onafhankelijk van de transparantie van de bovenliggende in te stellen.
• Aanpasbare positie en/of offset ten opzichte van de rand van de bovenliggende.
• Drie hoekstijlen (rond, afgeschuind of schuin).
• Ondersteuning voor omtrek verloop via de UIGradient instantie.

Dikte

Je kunt de omtrekdikte instellen via de Thickness eigenschap, die wordt gemeten in pixels (standaard) of geschaald ten opzichte van de bovenliggende, afhankelijk van de StrokeSizingMode van de modifier. Als de omtrek op tekst is en StrokeSizingMode is ingesteld op ScaledSize, is de dikte relatief aan de lettergrootte.

Kleur of verloop

Je kunt de omtrekkleur instellen via de Color eigenschap, evenals een kind UIGradient instantie invoegen om verloopomtrekken te creëren.

Tekstomtrek of rand

Afhankelijk van het type bovenliggende, werkt UIStroke als een tekstomtrek of als een rand. Wanneer je UIStroke aan een tekstobject zoals TextLabel koppelt, past het toe op de omtrek van de tekst; wanneer je UIStroke aan andere GuiObjects koppelt, past het toe op de rand.

Wanneer toegepast op een tekstobject, kun je het standaardgedrag van de omtrek overschrijven via de ApplyStrokeMode eigenschap, waardoor je de omtrek op de grenzen van het object kunt toepassen in plaats van op de tekst zelf. Je kunt zelfs de tekstomtrek en rand onafhankelijk regelen door twee UIStroke instanties aan een tekstobject te koppelen, waarvan de ene is ingesteld op Contextueel en de andere op Rand.

Randpositie/offset

BorderStrokePosition stelt de positie van de omtrek in ten opzichte van de rand van de bovenliggende en BorderOffset laat je een extra offset voor de positie van de omtrek specificeren.

Transparantie

De Transparency eigenschap stelt de omtrektransparantie onafhankelijk in van de BackgroundTransparency of TextTransparency van het bovenliggende object. Dit stelt je in staat om tekst en randen te renderen die "hol" zijn (bestaande uit alleen een omtrek).

Hoekstijl

De LineJoinMode eigenschap laat je controleren hoe hoeken worden geïnterpreteerd. Het accepteert een waarde van Round, Bevel, of Miter.

Laagstructuur

Om meerdere broeder UIStroke instanties op een GuiObject van voor naar achter te stapelen, kun je de ZIndex eigenschap gebruiken. Degenen met een lagere ZIndex renderen onder (achter) degenen met een hogere ZIndex.

Houd er rekening mee dat de rendervolgorde voor UIStroke instanties met dezelfde ZIndex niet gedefinieerd is. Pas geen meerdere UIStroke instanties met dezelfde index toe als hun rendervolgorde belangrijk is.

Hoeken

De UICorner instantie past vervorming toe op de hoeken van zijn bovenliggende GuiObject. Je kunt de toegepaste straal regelen via de CornerRadius eigenschap met behulp van Scale of Offset.

Scale rondt de hoeken af tot een percentage gebaseerd op de totale lengte van de kortste rand van de bovenliggende, wat betekent dat een schaal van 0.5 of hoger de bovenliggende in een "pil" vorm vervormt, ongeacht de breedte of hoogte. Offset rondt de hoeken af tot een specifiek aantal pixels, ongeacht de breedte/hoogte van de bovenliggende.

Je kunt ook individuele hoeken regelen via de TopLeftRadius, TopRightRadius, BottomRightRadius, en BottomLeftRadius eigenschappen.

Padding

Een UIPadding object past boven-, onder-, links- en/of rechtspadding toe op de inhoud van de bovenliggende GuiObject. Bijvoorbeeld, je kunt de tekst binnen een tekstlabel naar beneden of omhoog verplaatsen door een offset toe te passen op de PaddingBottom eigenschap van de modifier.

Schaduw

Een UIShadow object rendert een schaduw voor zijn bovenliggende UI-instantie. Een schaduw kan de rechthoekige vorm van de bovenliggende volgen of de glyphs van een tekstobject. Vormen schaduwen kunnen buiten of binnen de bovenliggende verschijnen, en maskeren het gebied direct achter de bovenliggende. Zowel vormen als tekstschaduwen kunnen een kleurverloop gebruiken.

Als de bovenliggende een UICorner of een niet-nul GuiObject.Rotation heeft, volgt zijn vormschaduw dezelfde hoeken of rotatie. UIShadow ondersteunt geen Path2D of texturen.

Vorm- en tekstschaduwen

De Mode eigenschap bepaalt wat de schaduw werpt, en beide modi kunnen naast elkaar bestaan onder dezelfde bovenliggende.

• Shape is de standaard. De schaduw volgt het rechthoekige gebied van elke GuiObject.
• Text volgt de tekstglyphs van een TextLabel, TextButton, of TextBox. Andere UI-objecten renderen geen schaduw in deze modus.

Spread, Inset, en ShowBehindParent hebben geen effect in tekstmodus.

Vervaging

De BlurRadius eigenschap bepaalt de vervaging van de schaduw. Een grotere waarde maakt de randen van de schaduw zachter. Houd er rekening mee dat de schaalfactor van deze UDim eigenschap relatief is aan de breedte of hoogte van de bovenliggende, welke ook het kortste is.

Kleur en transparantie

De Color eigenschap bepaalt de kleur van de schaduw, terwijl Transparency de transparantie van de schaduw instelt met 0 als volledig ondoorzichtig en 1 als volledig doorzichtig.

Voor een meerkleurige schaduw, voeg een UIGradient toe als kind van de UIShadow. Het verloop beïnvloedt de schaduw zonder de vulling van de bovenliggende te veranderen.

Offset en spreiding

De Offset eigenschap verplaatst de schaduw ten opzichte van de positie van de bovenliggende, terwijl Spread de schaduw uitbreidt of verkleint ten opzichte van de grootte van de bovenliggende.

Ingebedde schaduwen

Stel Inset in op true om de schaduw bovenop en binnen de bovenliggende te renderen in plaats van erachter. Positieve Spread waarden breiden een ingesloten schaduw uit naar het midden van de bovenliggende.

Inhoud achter een transparante bovenliggende onthullen

Standaard is ShowBehindParent true, zodat de gehele vormschaduw wordt gerenderd, inclusief het gedeelte direct achter de bovenliggende. Stel het in op false om dat gedeelte van de schaduw te maskeren. Dit voorkomt dat de schaduw de inhoud verduistert die zichtbaar is door een transparante bovenliggende.

Deze eigenschap heeft geen effect op ingesloten of tekstschaduwen.

Schaduwen stapelen

Voeg meerdere UIShadow instanties toe aan dezelfde bovenliggende om effecten te combineren. De ZIndex eigenschap controleert hun rendervolgorde. Schaduwen met lagere waarden renderen achter schaduwen met hogere waarden.

De rendervolgorde van schaduwen die dezelfde ZIndex delen is niet gedefinieerd. Ken elke broeder schaduw een andere waarde toe wanneer hun volgorde belangrijk is.