Modificadores de aparência da UI

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 preenchimento 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 por meio de:

• Definindo suas cores através de um ColorSequence na propriedade Color do gradiente.
• Definindo sua transparência através de um NumberSequence na propriedade Transparency do 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 através da propriedade Rotation.

Sequência de cores

Para definir a sequência de cores de um gradiente:

1. Na janela Explorer, selecione o UIGradient.

2. Na janela Properties, clique dentro do campo da propriedade Color, em seguida 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.

   

3. Clique em um ponto-chave na sequência de cores, em seguida clique no pequeno quadrado ao lado de Color para abrir a janela pop-up de Cores.

4. Selecione a cor desejada para o ponto-chave.

   

5. 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.
   • Deletar 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 em sua faixa:

1. Na janela Explorer, selecione o UIGradient.

2. Na janela Properties, clique dentro do campo da propriedade Transparency, em seguida clique no botão ⋯ à direita da caixa de entrada. Uma janela pop-up de sequência numérica será exibida.

   

   Cada quadrado no gráfico da sequência numérica é um ponto-chave que determina o valor de transparência naquele ponto.

   

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

   

4. Se necessário, você pode:

   • Adicionar outro ponto-chave clicando em qualquer lugar no gráfico.
   • Deletar 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 que você ajuste 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ê gira o gradiente, os pontos de controle também giram:

Contorno

A instância UIStroke aplica um contorno ao texto ou a uma borda. Os principais recursos incluem:

• Cor ajustável e espessura 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, chanfro ou bisel).
• Suporte a gradiente de 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 escalada em relação ao pai, dependendo do StrokeSizingMode do modificador. Se o contorno estiver em texto e StrokeSizingMode estiver definido como ScaledSize, a espessura será relativa ao tamanho da fonte.

Cor ou gradiente

Você pode definir a cor do contorno através da propriedade Color, bem como inserir uma instância filha UIGradient para criar contornos em gradiente.

Contorno de texto ou borda

Dependendo do tipo de seu pai, UIStroke opera como um contorno de texto ou como uma borda. Quando você pai UIStroke a um objeto de texto como TextLabel, ele se aplica ao contorno do texto; quando você pai UIStroke a 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 que você aplique o contorno aos limites do objeto em vez do texto em si. Você pode até controlar o contorno do texto e a borda de forma independente, paiando duas instâncias de UIStroke a um objeto de texto, uma configurada como Contextual e a outra como Border.

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 para a 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 que você renderize texto e bordas que são "occasionalmente" (consistindo apenas em um contorno).

Estilo de canto

A propriedade LineJoinMode permite que você controle como os cantos são interpretados. Ela aceita um valor de Round, Bevel ou Miter.

Camadas

Para sobrepor várias instâncias irmãs de UIStroke em um GuiObject da frente para trás, você pode utilizar a propriedade ZIndex. Aqueles com um ZIndex mais baixo renderizam abaixo (atrás) daqueles com 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 de seu GuiObject pai. Você pode controlar o raio aplicado através da propriedade CornerRadius usando Scale ou Offset.

Scale arredonda os cantos para uma porcentagem baseada no comprimento total da borda mais curta do pai, o que significa que uma escala de 0.5 ou superior 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.

Preenchimento

Um objeto UIPadding aplica preenchimento superior, inferior, esquerdo e/ou direito ao conteúdo do GuiObject pai. Por exemplo, você pode mover o texto dentro de um rótulo 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 de UI pai. Os principais recursos incluem:

• Ajustar a desfoque da sombra.
• Ajustar a cor e transparência da sombra.
• Ajustar o deslocamento e a expansão da sombra.
• Se o pai estiver girado por GuiObject.Rotation, a sombra também será girada.
• Se o pai tiver cantos arredondados, a sombra também terá cantos arredondados.

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, o que for mais curto.

Cor e transparência

A propriedade Color determina a cor da sombra, enquanto Transparency define a transparência da sombra, sendo 0 totalmente opaco e 1 totalmente transparente.

Deslocamento e expansã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.