Das guerras para os jogos: HUDs!

[Geraldo de Rívia]

"Que em cada jogo que jogamos descobrimos um novo mundo nós já concordamos, correto? E como bons jogadores, o desejo de explorar o recém-descoberto é o que nos move. Para onde ir? O que fazer? E por que fazer? São algumas das dúvidas que permeiam nossa mente ao adentrar nesse novo universo. Bons jogos preveem isso, e tendem a nos auxiliar nessa tarefa, nos passando dados de onde acabamos de chegar, seja por meio dos moradores de lá ou de informações na tela, pelo que denominamos HUD. Mas... o que realmente é uma HUD? O que ela deve mostrar? É realmente necessária? No nosso caso sim, ela é necessária. Até porque a cada dia os jogos trazem mais informações e fica cada vez mais impossível manter uma tela invejavelmente limpa como a de nosso querido Spacewar! de 1962."

[box class=plainbox]O que é HUD?[/box]

     Pode parecer uma pergunta supérflua no meio desenvolvedor de games, afinal, "HUD é aquele negócio que fica geralmente no canto superior esquerdo da tela mostrando as barrinhas de vida e magia". Er... não, pequeno gafanhoto. Este é somente um dos possíveis elementos da HUD.
     Heads-up Display, cujo acrônimo é HUD, são todas as interfaces que o jogo nos disponibiliza com o intuito de nos passar informações, seja sobre a progressão do jogo, ou sobre ser ou objeto que controlamos. Mas quando foi que tiveram a brilhante ideia de nos passar essas informações? Bom, tudo começa laaa na primeira guerra mundial. Isso mesmo, antes sequer dos jogos eletrônicos existirem.
     Imagine-se sendo piloto de um avião durante a guerra, e seu objetivo é atirar na maior quantidade de aviões inimigos. Isso sem uma mira! Pois é, mais se acertavam cegonhas carregando bebês do que aviões inimigos. Findada a guerra, viu-se a necessidade de melhorar isso. A partir daí os aviões começaram a ser feitos com uma mira fixa em sua fuselagem, e isso provou ser muito útil quando tiveram a oportunidade de testar efetivamente esse artifício na guerra mundial seguinte. No fim da segunda guerra, porém, os aviões com motores à jato necessitavam de um dispositivo que oferecesse uma precisão maior, pois voavam em velocidades muito maiores e a inconstância da distância entre eles e o alvo tornava a antiga mira defasada. A partir da década de 70, as aeronaves já vinham com computadores de bordo, equipados com radar e informações atualizadas de vôo.
     De lá pra cá, os dados em diversos equipamentos que tinham o intuito de transmitir informações importantes ao operador foram emquadrados com elementos de HUD. Nos aviões, nos carros, em máquinas e, enfim, nos games.

[box class=plainbox]A Evolução das HUDs[/box]

     As HUDs são um dos elementos imprescindíveis nos jogos. Não importa o gênero ou plataforma, ter um feedback das informações do jogo e como você está desempenhando o papel de jogador é fundamental para saber como prossegir e o que fazer em seguida. Mesmo nos primeiros consoles, os jogos apresentavam essas interfaces, bem rústicas, de fato, mas que cumpriam seu papel. Com o passar do tempo, em consequência do constante avanço tecnológico, os jogos ganhavam cada vez mais informações, mais complexidade, e com isso, mais informações deveriam ser passadas ao jogador. Isso ao tempo que os gráficos passavam a suportar novas formas de exibir essas informações, e isso fica claro quando acompanhamos a evolução dos jogos e analisamos a HUDs que os acompanham.

     Ainda nos aviões, em 1982, um dos jogos mais jogados no Atari 2600 foi River Raid, que exibia em sua HUD: a pontuação; o nível de combustível; e o número de tentativas restantes. A pontuação tinha o papel de mostrar o quanto o jogador progrediu no jogo, isso porque, nessa época, o objetivo comum à maioria dos games era conseguir a pontuação mais alta, vez que os jogos geralmente eram mecânicas extremamente simples que funcionavam em ciclo, assim, quem perdurasse mais tempo, conseguiria a maior pontuação por ter ido mais longe. O nível de combustível era o fator dificultador, pois além de existirem inimigos no trajeto, você deveria estar em constante atenção para não deixar o combustível acabar. Como esta era uma informação vital para continuar jogando, era extremamente importante a HUD exibir esse dado. O número de tentativas restantes é o que chamaríamos de vidas nos jogos futuros. Ao morrer a pontuação não seria zerada, somente quando o número de vidas chegasse a zero.
     É importante notar o posicionamento da HUD nesse jogo. O progresso do jogo é para frente/cima, logo colocar esses dados na parte superior poderia vir a atrapalhar na visão dos inimigos que estivessem se aproximando. O mesmo aconteceria se ficasse em uma das laterais. Com a HUD em baixo, ela cobriria somente o que já passou e não mais apresenta perigo para jogabilidade.

