Plano de fundo da GUI
Cor de fundo, gradientes, predefinições e uma imagem de fundo totalmente posicionável.
Quando você não tem nada selecionado no canvas, o Inspector muda para o plano de fundo da GUI — um fundo em tela cheia que fica atrás de todo o seu design. Ele é salvo por design e viaja junto com a sua exportação, para que cada parte da sua GUI em dx tenha um palco consistente onde ficar. Esta página percorre cada seção e controle, e explica exatamente quais partes vão na sua exportação e quais são apenas polimento de pré-visualização.
Para abrir esses controles, clique em um espaço vazio do canvas de modo que nada fique selecionado — o Inspector então mostra o plano de fundo da GUI em vez das propriedades de um elemento.
O que é o plano de fundo da GUI
O plano de fundo da GUI é uma única camada de fundo que é renderizada atrás de todo o design. Ele é armazenado por design e exportado com ele, então não é uma preferência global do editor — cada design mantém o seu próprio fundo. Ele é construído a partir de quatro camadas empilhadas que você controla de forma independente: uma cor de fundo sólida, um gradiente, uma imagem de fundo e um par de acentos fosco e granulado.
Fundo
A seção Fundo é o preenchimento base atrás de todo o resto.
- Ativar — liga ou desliga a camada de fundo.
- Cor base — a cor de preenchimento sólida, com alpha, para que você possa deixá-la totalmente opaca, semitransparente ou transparente.
Gradiente
A seção Gradiente pinta uma mistura de cores sobre o fundo para dar profundidade e clima.
- Ativar — liga ou desliga o gradiente.
- 2 cores ou 3 cores — escolha uma mistura de duas ou três paradas.
- Direção — faça o gradiente correr na vertical ou na horizontal.
- Radial (brilho central) — muda para uma mistura radial que brilha do centro para fora em vez de uma direção linear.
Designs predefinidos
Seis designs predefinidos de um clique dão a você um gradiente pronto instantaneamente. Escolha um e depois ajuste as cores se quiser.
Imagem de fundo
A seção Imagem de fundo permite que você importe uma imagem de abertura ou de personagem do seu PC e a coloque atrás do design. Escolha como ela preenche a tela com um modo de ajuste.
| Ajuste | O que faz |
|---|---|
| Cover | Dimensiona a imagem para preencher toda a tela, recortando o excesso para evitar bordas vazias. |
| Contain | Dimensiona a imagem para caber inteiramente dentro da tela, de modo que toda a imagem fique visível. |
| Stretch | Estica a imagem para as dimensões exatas da tela, ignorando a sua proporção. |
| Free | Entrega a você o controle manual total sobre posição e tamanho (veja abaixo). |
Modo Free
No modo Free você controla totalmente o posicionamento da imagem com quatro controles deslizantes — Posição X, Posição Y, Largura e Altura — expressos como uma porcentagem da tela, para que a imagem permaneça no lugar em diferentes resoluções. Dois botões auxiliares completam o conjunto.
- Posição X / Posição Y — onde a imagem fica, como uma % da tela.
- Largura / Altura — o tamanho da imagem, como uma % da tela.
- Center — encaixa a imagem de volta no meio da tela.
- Reset — restaura a posição e o tamanho do modo Free.
Quando você muda para Free, a posição e o tamanho são inicializados a partir do ajuste atual, para que a imagem não pule — você começa exatamente onde Cover, Contain ou Stretch deixaram e ajusta a partir daí.
Opacidade e remoção da imagem
- Opacidade — um controle deslizante que faz a imagem aparecer ou desaparecer sobre as camadas abaixo dela.
- Remove — limpa a imagem importada do plano de fundo.
Fosco e granulado
A seção Fosco e granulado adiciona dois acentos de acabamento — um desfoque fosco e uma sobreposição de ruído/granulado. Estes são apenas de pré-visualização: eles ajudam você a julgar a aparência dentro do Easelt Builder, mas não são exportados com o seu design.
O que é exportado vs. o que é apenas de pré-visualização
Apenas parte do plano de fundo da GUI vai para o seu design exportado. Tenha essa divisão em mente para que as pré-visualizações correspondam ao resultado final.
| Camada | Exporta? | Notas |
|---|---|---|
| Cor de fundo | Sim | O preenchimento base, incluindo alpha, vai junto com o design. |
| Gradiente | Sim | Seu gradiente, predefinido ou personalizado, é exportado. |
| Imagem de fundo | Sim | A imagem vai na pasta assets/ junto com o design. |
| Desfoque fosco | Não | Acento apenas de pré-visualização. |
| Sobreposição granulada | Não | Acento apenas de pré-visualização. |
O desfoque fosco e a sobreposição granulada são apenas para pré-visualização — eles não aparecerão na sua exportação. Tudo o que você quiser dentro do jogo deve estar na cor de fundo, no gradiente ou na imagem, e a imagem é gravada em assets/.