Ao utilizar modificadores de aparência, você pode personalizar ainda mais a aparência de seus GuiObjects.
- Aplique um gradiente ao fundo de um objeto.
- Aplique um contorno ao texto ou a uma borda.
- Defina cantos arredondados para um objeto.
- Aumente o recuo entre as bordas de um objeto.
- Adicione uma sombra projetada atrás de um objeto.
Gradiente
O objeto UIGradient aplica um gradiente de cor e transparência ao seu GuiObject pai.
Você pode configurar o gradiente:
- Escolhendo o ponto de partida do gradiente (dentro ou fora dos limites do pai) através da propriedade Offset.
- Escolhendo o ângulo do gradiente pela propriedade Rotation.
Sequência de cores
Para definir a sequência de cores de um gradiente:
Na janela Explorer, selecione o UIGradient.
Na janela Properties, clique dentro do campo de propriedade Color, depois clique no botão ⋯ à direita da caixa de entrada. Uma janela pop-up de sequência de cores será exibida.
Cada triângulo no eixo inferior da sequência de cores é um ponto-chave que determina o valor da cor naquele ponto.
Clique em um ponto-chave na sequência de cores, depois clique no pequeno quadrado ao lado de Color para abrir a janela pop-up de Cores.
Selecione a cor desejada para o ponto-chave.
Se necessário, você pode:
- Adicionar outro ponto-chave clicando em qualquer lugar no gráfico.
- Arrastar um ponto-chave existente para uma nova posição ou selecionar um ponto-chave e inserir um valor de tempo específico através da entrada Time.
- Excluir um ponto-chave selecionando-o e clicando no botão Delete.
- Redefinir a sequência clicando no botão Reset.
Transparência
Para ajustar a transparência de um gradiente ao longo de sua faixa:
Na janela Explorer, selecione o UIGradient.
Na janela Properties, clique dentro do campo de propriedade Transparency, depois clique no botão ⋯ à direita da caixa de entrada. Uma janela pop-up de sequência numérica será exibida.
Cada quadrado ao longo do gráfico de sequência numérica é um ponto-chave que determina o valor de transparência naquele ponto.
Clique e arraste qualquer ponto-chave, ou selecione um ponto-chave e insira uma combinação específica de tempo/valor através das entradas Time e Value.
Se necessário, você pode:
- Adicionar outro ponto-chave clicando em qualquer lugar no gráfico.
- Excluir um ponto-chave selecionando-o e clicando no botão Delete.
- Redefinir a sequência clicando no botão Reset.
Deslocamento e rotação
As propriedades Offset e Rotation permitem ajustar os pontos de controle do gradiente e seu ângulo. Como ilustrado nos diagramas a seguir, Offset é baseado em uma porcentagem da largura ou altura do pai, e tanto valores positivos quanto negativos são válidos.
Da mesma forma, quando você rotaciona o gradiente, os pontos de controle também são rotacionados:
Contorno
A instância UIStroke aplica um contorno ao texto ou a uma borda. As principais características incluem:
- Cor e espessura ajustáveis do contorno.
- Capacidade de definir a transparência do contorno independentemente da transparência do pai.
- Posição e/ou deslocamento personalizáveis em relação à borda do pai.
- Três estilos de canto (redondo, chanfrado ou bisel).
- Suporte a gradientes no contorno através da instância UIGradient.
Espessura
Você pode definir a largura do contorno através da propriedade Thickness, que é medida em pixels (padrão) ou escalonada em relação ao pai, dependendo do StrokeSizingMode do modificador. Se o contorno estiver no texto e StrokeSizingMode estiver definido como ScaledSize, a espessura é relativa ao tamanho da fonte.
Cor ou gradiente
Você pode definir a cor do contorno através da propriedade Color, além de inserir uma instância filho UIGradient para criar contornos em gradiente.
Tanto o objeto pai quanto o UIStroke podem ter instâncias filhas UIGradient, permitindo definir gradientes no contorno e na preenchimento independentemente.
Contorno de texto ou borda
Dependendo do tipo de pai, o UIStroke opera como um contorno de texto ou como uma borda. Quando você coloca o UIStroke como filho de um objeto de texto, como TextLabel, ele se aplica ao contorno do texto; quando você coloca o UIStroke como filho de outros GuiObjects, ele se aplica à borda.
Quando aplicado a um objeto de texto, você pode substituir o comportamento padrão do contorno pela propriedade ApplyStrokeMode, permitindo aplicar o contorno aos limites do objeto em vez do próprio texto. Você pode até controlar o contorno do texto e a borda independentemente colocando duas instâncias de UIStroke como filhos de um objeto de texto, uma definida como Contextual e a outra como Borda.
Posição/deslocamento da borda
BorderStrokePosition define a posição do contorno em relação à borda do pai e BorderOffset permite que você especifique um deslocamento adicional à posição do contorno.
Transparência
A propriedade Transparency define a transparência do contorno independentemente da BackgroundTransparency do objeto pai ou da TextTransparency. Isso permite renderizar texto e bordas que são "oculosas" (consistindo apenas em um contorno).
Estilo dos cantos
A propriedade LineJoinMode permite que você controle como os cantos são interpretados. Ela aceita um valor de Round, Bevel ou Miter.
Camadas
Para empilhar várias instâncias de UIStroke irmãos em um GuiObject de frente para trás, você pode utilizar a propriedade ZIndex. As que têm um ZIndex mais baixo são renderizadas abaixo (atrás) das que têm um ZIndex mais alto.
Observe que a ordem de renderização para instâncias de UIStroke com o mesmo ZIndex é indefinida. Não aplique várias instâncias de UIStroke com o mesmo índice se a ordem de renderização for importante.
Cantos
A instância UICorner aplica deformação aos cantos do seu GuiObject pai. Você pode controlar o raio aplicado através da propriedade CornerRadius, utilizando Scale ou Offset.
Scale arredonda os cantos para uma porcentagem baseada no comprimento total da aresta mais curta do pai, significando que uma escala de 0.5 ou maior deforma o pai em uma forma de "comprimido", independentemente de sua largura ou altura. Offset arredonda os cantos para um número específico de pixels, independentemente da largura/altura do pai.
Você também pode controlar cantos individuais através das propriedades TopLeftRadius, TopRightRadius, BottomRightRadius e BottomLeftRadius.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
Recuo
Um objeto UIPadding aplica recuos superior, inferior, esquerdo e/ou direito ao conteúdo do GuiObject pai. Por exemplo, você pode mover o texto dentro de um label de texto para baixo ou para cima aplicando um deslocamento à propriedade PaddingBottom do modificador.
Sombra
Um objeto UIShadow renderiza uma sombra projetada atrás de sua instância UI pai. As principais características incluem:
- Ajustar o desfoque da sombra.
- Ajustar a cor e transparência da sombra.
- Ajustar o deslocamento e a difusão da sombra.
- Se o pai estiver rotacionado por GuiObject.Rotation, a sombra também será rotacionada.
- Se o pai tiver cantos arredondados, a sombra também terá cantos arredondados.
UIShadow não suporta texto. Se você adicionar esse modificador a um TextLabel ou TextButton, ele renderiza uma sombra da área delimitadora retangular do objeto, não do texto.
Desfoque
A propriedade BlurRadius determina o desfoque da sombra. Um valor maior faz com que as bordas da sombra pareçam mais suaves. Observe que o fator de escala desta propriedade UDim é relativo à largura ou altura do pai, sendo o menor dos dois.
Cor e transparência
A propriedade Color determina a cor da sombra, enquanto Transparency define a transparência da sombra, onde 0 é totalmente opaco e 1 é totalmente transparente.
Deslocamento e difusão
A propriedade Offset move a sombra em relação à posição do pai, enquanto Spread expande ou reduz a sombra em relação ao tamanho do pai.