Imagem do jogo River Raid (Atari 2600)

     A quarta geração dos consoles já trazia jogos mais bem desenvolvidos e nesse período é onde as HUDs definitivamente deixam de serem constituídas somente de textos e letras e passam a ganhar também formas e ícones.
    Nesse meio que encontramos o mais que memorável The Legend of Zelda: A Link to the Past, que eu não via a hora de citar em alguma matéria. Das mão de Shigeru Miyamoto, esse jogo saiu em 1991 para Super Nintendo, e se tratava... ops, se trata de um dos melhores action-rpgs já criados, na minha opinião. Como esse jogo tinha uma proposta e objetivos que diferem bastante do que vimos anteriormente, os elementos da HUD são outros: vida do personagem; magia do personagem; item equipado; e inventário, que exibia o dinheiro em posse e a munição disponível (bombas e flechas).
     Em um rpg é comum podermos movimentar o personagem para todas as direções, sendo assim reparem que essa HUD não possui uma coloração sólida de fundo como no exemplo anterior. Os elementos desta são bem separados entre si e utilizam imagens para simplificar a informação que deseja se passar. Isso evita a poluição visual com textos, agiliza a leitura das informações e evita que um desses dados cubra algo importante do cenário.

Imagem do jogo The Legend of Zelda: A Link to the Past (Super Nintendo)

     Há pouco mais de um mês foi lançado Tom Clancy's The Division, um MMO de tiro com elementos de RPG. Por se tratar de um jogo multiplayer, muitos elementos presentes na HUD desse jogo são comuns à outros MMOs, ainda que eles não sejam do mesmo gênero, como: mini-mapa; o log de informações; os dados sobre a vida do personagem; o menu; e os pontos sensíveis ao contexto.
     Porém, na direção contrária aos MMO-RPG, por exemplo, a tela desse game é limpa, o que é uma característica dos first-person shooters (FPSs). Outra função que os gráficos de hoje possibilitam é a transparência nos elementos da HUD. Em um cenário que devemos nos atentar em todas as direções, a transparência impede que a HUD oculte um inumigo ou objeto importante. Mais uma característica muito bem-vinda é alguns elementos da HUD serem escondidos quando não necessários. O log de informações, por exemplo, quando não se tem novidades, ele fica oculto até que uma nova informação seja obtida, afinal são informações curtas, que não requerem a necessidade de ficar visível por muito tempo.

Imagem do jogo Tom Clancy's The Division (PC, PlayStation 4 e Xbox One)

[box class=plainbox]Tipos de Tela em relação às HUD[/box]

     A partir de 1950, os eletrônicos com telas coloridas eram a novidade que se alastrava pelo mundo, e que se consolidou no início da década de 80. Sendo assim, os jogos buscavam cada vez mais usar a maior quantidade de cores disponíveis, para atrair mais o público. Isso se manteve crescente até o fim do século passado, quando viram que já eram tantas informações, cores, textos e objetos na tela que isso atrapalhava no gameplay. Foi assim que as interfaces das HUDs começaram a seguir duas vertentes de criação: as telas vazias em termos de HUDs e as telas carregadas em termos de HUDs.

[box class=plainbox]Tela Vazia em termos de HUD[/box]

     Seguindo um pensamento mais minimalista, as telas vazias em termos de HUD são as dos jogos que, durante o gameplay, poucos são os elementos presentes na tela. São típicas em jogos que prezam uma boa narrativa e usam conceitos e tendências de design, sendo assim, buscam focar a atenção do jogador no cenário e na história, ao invés de focá-la na dinâmica da tela. Reservam a tela somente para informações mais importantes e que o jogador há de saber constantemente, os demais dados são agrupados em menus que podem ser acessados pausando o jogo em momentos mais oportunos.

Imagem do jogo Need for Speed (PlayStation 4, Xbox One e um dia, PC)

