O Poder da HUD de videogames

GMTK é apoiado pela Patreon - https://www.patreon.com/GameMakersToolkit

O heads-up display (HUD) pode mudar a aparência, funcionalidade e experiência promovida por um jogo. Vamos descobrir como.

=== Antes de assistir ===

Aviso de conteúdo: um pouco de sangue

=== Fontes e Recursos ===

Origens

[1] Como fizemos a interface de The Last of Us funcionar tão bem | Kotaku
https://kotaku.com/how-we-made-the-last-of-uss-interface-work-so-well-1571841317

[2] Como a interface original do Slay the Spire quase matou o jogo | Ars Technica
https://www.youtube.com/watch?v=r_BPJzNPF6M

[3] Projeto de Mobilidade do Specter Knight| Jogos do Yacht Club
https://yachtclubgames.com/2017/07/specter-knight-mobility-design/

[4] Construindo jogos que podem ser compreendidos à primeira vista | Stfj
http://stfj.net/DesigningForSubwayLegibility/

[5] O golpe casual (mas real): Criando a mecânica do jogo em 'Reigns' | GDC Vault
https://www.gdcvault.com/play/1024278/The-Casual-(but-Regal)-Swipe

[6] A interface do Into the Breach foi um pesadelo de se fazer e a chave para sua grandeza
https://www.rockpapershotgun.com/into-the-breach-interface-design

[7] Hearthstone: Como criar uma interface de usuário envolvente | GDC Vault
https://www.gdcvault.com/play/1022036/Hearthstone-How-to-Create-an

Recursos adicionais

Direção de arte para AAA UI | GDC
https://www.youtube.com/watch?v=kjbxxbmJCh0

Mergulhando um mundo criativo em uma interface de usuário utilizável | GDC
https://www.youtube.com/watch?v=ONYmBBZiBj8

Preenchendo a lacuna entre os princípios de UX e o design de jogos | GDC
https://www.youtube.com/watch?v=73Pqsk74Jc0

Crafting Destruction: A evolução da interface de usuário do Dead Space | GDC
https://www.youtube.com/watch?v=pXGWJRV1Zoc

Então você quer fazer jogos ?? | Episódio 9: Design da interface do usuário | Riot Games
https://www.youtube.com/watch?v=sc3h5JXtIzw

Mergulho profundo de design de jogo: detecção dinâmica em Shadow Tactics | Gamasutra
https://www.gamasutra.com/view/news/290733/Game_Design_Deep_Dive_Dynamic_detection_in_Shadow_Tactics.php

A IU e UX do Persona 5 | Ridwan Khan
https://ridwankhan.com/the-ui-and-ux-of-persona-5-183180eb7cce

=== Suporte GMTK ===

Suporte GMTK no Patreon - https://www.patreon.com/GameMakersToolkit

Use a etiqueta do criador "GMTOOLKIT" ao comprar na Epic Game Store

=== Jogos exibidos ===

The Last of Us (2013)
Control (2019)
Crackdown 3 (2019)
Metro Exodus (2019)
Overwatch (2016)
Apex Legends (2019)
Call of Duty: Black Ops Cold War (2020)
Borderlands 3 (2019)
The Outer Worlds (2019)
Minecraft (2011)
Assassin's Creed Syndicate (2015)
Cyberpunk 2077 (2020)
Assassin's Creed: Odyssey (2018)
Eagle Island (2019)
Devil May Cry 5 (2019)
DOOM Eternal (2020)
Invisible, Inc. (2015)
Darksiders (2010)
Desperados III (2020)
Fire Emblem: Three Houses (2019)
Batman: Arkham Knight (2015)
Ghostrunner (2020)
Slay the Spire (2019)
Ori and the Will of the Wisps (2020)
A Hat in Time (2017)
Hitman 2 (2018)
Rage 2 (2019)
Homefront (2011)
Titanfall 2 (2016)
Sekiro: Shadows Die Twice (2019)
Star Wars Jedi: Fallen Order (2019)
XCOM 2 (2016)
Mario + Rabbids Kingdom Battle (2017)
Shovel Knight (2014)
Valkyria Chronicles 4 (2018)
Horizon Zero Dawn (2017)
Guacamelee 2 (2018)
God of War (2018)
Just Cause 3 (2015)
Monster Hunter: World (2018)
Resident Evil 7: Biohazard (2017)
Receiver (2012)
Sunset Overdrive (2014)
Battleborn (2016)
Final Fantasy VII Remake (2020)
Hitman 3 (2021)
Hitman (2016)
Tharsis (2016)
SpellTower (2011)
Hearthstone (2014)
Shadow Warrior 2 (2016)
Castlevania (1986)
Castlevania: Lords of Shadow (2010)
Ghost of Tsushima (2020)
Hellblade: Senua's Sacrifice (2017)
Persona 5 (2016)
Inside (2016)
Firewatch (2016)
Dead Space (2008)
Fallout 4 (2015)
Metroid Prime (2002)
Metroid Prime 2: Echoes (2004)
Far Cry 2 (2008)
Alien: Isolation (2014)
Call of Duty: Modern Warfare (2019)
Journey (2012)
Wreckfest (2018)
The Legend of Zelda: Breath of the Wild (2017)
Super Mario Bros. (1985)
The Last of Us Part II (2020)
Loop Hero (2021)
Reigns (2016)
Metal Gear Solid V: The Phantom Pain (2015)
Kingdom Hearts III (2019)
Gears of War 4 (2016)
Halo 5: Guardians (2015)
John Wick Hex (2019)
Mark of the Ninja (2012)
Katana Zero (2019)
Peggle (2007)
Shadow of the Tomb Raider (2018)
Forza Horizon 4 (2018)
Into the Breach (2018)
Immortals Fenyx Rising (2020)
Mirror's Edge (2008)
Room to Grow (2021)

=== Créditos ===

Música por…
Música fornecida pela Uppbeat - https://uppbeat.io
Códigos de licença: PC3D3JQOFKHA7FNZ | 0X6GO4104801KFOE | H6D2IULHUG0BH7F7

Por que trabalho na Insomniac: Abdul Bezrati | Jogos da Insomniac
https://www.youtube.com/watch?v=5a-DPaSzQk0&ucbcb=1

Eyetracking ao jogar Overwatch | Jon Matthis
https://www.youtube.com/watch?v=X_BalnBOcpk&ucbcb=1

=== Legendas ===

Contribuir com legendas traduzidas - https://amara.org/en/videos/izVGIyScVfOY
Traduzido por: mmentor210

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