Cursos / Jogos Digitais / Design de Jogos Digitais / Aula

arrow_back Aula 05 - Estética e Interface

Uma interface geralmente possui três camadas principais:

  • A camada de entrada e saída física do usuário, na qual ele executa os comandos e visualiza o mundo do jogo. Os componentes dessa camada são os dispositivos de controle (controle, teclado, mouse, volante, pistola, guitarra, captura de movimento) e a tela de saída (TV, computador, smartphone, tablet).
  • A camada do mundo do jogo, que representa os dados e informações que estão sendo visualizados e constantemente transformados pela ação do jogador. Representam o estado do jogo, dos seus objetos e cenários.
  • Uma camada intermediária na qual se realiza o mapeamento de alguns comandos/informações, chamada de camada virtual de interface. Essa camada é utilizada para apresentar informações que não são diretamente representadas no mundo do jogo, mas são importantes para o jogador, ou no caso de comandos que são executados pelo mesmo componente físico do controle, mas possui consequências diferentes no mundo do jogo, dependendo do contexto.

Ficou meio confuso, não acha? Vamos usar essa figura, baseada no livro do Schell, para tentar ilustrar como isso funciona:

Camadas da interface.

Geralmente, uma imagem vale mais que mil palavras! Vamos usar mil palavras para explicar essa Imagem. Vamos fazer isso através das setas de interação que existem na figura, numeradas de 1 a 6. A seta 1 indica uma ação que é realizada na camada do usuário e é diretamente mapeada para o mundo do jogo. Estas frequentemente são as ações mais comuns: eu aperto um botão, meu personagem pula, eu coloco o direcional para frente, ele anda, eu aperto o direcional duas vezes e ele corre (famoso Dash)! Podemos dizer que é um mapeamento direto dos controles para ações no mundo do jogo.

A seta 2 corresponde à apresentação de informações do mundo do jogo: meu personagem abriu uma porta e entrou numa sala, então o jogo deve mostrar que isso aconteceu. É o mapeamento direto dos resultados das ações que ocorreram no mundo/estado do jogo.

No Bomberman, quando apertamos um botão colocamos uma bomba no chão. Quando ela explode, destrói todos os blocos (e adversários) no caminho. Isso são exemplos de ações que ocorrem entre a camada do usuário e o mundo do jogo de forma direta. <br><span class='strong'>Jogo</span>: <span class='italico'>Bomberman</span>

Agora vamos ver o que acontece na camada de interface virtual. A seta 3 corresponde a uma ação do usuário em cima da camada virtual. Isso ocorre, por exemplo, quando queremos clicar em um menu do jogo para ver informações extras, configurações ou salvar o jogo. Não estamos mexendo com elementos do mundo do jogo em si, mas com informações à parte do nosso jogo que são importantes para a jogabilidade do mesmo. Nesse caso, estamos realizando ações na camada virtual da interface, na qual podemos salvar o jogo, ajustar a dificuldade ou as configurações de vídeo e áudio dele para melhorar nossa experiência.

Perceba que essas informações não necessariamente causam uma alteração no estado do mundo do jogo que é apresentado para o usuário, não gerando alterações na visualização (às vezes gera uma pequena notificação, mas na própria camada virtual da interface). Quando é necessário atualizar algo no mundo do jogo a partir de uma interação com a interface virtual, então temos o fluxo que ocorre na seta 4. Isso é comum quando temos botões na nossa interface que não pertencem ao mundo do jogo, são apenas atalhos para ações (hotkeys), e que ao clicar neles, uma ação é realizada no jogo. Esse tipo de comando é comum em jogos de estratégia (comandos de comportamento para unidades do jogador, como patrulha, exploração, ataque) e de RPG (magias, itens, habilidades especiais).

A camada virtual auxilia o jogador e acessar rapidamente as informações e emitir comandos. No jogo <span class='italico'>Baldur’s gate</span>, toda a parte periférica da interface faz parte da camada virtual, e nela é possível: mudar a formação em que os personagens se movimentam na tela, iniciar ações de combate e diálogo e acessar os submenus de informação do jogo. <br><span class='strong'>Jogo</span>: <span class='italico'>Baldur’s Gate II</span>

A interação do jogador é feita com esses botões da interface, mas ocorre uma ação no mundo do jogo em decorrência disso, sendo necessário atualizar o estado do jogo. Assim como ações podem ser executadas de forma indireta, a apresentação de informações também pode ser efetuada através da interface virtual. A seta 5 mostra o fluxo de informações do estado do jogo que não estão necessariamente mapeadas em elementos ou objetos do mundo do jogo, mas que são importantes para que o jogador possa tomar decisões de forma efetiva.

A energia de um personagem ou suas vidas, por exemplo, podem não ser necessariamente mapeadas na sua representação no mundo do jogo (ex. seu avatar), mas serem informações à parte, mostradas em um lugar específico da tela, para que o usuário a consulte.

Essas informações fixadas na tela em posições específicas compõem uma camada virtual de informações que não estão sendo exibidas diretamente no mundo do jogo, mas chegam ao usuário pelo fluxo representado pela seta 6. Outras informações que costumam ser exibidas através da interface virtual são pontos obtidos por ações ou informações de combate como dano aferido/recebido.

No jogo Super Mario World, as informações de vidas, pontos, tempo restante para completar a fase e item especial para uso estão todas fixadas na parte superior da tela. Apesar de não fazerem parte do mundo do jogo, são importantes para o jogador perceber seu progresso. <br><span class='strong'>Jogo</span>: <span class='italico'>Super Mario World</span>

Versão 5.3 - Todos os Direitos reservados