[box class=plainbox]Tela Carregada em termos de HUD[/box]

     Já na linha de ideias mais dinâmicas, as telas carregadas em termos de HUD estão geralmente presente em jogos cujo foco é dado na ação, em que o jogador deve estar constantemente ativo, por isso muitas informações na tela lhe passam todos os dados que ele precisa saber sem a necessidade de abrir menus separados, evitando quebrar a imersão no jogo. É uma grande característica de MMOs, em que parar para abrir o inventário te deixa vulnarável ao ataque de outro jogador.
     Por a tela possuir muitos elementos, é comum existirem alguns padrões. O objetivo dos padrões é facilitar o entendimento e costume do jogador em um novo jogo, afinal, se a cada novo MMO que jogássemos, tivéssemos que reaprender onde está ou o que faz cada função daquela tela repleta de elementos, seria um tanto exaustivo, certo? Sendo assim, é normal vermos o mini-mapa no canto superior-direito, o log de informações e chat no inferior-esquerdo, as barras de vida e magia, bem como habilidades centralizadas na parte inferior. Também podem ser usados ícones que simplifiquem as informações passadas, como o ícone de disquete que é comumente usado para a opção salvar e moedinhas para mostrar onde está o dinheiro em posse.

Imagem do jogo Guild Wars 2 (PC)

[box class=plainbox]Elementos da HUD[/box]

     Cada jogo tem seu próprio mundo, objetivo, público alvo e muitos outros fatores que diferem um do outro, sendo assim não há elementos fixos que devem ou não existir em uma HUD. Cada elemento deve ser pensado, se faz sentido ele ser presente no game e se é preciso que ele seja exibido na tela constantemente. Todavia, alguns desses elementos são bastante comuns em muitos jogos, e eles são:

     • Barra de vida, mana e atributos: é o que singularmente denominamos HUD, isso porque esse elemento era o único presente nessas interfaces dos jogos mais antigos. Geralmente fica localizada na parte superior-esquerda, e apresenta a vida do personagem, a magia quando esta existe, e os outros atributos relevantes ao gameplay, que variam de jogo para jogo. É tendencialmente apresentada por barras, mas já apareceu como ícones, quadradinhos e corações.
     • Mira: são usadas para atrair a visão do jogador para um ponto específico, como é extremamente empregada em FPSs. Pode vir em formas circulares, em linhas perpendiculares formando cruz ou tracejados, mas sempre finas, com o propósito de ocupar o menor espaço possível e no centro da tela.
     • Contador de munição: informa o jogador o número de items restantes para a arma em uso. Um elemento também muito empregado em FPSs, mas também pode aparecer como contador de flechas no tema aventura.
     • Menus: há! Sim, também é um tipo de HUD, visto que é exibido sobre o cenário/mapeamento, mas não é assim assimilado, vez que após ganhar várias funções passou a ser exibido de forma que, ao acessá-lo, o gameplay era pausado. Geralmente ocupa toda a tela e te seus elementos bem distrubuídos pelo espaço dela. É o elemento mais onipresente, porém, apresenta-se de formas muito variadas devido a adequar-se diferente em cada jogo. Possui como objetivo providenciar ao jogador informações que não são instantâneas, mas sim importantes ao longo de todo o jogo, como: itens, descrições e tutoriais, configurações e informação detalhada sobre o personagem.
     • Pontuação: bem menos presente do que antigamente, demarca o sucesso do jogador durante o progresso do jogo. É uma mecânica muito utilizada em jogos curtos e casuais, em que a potuação é o objetivo do jogo, fator que estimula a competição entre jogadores. Pode vir em forma de objetos coletados na fase, como em Pac-Man, ou como é mais utilizada atualmente, como pontos de experiência.
     • Mini-mapa ou radar: indica a posição atual do jogador e para onde deve seguir. Por se tratar de uma leitura gráfica, é comum empregar as informações nesse elemento como ícones ao invés de textos. Geralmente é exibido do lado direito da tela.
     • Pontos sensíveis ao contexto: são ícones, janelas, textos ou imagens que aparecem ao se aproximar de algo ou em ocasiões específicas, como por exemplo, um ponto de interrogação que aparece sobre um NPC que tenha uma missão ao se aproximar dele, ou uma janela de diálogo que somente aparece ao interagir com outro NPC.

