Uma barra de pontuação é um elemento de interface do usuário que exibe informações do jogador que são importantes para a jogabilidade do seu jogo, como suas estatísticas de nível, contagem de moeda ou itens de poder em seu inventário. Ao exibir barras de pontuação diretamente na tela do jogador, você pode manter a atenção deles no que precisam para alcançar vários objetivos dentro do seu jogo.
Usando o arquivo .rbxl do Gold Rush como referência, este tutorial mostra como criar uma barra de pontuação que rastreia a quantidade de ouro que os jogadores coletam, incluindo orientações sobre:
- Criar um quadro no centro superior da tela.
- Adicionar um ícone de coroa que comunica o que a barra de pontuação está rastreando sem qualquer orientação textual.
- Inserir texto de pontuação que registra a quantidade de ouro que o jogador coleta.
- Testar seu design de interface do usuário em vários dispositivos emulados para revisar sua aparência em diferentes telas e proporções.
Assim como em toda criação 2D, existem muitas maneiras de alcançar qualquer objetivo específico. Você pode criar seus próprios ativos 2D em ferramentas de interface do usuário de terceiros e seguir com seu próprio design.
Criar o quadro
Para exibir elementos de interface do usuário na tela de cada jogador, você pode criar um objeto ScreenGui no serviço StarterGui. Objetos ScreenGui são os principais contêineres para a interface do usuário na tela, e o serviço StarterGui copia seu conteúdo para o contêiner PlayerGui de cada jogador à medida que eles entram em um jogo.
Depois de criar um objeto ScreenGui, você pode criar e personalizar seus objetos filhos GuiObjects de acordo com o propósito de cada contêiner. Para demonstrar esse conceito, esta seção ensina como criar um objeto ScreenGui com um objeto filho Frame que conterá tanto o ícone quanto o texto da barra de pontuação.
Além de personalizar as propriedades do quadro, esta seção também fornece instruções sobre como adicionar um objeto filho UISizeConstraint e UIListLayout ao quadro. Essa técnica garante que os GuiObjects se organizem automaticamente na horizontal à medida que você os insere no quadro, e que eles sejam sempre legíveis em tamanhos de tela menores. Se você não seguir essa orientação, cada GuiObject que você adicionar ao quadro será organizado fora do perímetro do quadro.
Para recriar o contêiner do quadro dentro do arquivo de lugar de exemplo Gold Rush:
Crie um objeto ScreenGui para conter sua interface do usuário na tela.
- Na janela Explorer, passe o mouse sobre StarterGui e clique no ícone ⊕. Um menu contextual é exibido.
- Insira um ScreenGui.
Crie um contêiner para todo o componente da interface da barra de pontuação.
Insira um Frame no objeto ScreenGui.
Selecione o novo Frame, então na janela Properties,
- Defina AnchorPoint para 0.5, 0 para definir o ponto de origem do quadro no topo-médio dele (50% da esquerda para a direita do quadro, e 0% do topo para a parte inferior do quadro).
- Defina BackgroundColor para 0.6 para tornar o fundo do quadro preto.
- Defina BackgroundTransparency para 0.6 para tornar o fundo do quadro semi-transparente.
- Defina Position para {0.5, 0},{0.01, 0} para posicionar o quadro perto do topo-médio da tela (50% da esquerda para a direita da tela, e 1% do topo para a parte inferior da tela).
- Defina Size para {0.25, 0},{0.08, 0} para que o quadro ocupe uma grande parte do meio da tela para chamar a atenção do jogador (25% horizontalmente, e 8% verticalmente).
- Defina Name para ScoreBarFrame.
Adicione uma restrição ao quadro para que seu conteúdo seja sempre legível em tamanhos de tela pequenos.
- Insira um objeto UISizeConstraint no ScoreBarFrame.
- Selecione a nova restrição, então na janela Properties, defina MinSize para 0, 40 para garantir que o quadro nunca encolha para menos de 40 pixels verticalmente.
Adicione um objeto de layout ao quadro para que seu conteúdo se organize da esquerda para a direita e centralize verticalmente dentro do perímetro do quadro.
- Insira um objeto UIListLayout no ScoreBarFrame.
- Selecione o novo objeto de layout, então na janela Properties,
- Defina FillDirection para Horizontal.
- Defina VerticalAlignment para Center.
Adicionar um ícone
Um ícone é um símbolo que representa uma ação, objeto ou conceito em um jogo. Usar ícones que são simples e intuitivos permite que os jogadores reconheçam facilmente o que você está comunicando com sua interface do usuário sem usar texto, que pode poluir a tela e desviar a atenção do conteúdo que importa.
Por exemplo, o exemplo usa um simples ícone de coroa de ouro para indicar quanto ouro um jogador coletou. Este ícone é facilmente reconhecível como sendo o objetivo mais importante dentro do jogo, e inclui detalhes mínimos para que permaneça legível nas telas de dispositivos móveis.
Para recriar o ícone de coroa de ouro dentro do arquivo de lugar de exemplo Gold Rush:
Insira um objeto ImageLabel no ScoreBarFrame.
Na janela Explorer, passe o mouse sobre ScoreBarFrame e clique no ícone ⊕. Um menu contextual é exibido.
Insira um ImageLabel.
Selecione o novo rótulo, então na janela Properties,
Defina Image para rbxassetid://5673786644 para tornar o ícone uma coroa.
Defina BackgroundTransparency para 1 para tornar o fundo do rótulo completamente transparente.
Defina LayoutOrder para 1. Isso garante que o ícone permaneça o primeiro GuiObject no quadro da esquerda para a direita quando você inserir texto na próxima seção do tutorial.
Defina Size para {1.25,0},{1,0} para alargar a área do rótulo além da largura total do quadro.
Defina SizeConstraint para RelativeYY para preservar a proporção do ícone escalando o tamanho do rótulo com a altura do quadro pai.
Inserir texto de pontuação
O texto de pontuação registra a pontuação do jogador dentro de um jogo, como quantos pontos eles ganham em uma partida. É importante que todo texto da interface do usuário seja claro e fácil de ler para que os jogadores possam entender rapidamente as informações de que precisam para ter sucesso em seu jogo.
Por exemplo, o exemplo usa texto grande em cima de uma cor contrastante para que não se misture com o ruído do fundo. Isso é particularmente significativo para acessibilidade, pois garante que o texto permaneça legível enquanto o jogador se move pelo espaço 3D, que pode incluir objetos que são da mesma cor que o texto.
Para recriar o texto de pontuação dentro do arquivo de lugar de exemplo Gold Rush:
Insira um objeto TextLabel no ScoreBarFrame.
Na janela Explorer, passe o mouse sobre ScoreBarFrame e clique no ícone ⊕. Um menu contextual é exibido.
Insira um TextLabel.
Selecione o novo rótulo, então na janela Properties,
Defina BackgroundTransparency para 1 para tornar o fundo do rótulo completamente transparente.
Defina Size para {1,0},{1,0} para alargar o rótulo para todo o quadro (100% horizontalmente e 100% verticalmente do quadro pai). O rótulo se estende além dos limites do quadro porque está sendo deslocado pelo ícone.
Defina SizeConstraint para RelativeYY para garantir que o tamanho do rótulo escale com a altura do quadro pai e preserve a proporção do ícone. Este passo também torna o rótulo um quadrado e o mantém dentro dos limites do quadro.
Defina Font para GothamSSm para combinar com a estética do ambiente.
Defina Text para 0 para iniciar a pontuação a partir de zero.
Defina TextColor3 para 255, 200, 100 para tingir o texto de ouro.
Defina TextSize para 30 para aumentar o texto na tela.
Defina TextXAlignment para Left para garantir que o texto da pontuação permaneça alinhado à esquerda perto do ícone da coroa, independentemente de a pontuação do jogador ser 0, 1.000 ou 1.000.000.
Testar o design
O Emulador de Dispositivos do Studio permite que você teste como os jogadores verão e interagirão com sua interface do usuário em vários dispositivos. Esta ferramenta é uma parte vital do design da interface do usuário, pois a proporção da sua tela no Studio não reflete necessariamente a proporção das telas que os jogadores usam para acessar seu jogo, e é importante que sua interface do usuário seja legível e acessível em todos os dispositivos.
Por exemplo, se você não testar sua interface do usuário em uma variedade de tamanhos de tela, jogadores com telas grandes podem não conseguir ler seu texto ou decifrar seus ícones, e jogadores com telas pequenas podem não conseguir ver o espaço 3D porque seus elementos de interface do usuário ocupam muito espaço na tela.
Para emular sua interface do usuário em vários tamanhos de tela:
No menu Test do Studio, ative o Emulador de Dispositivos.
No menu suspenso de resolução, selecione Resolução Real. Isso permite que você veja a verdadeira resolução dos seus elementos de interface do usuário no dispositivo que você está emulando.
No menu suspenso de dispositivos, selecione pelo menos um dispositivo nas seções Telefone, Tablet, Desktop e Console.
