Testes da Vida – a história do nosso health HUD até aqui

By August 3, 2013Art

Olá pessoal, eu sou Camilla Slotfeldt, a artista 2D do projeto Tilt! 🙂 Estamos começando com nossos posts contando o desenvolvimento do projeto, e vocês devem estar se perguntando: “… artista 2D? Mas não tem nada de arte nesse jogo ainda!”. Pois é. Eu entrei no projeto bem mais tarde que os outros membros da equipe (e agora recentemente recebemos um novo modelador 3D, o Daniel, para nos ajudar), e com a saída de alguns membros anteriores, acabei sendo a única pessoa de arte por algum tempo! Mas a primeira coisa que eu fiz no jogo quando entrei foi trabalhar na interface de vida (health) do jogador e da barra de uso do jetpack. A equipe já tinha várias ideias para essa parte da interface, que na época consistia em  barras no canto inferior da tela. (Na imagem abaixo há também uma terceira barra, de munição da arma).

screenshot tilt

A questão é que a posição dessas barras na tela não estava funcionando muito bem. Olhar para esquerda/baixo para ver o health do seu jogador era um pouco demorado, especialmente em um jogo onde você pode morrer com 1 tiro. Por isso, começamos a experimentar novas opções e testá-las semanalmente com nosso grupo de teste, o que foi uma oportunidade bem interessante, que nem todo projeto consegue ter.

Teste da vida na retícula

A primeira opção que testamos foi uma ideia bem diferente, que sabíamos que tinha uma grande chance de não funcionar: colocar o health e o jetpack na mira (a retícula, ou a “setinha do mouse”, onde fica a mira para o tiro do jogador). Essa seria uma interface não-usual, mas que poderia ficar interessante graficamente e ser um diferencial se funcionasse. Além disso, íamos testar a hipótese de que o jogador olha bastante para a mira, mais do que para os cantos ou até para o próprio personagem no centro da tela.

Screenreticula     Interfacereticula01

Aproveitamos a forma circular da retícula e a dividimos em dois semi-círculos: um na esquerda para a vida e outro na direita para o jetpack. Nós queríamos que o health fosse dividido em pedaços bem marcados, como “quadradinhos”, para que as linhas entre eles servissem de marcação e ajudassem o jogador a saber melhor com quanto de vida ele está no momento. O personagem tem 100 de vida, então dividimos o semi-círculo em 10 partes, e acreditamos que assim ficava mais fácil saber se o jogador tem no momento 50 ou 70% de vida, por exemplo, vendo pelo número de partes. O resultado desse teste foi bem interessante! Diferente do que achávamos, as pessoas do grupo, que jogaram conosco usando a interface nova, não fizeram tantas queixas nem falaram ter achado estranho. Muito poucas pessoas deram algum feedback negativo sobre o novo HUD e o teste até fluiu normalmente. Porém, nossos testes são online e muitas vezes as pessoas não se expressam tanto, e a nossa própria opinião sobre o jogo tambem é muito importante para nós. E por uma avaliação da equipe, percebemos que não olhamos tanto assim para a mira quando jogamos, e, apesar das pessoas não terem falado muito, o gameplay ficou sim um pouco prejudicado.

Vida em volta do player

Resolvemos então partir para um próximo teste! Dessa vez, a hipótese era de que olhamos mais para o nosso personagem do que para a vida ou para os cantos. Essa hipótese faz bastante sentido se formos ver outros jogos parecidos com os nossos, que usam o health embaixo do personagem com uma pequena barra, por exemplo. Como nós precisamos de duas barras, a de vida e a do jetpack, resolvemos experimentar uma ideia mais diferente mais uma vez e fazer o HUD circular, em volta do personagem. Uma das referências que usamos na época foi o Ice HUD, uma modificação de Word of Warcraft:   3a7e39cabb7a40eb5e46fb8b35e412a8

O nosso resultado foi o seguinte:

Screenshot---Health-HUD-em-volta-do-player

Mais uma vez testamos a interface nova e a aceitação dessa foi melhor. A equipe tambem ficou bem mais satisfeita com o resultado, e resolvemos manter essa forma por enquanto. Ao mesmo tempo, nós  também trabalhamos em outra parte importante da interface do jogo, o radar, que ficou muito interessante em conjunto com o health HUD. O radar reconhece jogadores que estejam lutando (atirando) e possam representar perigo, ou que estejam usando o jetpack  nas redondezas, e mostra setas em volta do personagem, indicando a direção da ameaça. Quando refizemos o radar, colocamos as setas para girar em volta do HUD, e a forma circula dos dois combinou muito bem!

Screenshot health hud + radar

