Com apenas oito meses para concluir The Last of Us, a Naughty Dog finalmente
começou a trabalhar na interface de usuário (UI) do jogo
"Enquanto alguns elementos da UI já haviam sido esboçados," explica a designer
Alexandria Neonakis, "o design geral da HUD não tinha
sido estabelecido, e muitas coisas ainda estavam incertas".
Creio que isso é testemunho tangível de que a UI
pode ser uma das partes mais subestimadas do desenvolvimento de jogos.
Um incômodo, pensado de última hora.
Mas, se você me perguntar, eu digo que não deve se subestimar a UI, pois ela pode
ter um grande impacto na aparência, funcionalidade e experiência do jogo.
E então, nesse episódio de Game Maker's Toolkit, gostaria de explorar a interseção da UI
com design de jogos, para descobrir como barras de vida e energia podem mudar como jogamos.
A UI engloba um monte de coisas diferentes.
Como lobbies online, telas de inventário, árvores de diálogo, menus de criação de itens, lojas, etc.
Mas nesse vídeo, quero focar em um único tipo de UI: o heads-up display, ou HUD.
Isso são as coisas que são colocadas em cima do gameplay, quando você tá na ação
Então, a primeira pergunta, eu acho - é: qual é o propósito da HUD, e que
benefícios ela provê para o jogador?
Para ajudar a responder essa pergunta, irei
dividir a HUD em duas partes diferentes, que chamarei de medidor e preview
Medidores são aqueles que a gente imagina geralmente quando pensa em HUDs.
Esses servem para pegarmos informações que seriam normalmente invisíveis e
mostrando-as para o jogador.
Então, a vida de um personagem é geralmente
um número escondido na programação do jogo - mas uma barra de vida o revela para o jogador.
O comportamento da AI pode ser incompreensível sem auxílios visuais
como cones de visão, alcance de um movimento e indicadores de ataque.
E por causa de limitações da câmera, informações críticas podem
ficar escondidas por trás dos panos - a não ser que seja realçada com indicadores ou mini-mapa
Medidores são sobre ajudar o jogador a entender o estado atual ou futuro do jogo
- o que os permite fazer planos e movimentos intencionais.
Aqui está um estudo de caso do jogo de construção de deck Slay the Spire.
Cedo em seu desenvolvimento, inimigos não davam nenhuma indicação do que iam fazer.
Então jogadores não sabiam se bloqueavam ou atacavam em cada turno, e acabavam
jogando de maneira mais aleatória.
Para consertar isso, desenvolvedor Mega Crit
adicionou esses indicadores que mostram o que o inimigo vai fazer em seguida.
Agora o jogador pode fazer decisões mais
inteligentes sobre como usar sua mão - e criar estratégias sinergéticas e prazerosas
Então isso são medidores.
Previews, por outro lado, são sobre mostrar o que vai acontecer quando você apertar um
botão ou realizar uma ação.
Em sua forma mais simples, são aqueles ícones de botão que aparecem
para ações contextuais - como Y para abrir porta, X para entrar no carro, E para pular em vala comum.
Espera aí.
Hã.
Mas um preview pode também ser algo como um arco que mostra a trajetória da
granada que você vai jogar.
Um indicador que mostra quando você tá em alcance de um ponto de gancho
Um lock-on para mostrar que inimigo você vai atacar
Ou essa linha que te mostra exatamente para onde o seu soldado vai em XCOM
Previews são sobre dar ao jogador um "aviso" sobre as consequências das ações
que eles podem realizar, antes que eles a façam.
Isso permite ao jogadores agirem com mais confiança, ao invés de usar a fé cega.
Para esse estudo de caso, vamos olhar para Shovel Knight.
Na terceira campanha de DLC, Specter Knight tem um ataque que
o permite cortar objetos e se lançar para o outro lado rapidamente.
Inicialmente, Yacht Club Games realçou essa interação com uma simples mudança
na pose do personagem, mas viu que isso não explicava bem quando ou onde essa ação
sensível ao contexto poderia ocorrer - ou onde o Specter Knight ia acabar no final.
Por fim, o time colocou um simples indicador que aparece quando você está perto de objetos.
Isso claramente demonstra que o golpe só irá acontecer quando você apertar o botão relevante
- e lhe mostra exatamente onde você vai parar quando apertá-lo.
A retícula foi "a mudança mais importante para fazer o golpe compreensível,"
diz o desenvolvedor.
Então medidores e previews são ferramentas muito úteis para fornecer informações
- seja sobre o estado atual do jogo, ou uma previsão do futuro próximo.
Isso permite aos jogadores interagir com confiança e conforto, fazendo planos específicos e relevantes.
Mas é aí que tá - por trás dos panos, jogos estão rastreando centenas de variáveis
e a UI poderia mostrar qualquer uma delas diretamente para o jogador.
E daria para mostrar o preview de qualquer ação antes que ela aconteça.
Então por que jogos não te mostram toda essa informação?
Bem - assim como há benefícios ao revelar essa informação ao jogador, também
existem vantagens ao não mostrar tudo.
Se você for olhar o design de UX - UX sendo a base experiencial e psicológica que guia
a UI - você vai dar de cara com o termo "carga cognitiva"
Ele se refere a como o cérebro só consegue lidar com um certo número de informações.
Então quanto mais coisa você mete na tela, mais difícil é analisar o jogo.
Tecnologia de rastrear olhos demonstra o quanto nossos olhos se mexem ao redor da tela
para manter toda essa informação em mente.
Então, ao reduzir a UI - ao se livrar de coisas que são irrelevantes ou repetidas
ou só de enfeite - podem reduzir a carga cognitiva.
Mas - não é só sobre se livrar de coisas.
E, de fato, a UI pode às vezes ajudar a carga cognitiva.
Se você tivesse que lembrar de quantas balas você atirou, na confusão você
pode perder a conta e não lembrar se atirou seis ou cinco vezes.
Um contador de munição é mais eficiente nesse caso.
Então o segredo é, na verdade, ser esperto com o layout para garantir
que o que está na tela é relevante e fácil de absorver.
Um jeito de fazer isso é pensando na hierarquia visual.
Aí é quando usamos técnicas como peso da fonte, cor, escala, posição e movimento
para fazer alguns elementos aparecerem mais que outros.
Se tudo na tela tá gritando com a mesma
intensidade, é difícil saber onde se concentrar exatamente.
E se nada é ressaltado, informações críticas pode passar despercebidas.
Considere, por exemplo, a notificação de "invadindo" em Hitman.
Isso é um alerta vital e útil, mas em Hitman 2016, é capaz de você nem vê-lo -
é só uma simples legenda que aparece embaixo do mini-mapa, no canto da tela.
Então foi bem melhorada em Hitman 2, onde a legenda é amarela, e pisca através
do mapa, chamando a sua atenção.
É ainda melhor em Hitman 3, onde essa mudança de estado é apoiada por um barulho.
Efeito sonoro
Para ajudar a pensar em hierarquia visual, designer Zach Gage fala sobre o princípio
das "Três Leituras" - três níveis de informação visual, elencados de mais para menos importantes
Então, Zach explica isso com um de seus próprios jogos: SpellTower.
A primeira leitura serão os elementos principais do jogo - as letras usadas para soletrar.
A segunda leitura vai mostrar regras críticas e vitais para o gameplay, como colunas
que estão perto de acabar o jogo e letras bónus azuis que
irão limpar uma linha inteira.
E a terceira leitura vai mostrar coisas menores, menos importantes, como
regras contextuais, como esses quadrados que só podem entrar em palavras mais longas.
Desenvolvedores podem ranquear informações em ordem de importância, e usar o design
para garantir que as coisas mais relevantes estejam destacadas.
E porque jogos são dinâmicos, é possível que a informação ande entre leituras
diferentes em momentos diferentes.
Zach aponta para Hearthstone com uma "onda constante de coisas sendo ressaltadas na
primeira leitura, e depois aparecendo nas segunda e terceira leituras".
Outro jeito de reduzir a carga cognitiva é perguntar: todos esses elementos de HUD
precisam ser mostrados o tempo todo?
Por exemplo, em Castlevania 1 você podia ver a vida do Chefe durante o nível
inteiro, por algum motivo.
Hoje em dia, ela só aparece quando você começa a briga.
Mas esse princípio pode se estender para praticamente qualquer elemento de UI.
Em Ghost of Tsushima, você só vê a sua vida quando pega a espada, pois só é
relevante para o combate - e não para a exploração da ilha.
Okay. Outra razão para tirar a HUD - e essa tá ficando cada vez mais popular
- é em termos de apresentação.
O desejo de tornar jogos mais cinemáticos e envolventes, e de não acabar com
aqueles belos visuais em 3D com elementos sem graça em 2D.
Se bem que, qualquer um que acha que UI tem que ser sem graça nunca jogou Persona 5.
♫ Música de Persona 5 ♫
Mas, isso não é simplesmente remover a HUD inteira.
Isso não é algo que deve ser feito às custas da legibilidade e compreensão
Ao contrário, é sobre ser inteligente com como a informação é apresentada.
Então, como antes, desenvolvedores podem esconder a informação e mostrar só quando necessário.
Mas outra solução é tornar elementos de HUD diegéticos.
Isso é quando a UI existe de verdade, fisicamente, no mundo do jogo.
A instância mais popular disto é, claro, Dead Sapce.
Para tentar aumentar as qualidades envolventes do jogo de survival horror, a Visceral Games
removeu a HUD e colocou a informação no próprio mundo do jogo.
Então a vida e medidor de estase do Isaac estão nos canos e indicadores de seu traje.
O contador de munição de cada arma aparece na arma em si.
Até coisas como o inventário são estilizadas como projeções holográficas no mundo.
Podemos ver exemplos eficazes desse tipo de HUD em outros jogos também - em Metroid
Prime, a HUD funciona exatamente como em outros jogos, mas ao colocá-la no visor da
Samus, e ao fazê-lo embaçar e mexer de maneira realística, ele aumenta a sensação
de estar presente e sua conexão com o personagem.
Mas não é só sobre estilo e apresentação.
Tornar a informação diegética pode levar a consequências interessantes no gameplay.
Em Alien Isolation, você pode segurar um aparelho para ver um radar de movimento.
É parecido com um mini-mapa em um jogo como Call of Duty, mas porque é uma
ferramenta física - significa que você tem que escolher entre acessar essa informação
ou segurar uma arma.
Você não pode fazer os dois.
Uma HUD diegética não tem que ser só barras de vida e contadores de munição
que são renderizadas no mundo do jogo de maneira criativa.
Porque se você for a frente com essa ideia, pode usar elementos que não seriam
necessariamente considerados UI para expressar a mesma informação.
Por exemplo, você não precisa de uma barra de vida em Wreckfest para saber o quão
perto o seu carro está de ser destruído - dá para ver no próprio carro.
E você realmente precisa de um indicador para ver se o Link tá com frio ou calor
em Breath of the Wild?
Dá para ver isso em Super Mario Bros., onde a vida do Mario é representada
pelo seu tamanho.
Okay, então outra razão para diminuir a HUD é de deixar o jogo menos legível
de propósito.
Em The Last of Us Part II, os primeiros inimigos humanos vão dizer seus planos
e intenções em voz alta, te dando uma ideia do que eles estão pensando e
lhe permitindo planejar de acordo.
Mas depois, você encontra uma nova facção de inimigos que se comunica exclusivamente
através de assobios.
Assobio Impacto de flechaEllie grita
Esses assobios são feitos justamente para serem impossíveis de interpretar.
Então, eu achei esses inimigos bem mais intimidadores e difíceis de enfrentar
- em grande parte por causa dessa falta de informação.
Indo mais adiante, a quantia de informação que temos como jogadores irá mudar
completamente o nosso comportamento.
Os desenvolvedores de Reign chegaram a essa conclusão ao fazer seu
jogo de gerenciamento inspirado no Tinder.
Inicialmente, o jogo mostrava os números exatos de todas as estatísticas e como as
suas escolhas iriam impactá-los.
Mas na fase de testes, jogadores focavam quase que exclusivamente em tentar otimizar
esses números - e ignoravam a maioria do texto.
Depois de mudar a UI para barras mais imprecisas, jogadores voltaram a ler a
história e a agir em um nível mais emocional - em vez de mais analítico.
Eu creio que isso prova que desenvolvedores não necessariamente precisam remover a HUD
por completo, mas devem ao menos considerar o quão precisa deve ser.
Você quer que a vida seja representada por um número exato, uma barra
ou só uma mancha vermelha no meio da tela?
Depende muito do que o jogador vai fazer com essa informação - é para calcular
diferenças exatas, ou só um aviso para recuar e achar abrigo?
Quando se fala daqueles elementos preview que eu falei mais cedo... quanto mais no
futuro, e o mais precisa que a informação é, mais precisos serão seus planos.
Como em Mark of the Ninja, que lhe mostra exatamente o que vai acontecer quando
você jogar uma faca nesta lâmpada.
Mas se você reduzir a "futuridade" dessa informação, ou torná-la vaga e imprecisa,
força o jogador a aprender e internalizar como funcionam as mecânicas do jogo.
Considere Peggle por um momento.
Por padrão, o indicador de tiro mostra onde vai parar a bola... até o primeiro tiro.
Então depende de você calcular mentalmente a trajetória e ricochete depois disso.
Faz parte da curva de aprendizagem.
Há um jeito de empurrar esse preview para mais longe no futuro - mas isso é um power-up,
o que demonstra quão importante essa informação pode ser.
Também, você sabia que tem uma patente para o gameplay em Peggle?
Porque, eu acho que isso é um tema no canal, agora.
Porque a UI é tão poderosa, ela pode, então, ser usada para dificultar ou facilitar as coisas.
Considere como jogos de corrida geralmente mostram uma linha ideal no modo fácil,
mas pede que você se vire em dificuldades maiores.
A UI pode ser usada para mudar a dificuldade em modos, ou durante a campanha
- como qualquer outro elemento de gameplay.
Então eu acho que isso tudo mostra que a UI pode ter um efeito muito forte em um jogo.
E se usada de maneira eficiente, a UI pode apoiar e avançar os objetivos do design do jogo.
Mas... e do jeito oposto?
Não o design do jogo influenciando a UI, mas a UI influenciando o design do jogo.
Para um estudo de caso final, vamos olhar o jogo de táticas determinísticas Into the Breach
O jogo mostra o que você e todos os inimigos vão fazer, ao mesmo tempo nessa grade pequena.
O resultado é uma rede complexa de setas e ícones que te dão uma ideia completa do
que o exército inimigo está planejando.
Mas desenvolvedor Subset Games descobriu que para o sistema funcionar, certos inimigos
e armas tinham que ser removidos do jogo - só porque eram muito difíceis de mostrar.
Coisas como armas com uma grande cadeia de causa e efeito, ou ataques inimigos que
iriam impactar uma área grande.
Co-designer Justin Ma diz que "só como um princípio de design, sacrificávamos
ideias legais para fins de clareza toda vez".
E isso não é o único jogo onde isso acontece.
Em Hearthstone, o motivo pelo qual só se tem 7 cartas ativas por vez é porque
isso era o número que cabia na tela.
E certos poderes de herói foram mudados por serem muito complexos para os elementos de UI.
No fim das contas, se algo não pode ser feito claro ao jogador, talvez não seja
uma boa mecânica e precisa ser simplificada.
A UI não é um band-aid para consertar mecânicas quebradas - por isso é importante
fazer o design da HUD coerente com todo o resto - e não só juntar tudo no final.
Porque como tudo em desenvolvimento de jogos, a UI não deve ser feita de maneira
arbitrária, ou "porque é assim que outros jogos fazem".
Ela deve ser feita com pensamento e intensão claros.
Me diga que jogos você acha que tem uma UI legal nos comentários.
É hora de recomendação de Indie!
Esse é o Room to Grow - um jogo de Puzzle em grade sobre um cacto que pode crescer
para empurrar plantas para o objetivo.
Ele vai ficando cada vez mais difícil à medida que você empurra a parede para se mexer.
E aí ainda mais mecânicas são jogadas em cima disso.
É um joguinho bem pensado e com bastante charme e
desafios meta sinuosos.
Já está disponível no Steam. Legendas: mmentor210