← Caderno de laboratório

Eu queria criar um jogo. Primeiro, precisei aprender sua linguagem.

8 min de leitura

Três perguntas que todo jogo precisa responder, as seis palavras que tive que aprender e o que a minha primeira versão feita com IA errou.

Meu primeiro jogo da velha tinha um bug que não estava no código. Cliquei em uma casa, e um X e um O apareceram no tabuleiro no mesmo instante. Eu não sabia qual dos dois era o meu.

A primeira versão do jogo depois de um clique: um X no canto superior esquerdo e o O do computador no centro, colocados ao mesmo tempo, com o tabuleiro já visível antes de qualquer tela inicial.
Versão um, 18 de agosto: um clique, duas marcas. Sem tela inicial e sem pausa, nada me dizia qual marca era a minha.

As regras estavam certas: os testes rodaram todas as sequências possíveis das minhas jogadas contra o computador, 569 partidas, e ele nunca perdeu. Mas o jogo não conversava comigo. Não tinha começo, não deixava claro de quem era a vez e não tinha um momento que dissesse "você venceu, jogue de novo". Eu ainda não tinha palavras para nada disso, então fui aprender. Comecei a chamar essas convenções de "gramática do jogo". É um apelido meu, não um padrão formal.

Só quer jogar? Jogue o jogo da velha. Você não precisa ler isto antes.

Como começar a criar um jogo simples?

Esta é a ordem que uso hoje. Copie para as suas anotações antes de abrir um editor.

  1. Descreva o objetivo e como uma rodada termina.
  2. Esboce os momentos de início, partida, resultado e nova rodada.
  3. Construa as menores regras e os menores controles jogáveis, incluindo o que não pode acontecer: quando a rodada termina, todas as casas vazias travam.
  4. Mostre de quem é a vez e o resultado; depois, adicione efeitos que comuniquem mudanças reais.
  5. Observe alguém jogar e corrija o que atrapalhar.

Minha primeira versão pulou o passo 2. O resto deste post explica por que isso importou.

Seis palavras que fizeram tudo se encaixar

Cada termo vem com o que ele significa no meu jogo da velha.

  • Game loop (laço do jogo): mostrar a situação, receber a entrada, entender o que aconteceu, mostrar a nova situação. A anatomia de um videogame da MDN descreve isso em termos de engenharia. No jogo da velha: você escolhe uma casa, o jogo verifica se alguém venceu e o tabuleiro é redesenhado.
  • Estado: tudo o que o jogo precisa lembrar agora. No jogo da velha: nove casas, de quem é a vez e o placar da sessão.
  • Cena: um momento distinto, com uma função própria. No jogo da velha: título, partida e resultado. O resultado aparece embaixo do tabuleiro final, e Jogar novamente leva você direto de volta à partida.
  • HUD (heads-up display): a camada de informação sempre visível. No jogo da velha: a linha de status ("É a vez de X.") e o placar.
  • Feedback: a resposta direta do jogo a uma ação. No jogo da velha: a casa é preenchida e a mensagem de vez muda.
  • Juice: resposta extra por cima do feedback, como movimento, som, partículas ou tremor. No jogo da velha: quase nada, de propósito: a linha da vitória e uma pequena animação de entrada na marca mais recente.

Regra 1: um jogo mostra o que acontece a seguir

A versão um não tinha um caminho. O tabuleiro já aparecia ao carregar a página, e uma partida terminada simplesmente parava. A reconstrução do dia seguinte adicionou o caminho: título → partida → resultado → nova rodada.

Diagrama do percurso do jogo da velha, do título à partida, ao resultado e à próxima rodada.
Desenhar o percurso completo mantém o começo, o resultado e a nova rodada ao lado do tabuleiro.
A tela inicial do jogo atual: uma escolha de modo entre jogar contra o computador ou em 2 jogadores e um botão Começar jogo, ainda sem tabuleiro.
A reconstrução começa com uma escolha em vez de um tabuleiro, então você sabe que tipo de rodada vai jogar antes de ela começar.

Regra 2: a tela responde antes que você pergunte

A qualquer momento, a tela deve responder a três perguntas. De quem é a vez? Onde posso jogar? Quem venceu?

Na minha versão, uma linha de status diz de quem é a vez, as marcas guardam o histórico e uma linha atravessa as três marcas vencedoras.

Tela de jogo da velha com indicações de turno, jogadas disponíveis, modo, placar e nova rodada.
Informações úteis respondem à próxima pergunta de quem joga no lugar em que ela se torna relevante.

Alguns jogos desenham o HUD como uma sobreposição, como um contador de pontos. Outros o constroem dentro do mundo, como uma placa na beira da estrada. A dissertação de 2009 da Chalmers Beyond the HUD, de Erik Fagerholt e Magnus Lorentzon, me deu o vocabulário para essa escolha. Ela estuda jogos de tiro, não jogos de tabuleiro.

"Onde posso jogar?" também precisa funcionar sem mouse. Cada casa é um botão de verdade, seguindo o padrão de botão do W3C. Tab move um anel de foco visível, e Espaço ou Enter joga na casa. Casas já jogadas saem da ordem de tabulação.