Conclusões! Porque esses testes foram bons?

Aprendemos algumas coisas interessantes com os testes, tirando conclusões tanto de ver como ficam opções diferentes de interface (experimentar coisas que ninguem te aconselharia a fazer é muito legal tambem), quanto de avaliações nossas para o que queremos ver no nosso jogo, e de feedbacks de usuários. Algumas coisas que percebemos:

  • O usuário olha bastante para o player e isso faz mais sentido para ele
  • O jogador não olha tanto para mira quanto se poderia imaginar, ou pelo menos não com um intuito diferente de atirar
  • Quanto de vida o jogador tem no momento não faz TANTA diferença no nosso jogo, porque é muito dinâmico. Algumas armas matam com apenas um tiro, e o jogador pode preferir olhar para a vida somente quando já tomou dano, para saber se ainda pode aguentar lutar ou deve correr para procurar um health pick-up (item de recuperar vida) no cenário
  • Mais interessante ainda que o health HUD  para o nosso jogo é dar um bom feedback de dano, tanto visual quanto sonoro. Para isso adicionamos bordas vermelhas na tela quando o jogador toma dano, baseado na conclusão dos testes

Por mais que algumas conclusões sejam óbvias, ou não, tivemos a oportunidade de testar sem nos apoiar em concepções pré-estabelecidas e decidir o que era melhor para o nosso jogo, e acho que é assim que pretendemos continuar trabalhando daqui pra frente 🙂  Ainda queremos fazer novos testes, mas agora estamos focando em outros pontos. Provavelmente vamos fazer uma reavaliação do health HUD quando finalizarmos a arte do personagem, e aí vamos ver como ela se comporta. É isso! Espero que tenham gostado e que esse tipo de post possa ser útil e/ou interessante para outras pessoas desenvolvendo jogos no futuro! Qualquer coisa, dexem um comentário, quero muito conversar com outras pessoas e ver o que vocês tem a dizer sobre o que estamos fazendo!

É isso aí galera, se você está interessado em participar do jogo e ver de perto nosso processo de desenvolvimento é só pedir sua inscrição no nosso grupo de Facebook: www.projecttilt.com/bitcakestudio/testers, depois de aceitos vocês ganham acesso do jogo através do link: www.projecttilt.com/bitcakestudio/tilt ou pelo seus APPs do Facebook. Bom Teste!

milla

Author milla

More posts by milla

Join the discussion 8 Comments

  • Hugo Vaz says:

    Obrigado! Acompanhar o desenvolvimento assim tao de perto é uma oportunidade de reavaliar nossos proprios metodos e processos. 😉

    • Camilla Slotfeldt says:

      Obrigada você Hugo, que bom que você curtiu! Se tiver alguma coisa que você acha que daria um bom post, pode mandar pra gente 🙂

  • Jose Ricardo Junior says:

    Muito bom o estudo! Parabéns!

  • Gabriella Bee Balista says:

    Muito bom mesmo o estudo, Camilla. Participei dos testes do jogo algumas vezes no início e cheguei a comentar lá no grupo. Uma coisa que sinto falta nesse health HUD é a variação de cor para quando o jogador está com pouca vida (o clássico verde para vida cheia e vermelho para pouca vida). É apenas um detalhe, mas acho que faz bastante diferença ter um feedback de cor num jogo dinâmico como esse. Nem sei se já chegaram a testar isso, mas acho que valeria à pena ver como fica.

    Abraço e parabéns… o jogo tá ficando muito legal. =D

    • Camilla Slotfeldt says:

      Oi Gabriella! Ótimo feedback! É um bom teste para a gente fazer, vou dar uma estudada nisso! A gente estava querendo mesmo experimentar uma indicação maior de quando sua vida está bem no limite. Valeu pela dica 🙂

  • Renan Spadafora Amaral says:

    Ficou realmente bem interessante.
    Não sei se de propósito, mas nas últimas duas imagens, pareceu haver uma jogada de alpha para que as “barras” não atrapalhassem a visão. Acho uma idéia muito válida. Acrescentaria q o alpha pode ser gradual, sendo um pouco mais visível no nível atual e clareando para as bordas.
    E como a Bee sugeriu, a troca de cores na vida ajuda no feeling de emergência.
    Way to go !
    [ ]’s

    • Camilla Slotfeldt says:

      Valeu, Renan! Foi isso sim. Acabei nem falando no post, mas trabalhamos a transparência do HUD para ele não atrapalhar ou ofuscar a visão do personagem, o que é muito importante para nós, especialmente porque o personagem será customizável.
      Obrigada pelo comentário! A dica do alpha tambem parece muito boa para o acabamento. Bjos!

Leave a Reply