Ao criar UI com bordas e cantos personalizados, você frequentemente precisará renderizar elementos em diferentes proporções e envolver visualmente texto localizado ou outros conteúdos de dimensões desconhecidas. Isso permite que você crie elementos de UI de tamanhos variados sem distorcer as bordas ou os cantos.
Sob a abordagem 9-slice, uma imagem (um único ativo de imagem do Roblox) é dividida internamente em nove sub-imagens, cada uma com diferentes regras de escala.
| Sub-imagem | Escala |
|---|---|
| 1 3 7 9 (cantos) | nenhuma |
| 2 8 (bordas superior/inferior) | horizontal |
| 4 6 (bordas esquerda/direita) | vertical |
| 5 (centro) | horizontal + vertical |
Editor do Studio
A configuração de fatias é possível definindo diretamente o Enum.ScaleType e as propriedades de fatias em um rótulo de imagem ou botão, mas o Editor de 9 Fatias incorporado do Studio é mais intuitivo.
Abrindo o editor
Para abrir o visual Editor de 9 Fatias no Studio:
- Defina a propriedade ScaleType como Slice.
- Clique na propriedade SliceCenter que aparece, em seguida, clique no … dentro da linha.
- Na janela que se abre, 4 linhas vermelhas sobrepõem a imagem, representando as bordas das fatias. O tamanho da imagem original também é exibido.
Definir offsets
No Studio, arraste as linhas vermelhas para definir os offsets das bordas esquerda, direita, superior e inferior da imagem.
Se você precisar de melhor precisão, insira valores de offset nos campos à direita da janela do editor.
À medida que você reposiciona as linhas de arraste, o elemento de UI é atualizado automaticamente para mostrar o resultado.
Os valores de offset são diferentes dos valores da propriedade SliceCenter do objeto de UI e representam o número de pixels entre uma borda da imagem fonte e o arrastador associado a esse lado.