Uma partida de 2 jogadores em andamento com X no canto superior esquerdo e no meio de cima, O nas duas casas da esquerda e do centro, e um anel de foco azul grosso na casa vazia do canto superior direito.
Quem joga pelo teclado recebe a mesma resposta para "onde posso jogar?": um anel de foco na próxima casa livre.

Regra 3: toda ação recebe uma resposta

O feedback vem primeiro. Coloque uma marca, e a casa muda. Complete uma linha, e o jogo anuncia o vencedor e desenha a linha.

A tela de resultado da primeira reconstrução: um cartão com 'X venceu — completou a linha superior.' e os botões Jogar novamente e Voltar ao início fica sobre o tabuleiro, cobrindo e escurecendo a linha verde que atravessa os três X.
Na primeira reconstrução, a cena de resultado anunciava o vencedor e oferecia o próximo passo, mas o cartão ficava sobre a linha da vitória e a escurecia. Só percebi isso ao tirar esta captura de tela.

O juice é a camada de cima. A demonstração "Juice it or lose it" adiciona esses efeitos passo a passo a um jogo simples no estilo Breakout, e o repositório que a acompanha permite examinar cada técnica.

Diagrama em camadas que coloca movimento, som, partículas e tremor acima das informações essenciais do jogo.
Comece com uma resposta legível e considere apenas os efeitos extras que ajudam a comunicá-la.

Minha versão é discreta de propósito: sem som, partículas ou tremor. Começar assim me fez perguntar o que cada efeito diria a quem joga.

Como a IA construiu o jogo e onde ela travou

Agentes de programação com IA escreveram o motor de regras, a página e os testes, a partir de uma especificação de design que eu passei. Uma etapa separada de QA com IA verificou o resultado e jogou no navegador. Mantive um registro de evidências com cada comando e cada falha.

  • Ela seguiu minha especificação bem demais. A especificação dizia que a resposta do computador "chega no mesmo instante que a jogada humana" e proibia um atraso artificial ou um indicador de carregamento. Os agentes construíram exatamente isso. Depois, o QA observou que a resposta instantânea dificultava distinguir a sua jogada da do computador. Esse é o bug do começo deste post, e foi a minha especificação que o causou.
  • Os primeiros testes falharam. Oito de 17 testes do motor falharam na primeira execução por causa de como o executor de testes desempacotava os dados das linhas vencedoras. O agente corrigiu a configuração dos testes, e todos os 17 passaram.
  • Um segundo agente pegou o que o primeiro deixou passar. O agente que construiu o jogo adicionou um link de fonte que falhava na verificação de tipos. A etapa separada de QA bloqueou o lançamento até que isso fosse corrigido.

A lição para mim: a IA construiu meus erros de gramática com a mesma fidelidade que as minhas boas ideias. Ela não tinha como me dizer que o jogo era confuso até que algo o jogasse.

Atualização: corrigi os dois problemas

Escrever este post revelou dois problemas, então corrigi os dois antes de publicar.

  • Agora o computador tem uma vez visível. Depois da sua jogada, a linha de status diz "Vez do computador — O está escolhendo…" por menos de meio segundo, e o tabuleiro trava. Então o O aparece com um contorno, para você ver qual marca é nova. Isso reverte a regra de "sem atraso" da minha própria especificação.
  • O cartão de resultado foi para baixo do tabuleiro, então a linha da vitória fica totalmente visível.
O jogo corrigido logo após a primeira jogada: um X no canto superior esquerdo, o resto do tabuleiro vazio e a linha de status dizendo 'Vez do computador — O está escolhendo…'.
Um clique, uma marca. A vez do computador agora tem o seu próprio momento na tela.
A tela de resultado corrigida: uma linha verde atravessa os três X da linha de cima, totalmente visível, com o cartão 'X venceu — completou a linha superior.' e os botões Jogar novamente e Voltar ao início embaixo do tabuleiro.
A linha da vitória agora fica inteira à vista, e o próximo passo aparece logo abaixo dela.

O que ainda não testei

Uma etapa de QA com IA já jogou este jogo. Uma pessoa ainda não, e esse é um teste diferente. O próximo passo é uma sessão simples, sem orientação, do tipo que o Nielsen Norman Group descreve: três pessoas, três tarefas cada (escolher um modo, terminar uma rodada, começar outra) e uma anotação sempre que alguém hesitar. Até lá, o design é uma hipótese.

Esta é uma ordem inicial para projetos pequenos. Movimento em tempo real ou uma história mais longa vão mudar as perguntas. É isso que a minha pesquisa sobre jogos de plataforma investiga.

Você pode ajudar: jogue uma rodada e me conte o primeiro momento em que você não soube o que fazer. Uma DM ou um comentário no @ai.maker.lab no Instagram chega até mim.

Agentes de programação com IA construíram o jogo, e IA e automação ajudaram a produzir este artigo. Sou o proprietário do AI Maker Lab e assumo a responsabilidade pela redação final e pela verificação das fontes.

Fontes

Continue lendo