Artigo: Heads-Up Display (HUD) e a aplicação em jogos digitais

A HUD é uma das preocupações fundamentais dentro da produção de interface para jogos digitais.

Pontos, vidas, energia, mapa, munição e outras informações fornecidas a você pelo jogo são exemplos dessas telas.

Como podemos fazer uma HUD que seja útil e não atrapalhe a interação no jogo digital?

Vamos discutir esses aspectos nesse artigo.

O que é HUD?

HUD_sample

HUD é um acrônimo para Heads-Up Display. São interfaces que fornecem informações durante a interação. Elas têm ícones, números, textos e tudo isso pode mais atrapalhar do que ajudar, se não estiver organizado da melhor forma.

Saiba que esses tipos de telas não são exclusivos de jogos digitais. Um carro fornecendo velocidade, gasolina e outras informações está exercendo a função de HUD. Tanto que o termo veio das aeronaves modernas, pois são encontrados lá.

As primeiras interfaces dos games eram bem simples nesse sentido. Conforme os jogos foram evoluindo, isso mudou drasticamente e se exigiu um pouco mais de trabalho do game designer e designers gráficos. Afinal, a complexidade traz a necessidade de se informar outros status ao jogador.

Conforme o jogo digital elas podem também variar em quantidade de informações. Essa variação também pode ocorrer dependendo do momento do jogo.

Essa filtragem de qual informação é relevante e em qual momento, é um fator interessante para não se poluir demais a tela.

Mas quais elementos são comuns de se encontrar em jogos digitais?

 

Elementos Comuns em HUDs nos jogos digitais

Os elementos mais comuns encontrados nos jogos são listados a seguir segundo Scott Rogers do livro “Level Up”:

hp_jogo

  • Barra de saúde/vida: demonstram a proximidade da morte que está o jogador. Existem variações nos formatos como corações, barras, algumas modificam a tela com sangue ou a tremem ao sofrerem alterações, etc;

mira_game_tiro

  • Mira: ajuda na mira do jogador, principalmente a distância. Devem ser pensadas em permitir zoom, dar assistência na mira ao detectar inimigos, retículos para orientar o alvo a ser alvejado, além de feedbacks como mudar de cor ou melhorar foco em alvo;

municao_game_tiro

  • Indicador de munição: serve para ver quantos tiros ainda posso dar de uma determinada arma. Deve informar quantidade total e restante, cargas de pente disponíveis para uso, indicar qual arma está sendo usada, uma forma de demonstrar que a troca está sendo feita, etc;

inventario_jogo

  • Inventário: permite controle e manipulação de itens durante o jogo. Podem ser representados por ícones, texto, listas e outras formas. Devem ser fáceis de manipular, rápidos no acesso, local organizado, limites de equipar, e ainda permitir expansão ao longo do game entre outras preocupações;

pontos_game

  • Pontuação/experiência: são os placares informando pontos, combos, recompensas, experiência e outros dados. Necessita de avisos para parabenizar o jogador na conquista deles ou avisar das perdas, pausa para apreciá-los em momentos de vitória, fontes legíveis e fáceis de ler, etc;

map_hud

  • Radar/mapa: fornece localização de onde o jogador está, onde deve ir, inimigos, itens e o que for interessante ao momento. Deve ser legível, fácil de conciliar com o gameplay, ícones fáceis de identificação (ou com legendas), indicar mudanças ocorridas e outras necessidades;

dialogo_game

  • Sinais sensíveis ao contexto: são ícones ou textos que surgem ao estar próximo de um objeto ou personagem com o qual pode se interagir. Eles indicam que um evento pode acontecer, conforme uma entrada do jogador. Um exemplo é quando se chega próximo ao NPC e aparece um balão de diálogo, indicando que posso falar com ele, por exemplo.

Como se pode notar, são muitos elementos e aqui já se percebem várias abordagens e preocupações nesse sentido.

Duas perguntas podemos nos fazer:

  • Qual o ideal: elementos demais ou de menos?
  • Onde localizá-los de forma que fiquem adequados ao jogador e não atrapalhe no jogo digital?

Essas duas perguntas serão respondidas com orientações nos tópicos a seguir.

 

As Telas Vazias em termos de HUDs

tela_limpa_gameAlguns jogos usam a abordagem de só mostrar HUDs quando são necessárias. Isso ajuda a melhorar a experiência do jogo digital, pois a tela fica limpa e só dá foco à narrativa e vivência no game.

Nesse caso, é importante que a HUD apareça quando algum evento relevante relacionado a ele aconteça. Por exemplo, o personagem leva um dano e já aparece a energia sofrendo desconto.

Também deve se deixar flexível ao jogador ter a HUD quando ele quiser novamente. Afinal, o acesso a essa informação é vital ao jogador.

 

As Telas Carregadas em termos de HUDs

Já outros jogos possuem telas extremamente carregadas. Experimentou alguns MMORPGS? São tantos botões, menus, ícones que dá até uma canseira. Mas existe uma unidade nas informações, organização, fechamento e outros princípios. As recomendações de Gestalt podem te ajudar nesse sentido.

