A GUI, que significa Graphical User Iinterface, é usada para exibir informações sobre o jogo para o jogador. GUIs podem ser usados para mostrar ao jogador qual é o nível, saúde e ouro de seu personagem, e também para criar botões no jogo para menus e sistemas de inventário.
Conteúdo
- 1 Como as GUIs entram em um jogo
- 2 Adicionando itens a uma tela GUI
- 2.1 Adicionar um rótulo de texto
- 2.2 Personalizar o rótulo
- 3 itens de posicionamento em uma tela GUI
- 3.1 Propriedade de Escala
- 3.2 Propriedade Offset
- 3.3 Ponto de Ancoragem
- 4 Redimensionar itens em uma tela GUI
- 4.1 Propriedade de Escala
- 4.2 Propriedade Offset
- 5 Usando Offsets Negativos
- 6 Aprofundando a GUI
- Referências 7
Como as GUIs entram em um jogo
O tipo mais comum de GUI é um tela GUI que se comporta como um lugar 2D para colocar adesivos na tela do jogador. Quando o jogador move a câmera ou explora o mundo do jogo, uma tela GUI permanece no mesmo lugar (na tela).
Quando você faz um novo jogo Roblox, este espaço da GUI da tela não existe - é seu trabalho adicioná-lo. A maneira mais fácil é adicioná-lo ao StarterGui serviço para que seja copiado para a sessão de jogo local de um jogador quando ele entra no jogo.
- Na série Explorer janela, encontre o
Objeto StarterGui.
- Passe o mouse sobre ele e clique no botão círculo ⊕
- Localize
ScreenGui no menu pop-up e selecione-o. Isso criará um novo espaço de tela 2D na frente de seu mundo de jogo 3D.
Adicionando itens a uma tela GUI
Atualmente, a nova tela GUI está vazia - é apenas uma tela em branco que se estende por toda a largura e altura da tela do jogador.
Adicionar um rótulo de texto
Todos os tipos de coisas podem ser adicionados à tela GUI. Vamos começar com um rótulo de texto básico.
- Na janela do Explorer, passe o mouse sobre o novo ScreenGui objeto, um filho de StarterGuie clique no botão ⊕ do círculo.
- Procure
TextLabel no menu pop-up e selecione-o. Observe que um objeto pode ser encontrado mais facilmente digitando as primeiras letras de seu nome no campo de entrada “Pesquisar objeto”.
Isso adicionará um rótulo de texto muito básico ao canto superior esquerdo da visualização do jogo.
Personalize o rótulo
Temos um rótulo de texto na tela, mas uma caixa branca com a palavra O rótulo não é muito útil. Vamos personalizá-lo para se parecer com uma GUI de “número de versão”, um elemento de exibição geralmente encontrado na tela de menu / introdução que mostra a versão atual do jogo.
- Na janela do Explorer, selecione o novo TextLabel objeto.
- Abra o Propriedades janela selecionando o Veja guia e clicando no Propriedades botão.
- Para o fonte propriedade (dentro do Texto seção), clique à direita do nome da fonte e selecione Rodovia No menu suspenso.
- Na série Texto campo de propriedade, digite um novo nome como versão 1.0.
- Na série Tamanho do texto campo de propriedade, tipo 35.
- Agora expanda o Dados seção (se ainda não estiver expandida).
- Para o BorderSizePixel valor, insira um novo valor como 8.
Excelente! O objeto GUI parece muito melhor agora! Se você quiser ser ainda mais criativo, tente alterar propriedades como TextColor3, BackgroundColor3, BackgroundTransparency, E outros.
Posicionando itens em uma tela GUI
Agora que temos um objeto de texto básico na tela, vamos movê-lo para uma nova posição. Cada objeto 2D no Roblox tem uma propriedade Position que determina onde ele será desenhado em relação ao seu objeto pai. Esta posição é definida por X e Y coordenadas onde X é a posição horizontal e Y é a posição vertical. [1]
Quando criados pela primeira vez, todos os objetos 2D começam com um X e Y posição de 0 que é o canto superior esquerdo da tela, mas e se você quiser movê-lo? Vejamos o Posição propriedade da etiqueta de texto e saiba como!
- Se o TextLabel objeto não está selecionado, clique nele na janela do Explorer.
- Encontre o Posição propriedade e clique na pequena seta para expandi-la.
- Agora expanda o X e Y ramificações diretamente abaixo dela. Observe que cada um tem Escala e Compensar propriedades - esses são os valores que você pode usar para posicionar o rótulo de texto na GUI da tela.
Propriedade de Escala
A Escala propriedade representa um percentagem da largura ou altura do objeto pai. Lembre-se de que a "tela" da GUI da tela abrange toda a largura e altura da visualização do jogo 3D - isso significa que o Escala A propriedade pode ser usada para posicionar um objeto diretamente no centro da visualização, contra a borda esquerda ou direita, ou em qualquer lugar com base em uma porcentagem da largura ou altura total da tela.
Apesar Escala indica uma porcentagem, o intervalo de valores que você insere geralmente deve estar entre 0 e 1, onde 0 é igual a 0% e 1 é igual a 100%. Por exemplo:
95% da largura ou altura total
50% da largura ou altura total
10% da largura ou altura total
Agora vamos mover o rótulo de texto para o centro horizontal da tela. Basta entrar 0.5 para o Escala valor de X e pressione a tecla Enter / Return para confirmar.
O rótulo de texto agora deve ser posicionado mais em direção ao centro da visualização do jogo.
Propriedade de deslocamento
A segunda propriedade em cada conjunto é chamada Compensar. Em vez de mover o elemento em uma porcentagem do tamanho do pai, ele o move em um número específico de pixels. Isso pode ser útil se você quiser colocar um elemento GUI ligeiramente dentro de qualquer borda da visualização do jogo.
Vamos mover o rótulo de texto ligeiramente para dentro da borda superior da tela. Digitar 50 para o Compensar valor de Y e pressione a tecla Enter / Return para confirmar.
Agora, o rótulo de texto deve ser inserido um pouco a partir da borda superior da tela.
Anchor Point
Se você olhar cuidadosamente para a posição atual do objeto GUI, você notará que ele não está perfeitamente centralizado da esquerda para a direita, embora tenhamos definido Posição → X → Escala a 0.5 (50%).
Isso ocorre por causa do padrão do objeto ponto de ancoragem. Um ponto de ancoragem é um ponto específico no objeto para alinhar com a posição da tela que você definiu. Imagine o ponto de ancoragem como um alfinete preso em um pedaço de papel - o alfinete pode ser colocado em qualquer lugar do papel, e o Roblox irá alinhar esse ponto com o Posição valor (es) que você definiu para o objeto.
Na janela do editor do jogo, o ponto de ancoragem é mostrado pelo pequeno contorno quadrado no objeto (quando é selecionado). Quando você cria um novo objeto GUI, o ponto de ancoragem é definido no canto superior esquerdo - é por isso que o ponto exato no objeto está alinhado ao X e Y valores de posição definidos anteriormente.
O ponto de ancoragem é baseado em um X e Y valor que é uma porcentagem do tamanho do objeto: 0 é igual a 0% e 1 é igual a 100%.
Você pode usar este conceito para centralizar o objeto GUI exatamente no meio da tela.
- Se o TextLabel objeto não está selecionado, clique nele na janela do Explorer.
- Encontre o AnchorPoint propriedade e clique na pequena seta para expandi-la.
- Colocou o X valor para 0.5 e pressione a tecla Enter / Return para confirmar.
A etiqueta de texto agora deve ser posicionada exatamente no centro da visualização do jogo.
Redimensionando itens em uma tela GUI
Como você pode ver, o Posição e AnchorPoint As propriedades nos permitem colocar os elementos em qualquer lugar que precisarmos dentro de uma GUI de tela. Também podemos alterar o tamanho de qualquer elemento usando seu Size propriedades.
- Se o TextLabel objeto não está selecionado, clique nele na janela do Explorer.
- Encontre o Size propriedade e clique na pequena seta para expandi-la.
- Agora expanda o X e Y ramificações diretamente abaixo dela. Igual a Posição, cada um tem um único Escala e Compensar propriedades.
Propriedade de Escala
Para definir o tamanho de um objeto GUI, o Escala propriedade funciona da mesma forma que para o posicionamento, representando um percentagem da largura ou altura do objeto pai. Se você definir Tamanho → X → Escala para 0.5 (50%), o objeto terá exatamente metade da largura da tela.
Vamos experimentar e ver o que acontece!
- Entrar 0.75 para o Escala valor de X e pressione a tecla Enter / Return para confirmar.
- Entrar 0 para o Compensar valor de X e pressione a tecla Enter / Return.
O rótulo de texto agora deve ocupar exatamente 75% da largura da tela.
Propriedade de deslocamento
Como você notou acima, Size também tem uma propriedade chamada Compensar. Para dimensionamento, Compensar é útil se você deseja criar botões, rótulos ou outros objetos que permanecem o mesmo número de pixels (largura ou altura), independentemente da tela em que estão sendo visualizados.
Para aumentar a altura do rótulo de texto, basta inserir 150 para o Compensar valor de Y e pressione a tecla Enter / Return para confirmar.
Agora, o rótulo de texto deve ser um pouco mais alto do que antes!
Usando Offsets Negativos
Alguns layouts de GUI só são possíveis com combinações criativas de Escala e Compensar valores. Você pode explorar isso fazendo o TextLabel O objeto preenche toda a tela com uma pequena margem de 20 pixels ao redor das quatro bordas.
- conjunto Posição → Y → Offset para 20. Isso deve empurrar o objeto ligeiramente para cima.
- conjunto Tamanho → X → Escala para 1 (100% da largura da tela).
- conjunto Tamanho → X → Deslocamento para -40 - isso torna o objeto 40 pixels menos do que toda a largura da tela, resultando na margem desejada de 20 pixels em ambos os lados.
- conjunto Tamanho → Y → Escala para 1 (100% da altura da tela).
- conjunto Tamanho → Y → Deslocamento para -40. Assim como acima, isso torna o objeto 40 pixels menos do que a altura da tela inteira e cria uma margem de 20 pixels na parte superior e inferior.
Aprofundando a GUI
Esta seção não foi importada do artigo do Developer Hub.Se você estiver interessado em aprender mais sobre objetos GUI, recomendamos que você visualize as seguintes páginas e sites de referência:
- ScreenGui
quadro- TextLabel
TextButton- Caixa de texto
ImageLabel- UI Design Starter Guide (artigo criado por um membro do Fórum de desenvolvedores para iniciantes)
- UDim2 (tipo de dados usado pelas propriedades de tamanho e posição da interface do usuário)
Ainda está interessado em GUIs? Incentivamos você a aprender mais sobre o Studio se for novo e experimentar diferentes valores de propriedade. A prática leva à perfeição, e experimentá-la permitirá que você a compreenda melhor.
Referências
- ↑ Vector2