[box class=plainbox]Recomendações para HUDs[/box]

     Bom, agora que sabemos do que se constitui as HUDs, que são formadas de elementos e que cada um deles possui suas características, temos um pouco mais de referências na hora de montar a interface visual do nosso projeto. Vale ressaltar que nenhum elemento é obrigatório para nenhum gênero de jogo, tudo vai depender das mecânicas que o jogo terá e como você quer transmití-las ao jogador. Uma HUD bonita tende sim a ser agradável de se ver, mas a partir do momento que ela prejudica o gameplay, entendemos que a funcionalidade de uma HUD sobressai sobre sua beleza visual.
     Desta maneira seguem alguns pontos, ou dicas, a se pensar no momento de bolar sua interface:

     • Mostre somente o que é realmente importante: o que colocar na hud? Pense nas informações que o jogador vai precisar constantemente e que pode influenciar no gameplay. Evite fazer com que ele tenha que abrir o menu para buscar algo que vai precisar a cada 5 minutos.
     • Esconda o que não for útil naquele momento: a quantidade de dinheiro em posse, por exemplo. Você não vai atirar moedas nos inimigos, logo não é necessário ter uma janela mostrando quantas moedas possui durante todo o progresso do jogo. Deixa essas e outras informações similares ocultas, e as exiba somente quando forem pertinentes, como quando chegar em um shop, no caso.
     • Avisar mudanças: você está seguindo em frente em sua jornada, jogando em terceira pessoa e focado na estrada. De repende o personagem cai morto no chão e você sequer sabe o que aconteceu. Ah, tinha um inimigo atirando flechas em suas costas e você não viu a barrinha de vida descendo. Isso poderia ser evitado se a tela desse uma pequena tremida, mudasse de cor rapidamente ou um aviso sonoro fosse emitido ao sofrer dano.
     • Aproveite transparências: nem todas informações precisam estar opacas para estar bem visíveis. Principalmente em formas, janelas e fundos, cujo objetivo é só realçar a informação desejada, não é necessário que a cor seja sólida. Você pode optar pela transparência, que mantém um certo destaque à informação e ainda permite a visualização do cenário.
     • Substitua textos: por ícones ou símbolos. Conforme o layout do jogo, é mais simples mostrar um X do que o texto "sair do jogo". Caso opte pelos textos, dê preferência a fontes de fácil leitura, cores neutras e informações curtas.
     • Posicionamento: lembrem-se de como lemos: da esquerda para direita e de cima para baixo. Logo é voluntário avaliarmos a tela do jogo da mesma forma.
     • Aproveite os padrões: os jogadores já estão acostumados a enconstrar determinadas informações em áreas da tela em que são encontradas mais comumente na maioria dos jogos. Você pode (e deve) se aproveitar disso para o jogador acostumar mais rapidamente.
     • Use bem o espaço disponível: você tem uma tela inteira para distribuir os elementos de que precisa. Evite deixar todos eles amontoados em um único quadrante, enquanto n'outro a tela fica vazia sem motivo nenhum.

Até a próxima matéria!

Matéria baseada no artigo Heads-Up Display (HUD) e a aplicação em jogos digitais de Fabiano Naspolini

[Stella Artois]

Que ótima aula matéria, King!
Me ensinou ajudou a entender HUDs.
Belas dicas também.
Claro que irei usar!
Mas continuo preferindo a minha HUD que posicionei no topo centro da tela.
~Revolts
~Te vejo na próxima matéria, professor King!

[Geraldo de Rívia]

Então, estão não são regras a ser seguidas, somente uma diretriz pra te dar alguma noção.
Como criador, só tu sabe tudo sobre teu projeto, então vai saber o que fica melhor pra ele.
Gosto pessoal influencia muito também. Mas bom que serviu pra auxiliá-lo no entendimento.
Valeu por ler, Skyzinho xD

[Gabriel]

Como eu já havia dito antes, a materia ficou muito boa Gerar. Parabéns!



[hs width=320 height=175]http://cdn.wegotthiscovered.com/wp-content/uploads/618w_xenoblade_chronicles_screenshots_2.jpg[/hs]

Esse jogo ai (Xenoblade Chronicles), me deixou louco quando comecei a jogar. É muita coisa na tela o tempo todo. A coisa é informação voando pra lá e pra cá. Por sorte, com o tempo fui percebendo que as coisas, apesar de serem muitas, eram todas colocadas de forma estratégica para que não estragasse a experiencia com o jogo. Apesar de tudo, o jogo possui uma imersão perfeita e isso é devido ao posicionamento e funcionamento da HUD. Mesmo o jogo requerindo passar muita informação, os desenvolvedores souberam muito bem como dosa-las, onde coloca-las e como coloca-las.

[Ven]

Isso que é uma boa matéria, bem informativa e auto explicativa praticamente, é de fácil entendimento, o que torna simples tomarmos como exemplo tudo que foi apresentado. Adorei a explicação dos aviões, além de tudo pude aprender algo novo!
Gostei das dicas e das diferenças, além da boa explicação sobre o que verdadeiramente É uma HUD.

Ótima matéria Gerar, valeu por trazer ela aqui.