wow_tela_cheia

Nesse tipo de situação de tela cheia, os ícones necessitam ser claros, para levar a associação mais rápida ao jogador.

Também se baseie na experiência anterior do jogador, pois criar algo muito diferente pode confundi-lo. Até hoje, por exemplo, o salvar é um símbolo de um disquete. E quem usa mais isso? Só que a experiência de reconhecê-lo como salvar ficou e isso deve ser considerado.

As cores e formas são fonte de informações. Amarelo indica atenção, o azul já indica um ataque aquático, o vermelho para danos de fogo e outras indicações rápidas. Além de cores, um redemoinho indica tal ataque, um pote com líquido vermelho dentro indica poção e outros exemplos.

Evite textos e, caso os use, deixe-os legíveis, sem muitas cores, detalhes e tamanho adequado para visualização e plataforma.

dota_2_gameplay

Observe todos os elementos juntos, veja se não se confundem devido a semelhança. Também observe a utilidade deles ou, na hora do jogo, se são difíceis de acessar, achar. Afinal, algumas ações precisam ser rápidas no jogo. Imagina aquele combo em um MOBA para matar o seu inimigo. Precisa ser rápido de executar para não se perder tempo.

Indique o efeito ao clicar em um ícone, nem que seja uma opção que ainda não se possa usar.

O que é mais importante tem mais destaque e, por fim, como diz Rogers:

SEUS SÍMBOLOS SEMPRE SIMPLES (4S)

 

Qual a melhor região para posicionar sua HUD?

hud_espacosRogers descreve um pouco sobre essas regiões. Cada canto da tela tem informações que são comuns em jogos.

O centro só é usado por HUDS em termos de mira de arma ou objeto de identificação. Isso se não evitar, pois é onde a ação principal do jogo ocorre.

O canto superior esquerdo é para informações mais importantes.

No caso de usar a direita, esquerda e base, cuidado para cortes em telas ocorridos devido ao jogador não estar usando um monitor ou tela calibrado para isso. Também cuide para não tomar demais a tela com eles, diminuindo o principal do jogo.

Também é interessante deixar o jogador personalizar o que ele quer ativo da HUD e, mais do que isso, rápido acesso ao que precisa. Ninguém merece clicar mais de três vezes para acessar uma informação durante o jogo. Afinal, quremos jogar, não ficar clicando em menus.

 

Recomendações gerais para a sua HUD

Dentre as referências listadas nesse artigo, algumas recomendações para construção de HUDS, além das mencionadas, são:

Hud_exemplo

  • Informações vitais apenas ao jogador. Quando não for vital, aparecer somente se for pertinente;
  • Alertar mudanças de alteração, tanto de forma visual quanto sonora;
  • Aplicar uso de transparências na HUD, pois não se pode cobrir o gameplay totalmente com eles;
  • Utilizar-se mais de símbolos e menos textos;
  • Caso use textos, que sejam curtos e com a fonte bem legível;
  • Usar quadrantes corretos para posicionar cada elemento de HUD. No ocidental, ele observa a interface no sentido da esquerda para a direita, de cima para baixo;
  • Observar onde o olho do jogador se direciona nesse sentido na HUD, onde passa mais tempo;
  • Organizar diferentes categorias de itens por cores;
  • Não tirar a atenção do jogador do principal;
  • O espaço da tela deve ser bem aproveitado. Conforme a plataforma, existem limitações que devem ser adaptadas e melhor pensadas.

 

 

De maneira geral, ofertamos aqui algumas orientações quanto ao uso das HUDs. Claro que também são necessários testes com usuários. Dessa forma, pode-se observar os caminhos que percorrem, ações mais recorrentes, para onde olham mais na tela e se estão se sentindo perdidos, sem informações durante o game.

Esse tipo de interface é fundamental no jogo, pois seu bom uso influencia e muito na experiência dele com o jogo. Afinal, ela deve ser um apoio ao jogador, não um empecilho.

 

Referências

  • Bahr, Michael. Desenvolvimento Projetual de Arte para Jogos Digitais. Curitiba: Universidade Positivo, 2014.
  • Fox, Brent. Game Interface Design. Boston: Thomson Course Technolog, 2005.
  • Rogers, Steve. Level UP: Um Guia para o Design de Grandes Jogos. São Paulo: Blucher, 2012.




Fabiano Naspolini de Oliveira

Fabiano Naspolini de Oliveira

Fabiano Naspolini de Oliveira (Editor-Chefe) – Formado em Análise e Desenvolvimento de Sistemas (Udesc), Pós-Graduado em Docência para Educação Profissional (Senac), MBA em Game Design (Universidade Positivo) e Mestrado em Tecnologias da Informação e Comunicação (UFSC). Foi redator do portal Nintendo Blast, professor do Senac/Senai e Game Designer/Sócio-Fundador do estúdio Céu Games por 6 anos. Atualmente, é professor de jogos digitais e escritor.

Send this to a friend