Uma barra de pontuação é um elemento da interface que exibe informações do jogador que são importantes para a jogabilidade da sua experiência, como suas estatísticas de nível, contagem de moeda ou itens de power-up em seu inventário. Ao exibir barras de pontuação diretamente na tela do jogador, você pode manter sua atenção no que eles precisam para cumprir vários objetivos dentro da sua experiência.
Usando o arquivo Gold Rush .rbxl 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 um texto de pontuação que registra a quantidade de ouro que o jogador coleta.
- Testar o design da sua interface em vários dispositivos emulados para revisar sua aparência em diferentes telas e proporções de tela.
Assim como em toda criação 2D, há muitas maneiras de se alcançar qualquer objetivo específico. Você pode criar seus próprios ativos 2D em ferramentas de UI de terceiros e acompanhar com seu próprio design.
Criar o quadro
Para exibir elementos de UI na tela de todos os jogadores, você pode criar um objeto ScreenGui no serviço StarterGui. Objetos ScreenGui são os principais contêineres para UI na tela, e o serviço StarterGui copia seu conteúdo para o container PlayerGui de cada jogador à medida que eles entram em uma experiência.
Depois de criar um objeto ScreenGui, você pode criar e personalizar seus filhos GuiObjects de acordo com o propósito de cada contêiner. Para demonstrar este 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 GuiObjects se arranjem 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 essas orientações, cada GuiObject que você adicionar ao quadro será organizado fora do perímetro do quadro.
Para recriar o contêiner de quadro dentro do arquivo de lugar de exemplo Gold Rush:
Crie um objeto ScreenGui para conter sua UI 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 UI da barra de pontuação.
Insira um Frame no objeto ScreenGui.
Selecione o novo Frame, então na janela Properties,
- Configure AnchorPoint para 0.5, 0 para definir o ponto de origem do quadro no meio superior de si mesmo (50% da esquerda para a direita do quadro, e 0% do topo para a base do quadro).
- Configure BackgroundColor para 0.6 para deixar o fundo do quadro preto.
- Configure BackgroundTransparency para 0.6 para deixar o fundo do quadro semitransparente.
- Configure Position para {0.5, 0},{0.01, 0} para definir o quadro perto do meio superior da tela (50% da esquerda para a direita da tela, e 1% do topo para a base da tela).
- Configure 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).
- Configure 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, configure 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,
- Configure FillDirection para Horizontal.
- Configure VerticalAlignment para Center.
Adicionar um ícone
Um ícone é um símbolo que representa uma ação, objeto ou conceito em uma experiência. Usar ícones que são simples e intuitivos permite que os jogadores reconheçam facilmente o que você está comunicando com sua interface sem usar texto, que pode poluir a tela e desviar a atenção do conteúdo que importa.
Por exemplo, o exemplo usa um ícone de coroa de ouro simples para indicar quanto ouro um jogador coletou. Este ícone é facilmente reconhecível como sendo o objetivo mais importante dentro da experiência, e inclui detalhes mínimos para que continue legível nas telas de dispositivos móveis.
Para recriar o ícone da 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,
Configure Image para rbxassetid://5673786644 para fazer o ícone ser uma coroa.
Configure BackgroundTransparency para 1 para deixar o fundo do rótulo completamente transparente.
Configure 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.
Configure Size para {1.25,0},{1,0} para alargar a área do rótulo além da largura total do quadro.
Configure 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 uma experiência, como quantos pontos eles ganham dentro de uma partida. É importante que todo texto da interface seja claro e fácil de ler para que os jogadores possam rapidamente entender as informações que precisam para ter sucesso dentro da sua experiência.
Por exemplo, o exemplo usa texto grande sobre uma cor que contrasta para que não se misture com o ruído do fundo. Isso é particularmente significativo para acessibilidade porque garante que o texto permaneça legível à medida que o jogador se move pelo espaço 3D, que pode incluir objetos que têm a 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,
Configure BackgroundTransparency para 1 para deixar o fundo do rótulo completamente transparente.
Configure 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.
Configure 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.
Configure Font para GothamSSm para combinar com a estética do ambiente.
Configure Text para 0 para iniciar a pontuação do zero.
Configure TextColor3 para 255, 200, 100 para tonalizar o texto de ouro.
Configure TextSize para 30 para aumentar o tamanho do texto na tela.
Configure 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 em vários dispositivos. Essa ferramenta é uma parte vital do design de UI porque a proporção da sua tela no Studio não necessariamente reflete a proporção das telas que os jogadores usam para acessar sua experiência, e é importante que sua interface seja legível e acessível em cada dispositivo.
Por exemplo, se você não testar sua interface 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 ocupam muito espaço na tela.
Para emular sua interface 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 no dispositivo que está emulando.
No menu suspenso de dispositivos, selecione pelo menos um dispositivo nas seções Telefone, Tablet, Desktop e Console.
