Comunidade

Semana de 3 Jogos - Comunidade DEV

O texto analisa três jogos - Subway Surfers, Vector e Water Sort Puzzle - destacando os conceitos matemáticos por trás de cada movimento, como vetores, distância e interpolação linear. Em Subway Surfers, o autor explora detalhadamente a mecânica do jogo, desde a verificação constante da distância entre personagens até a aplicação suave da interpolação linear em transições de telas e mudanças de direção.

Compartilhar
3-Game Week - DEV Community

Todos os jogos fazem cálculos enquanto você joga. Para esta tarefa, joguei três jogos e tentei vê-los como um desenvolvedor em vez de um jogador: Subway Surfers e Vector da lista recomendada do meu curso, e Water Sort Puzzle (Color Sort) como minha escolha pessoal. Por trás de cada deslizar e pulo há vetores, verificações de distância e fórmulas de interpolação rodando sessenta vezes por segundo, e assim que comecei a procurar por eles não consegui parar.

Antes de começarmos, as palavras matemáticas em inglês simples:

  • Distância: como longe duas coisas estão uma da outra.
  • Vetor: uma seta que diz para onde algo se move e a que velocidade.
  • Álgebra: números que mudam por uma regra, como pontuações e moedas.
  • Dot product: um teste rápido para saber se algo está na sua frente ou atrás de você.
  • Cross product: uma maneira rápida de decidir em qual direção algo deve virar.
  • Lerp (interpolação linear): se movendo um pouco mais perto de um alvo a cada passo ao invés de saltar para lá instantaneamente, então o movimento parece suave.

**

Jogo 1: Subway Surfers

**
Plataforma: Mobile (iPhone) · Gênero: Corredor infinito (ação) · Desenvolvedor: SYBO e Kiloo · Lançamento: 2012

Subway Surfers segue Jake, um garoto que é pego spray-painting um trem e foge pelas trilhas do metrô com um inspetor de segurança e seu cachorro atrás dele. Minha tarefa ao jogar era olhar para frente e fazer escolhas rápidas de fuga: saltar sobre trens e barreiras, rolar sob obstáculos, pegar moedas onde eu podia. A diversão vem da velocidade. Um toque errado acaba com a corrida, então não há momento em que você possa desligar.

A roda de jogo vai Menu Principal → Toque para Correr → Jogo (esquivar-se de obstáculos, coletar moedas, completar missões) → Acidente → Resumo de Pontos e Moedas → Gaste moedas → Corra Novamente. A roda é intencionalmente curta. Uma corrida pode acabar em vinte segundos, e a tela de resumo empurra você diretamente para outra tentativa.

Distância
O jogo verifica distâncias constantemente. Quando Jake tropeça em um pequeno obstáculo, o inspetor fecha a distância atrás dele, e um segundo tropeço enquanto o inspetor está perto te deixa preso. Então o jogo deve estar rastreando a distância entre esses dois personagens o tempo todo. Colisão também é uma questão de distância: quando a distância entre Jake e um trem chega a zero, isso é o acidente. A câmera mantém uma distância aproximadamente fixa atrás do jogador também.

Direção e Vetores
Jake sempre se move ao longo de um vetor para frente, e sua velocidade aumenta gradualmente. Um toque para a esquerda ou direita adiciona um vetor lateral que muda sua faixa. Um toque para cima dá a ele uma componente vertical para o pulo. Trem e obstáculos vêm em sua direção ao longo do oposto vetor para frente.

Álgebra
Números mudam constantemente enquanto jogo. Moedas aumentam em um por cada pegada. Pontuação cresce com a distância percorrida e então é multiplicada pelo multiplicador mostrado no topo da tela (x2 na minha captura de tela). Então o jogo está calculando silenciosamente pontuação = distância × multiplicador para toda a corrida.

Produto Escalar
Se um objeto está à frente ou atrás de um personagem é o teste clássico do produto escalar: tome o vetor para frente do personagem, tome o vetor em direção ao objeto e verifique o sinal do seu produto escalar.

Produto Vetorial
Quando Jake muda de faixa, seu corpo inclina-se na direção em que está se movendo, e a câmera gira ligeiramente com ele. Decidindo para qual lado girar, esquerda ou direita em relação ao frente, é a pergunta que o produto vetorial responde, já que seu sinal dá a direção da curva.

Interpolação Linear (Lerp)
Lerp aparece por toda parte neste jogo. Toque para mudar de faixa e Jake não teletransporta-se para a próxima faixa; ele desliza em uma fração de segundo. A câmera se ajusta suavemente após um pulo ao invés de pular instantaneamente. Painéis de menu deslizam, o contador de pontuação sobe gradualmente, a transição da prancha flui. Todo esse movimento intermédio é interpolação entre um valor inicial e um valor alvo.

Profundidade da mecânica: mudança de faixa
As três faixas estão em posições laterais fixas, digamos x = -2, x = 0 e x = +2. Quando o jogador toca a tela, o jogo define uma nova faixa-alvo, e após isso a posição lateral é atualizada com interpolação linear:

x = start + (target - start) × t // t varia de 0 a 1 em cerca de 0.25s

É por isso que o movimento parece suave, mas ainda assim responde rapidamente. As verificações de colisão não param durante o deslizamento também, então você ainda pode bater em um trem ao meio de um toque. Um toque combina um vetor (a direção lateral), uma interpolação linear (o deslizamento) e uma verificação de distância (a colisão).

Pontos Fortes

  • Os deslizamentos são registrados imediatamente e mapeados um para um com movimentos, então as mortes parecem culpa minha em vez de do jogo.
  • A câmera acompanha a uma distância estável e se move suavemente, é por isso que a alta velocidade nunca fica desorientadora.
  • A dificuldade é basicamente um único parâmetro: a velocidade para frente aumentando lentamente com a distância. Simples, e funciona.
  • Os obstáculos são codificados em cores e legíveis na velocidade. Sempre soube por que colidi.

O que eu melhoraria
Adicionaria uma recompensa por quase colisões. Se a distância entre o jogador e um obstáculo no ponto mais próximo ficar abaixo de um pequeno limite sem haver colisão, dê pontos extras. O jogo já calcula essas distâncias para detecção de colisão, então essa funcionalidade seria barata de construir, e daria aos jogadores habilidosos uma razão para correr riscos. Um modo de prática em velocidade reduzida também ajudaria os novos jogadores, e só precisa do vetor da velocidade para frente escalonado.

Então Subway Surfers parece simples, mas funciona com verificações constantes de distância, vetores de velocidade e interpolação. Sua polida vem menos de matemática complicada e mais de matemática fácil aplicada suavemente, em cada quadro.

Game 2: Vector

Plataforma: Mobile (iOS) · Gênero: Ação (corredor de parkour) · Desenvolvedor: Nekki Limited · Lançamento: 2012

Vector é sobre um homem, desenhado como um silhueta preta, que foge de um prédio de escritórios de vidro e corre pelas coberturas da cidade com um caçador de segurança o perseguindo. Você tem que chegar ao final de cada nível sem ser pego, coletando cubos de bônus e ganhando estrelas pelo caminho. O que me vendeu nesse jogo é a animação. O movimento parece genuinamente realista, e o caçador alguns passos atrás mantém a pressão durante todo o nível.

A jogabilidade segue o loop: Tela Inicial → Seleção de Nível → Jogabilidade (correr, pular, escorregar, fazer truques) → Final do Nível ou Capturado → Resumo de Estrelas e Bônus → Desbloquear Truques/Próximo Nível → Jogue o Próximo Nível.

Distância
A tensão toda de Vector vive em um único valor de distância: a lacuna entre você e o caçador. Cada erro, uma aterrissagem mal feita, colidir com um obstáculo, encolhe essa lacuna. Truques limpos aumentam ela. Quando chega a zero, o caçador te taseia e o nível termina. Coletar cubos de bônus é também uma verificação de proximidade; você pega um quando passa perto o suficiente dele.

Direção e Vetores
O jogo é literalmente nomeado após o conceito. O movimento do corredor é um vetor de velocidade com componentes horizontais e verticais. Correr constrói a parte horizontal; pular adiciona uma parte vertical. Escorregar mantém sua velocidade horizontal enquanto reduz sua altura. A inércia importa aqui: pule de uma corrida mais rápida e você voará mais longe, que é exatamente como um vetor de velocidade se comporta.

Álgebra
Os níveis concedem estrelas com base no desempenho e nos cubos de bônus coletados. Os cubos servem também como moeda para desbloquear novos truques de parkour, com preços aumentando para os movimentos mais elaborados. Desbloqueios de níveis são verificações de limiar nessas quantidades: complete o nível anterior, tenha estrelas suficientes.

Produto Escalar
Os obstáculos só desencadeiam sua interação quando o corredor os atinge de frente, na direção em que está se movendo. O caçador também reage à posição do jogador em relação ao seu próprio ângulo de visão. Ambos são questões de estar na frente ou atrás, o que é território do produto escalar.

Produto Vetorial
Os truques dos vetores são rotações completas: giros, rolamentos, saltos mortais. Cada rotação tem uma direção: giro para frente versus rolamento para trás, no sentido horário ou anti-horário. Representar em qual direção um corpo gira ao redor de um eixo é onde entra o produto vetorial.

Interpolação Linear (Lerp)
A famosa suavidade do Vector é a mistura. O personagem nunca pula instantaneamente de correr para saltar; a animação transita gradualmente entre os dois estados. A câmera desliza atrás do corredor em vez de rígida acompanhá-lo, se movendo suavemente em direção à sua posição em cada quadro. Isso é o padrão de seguimento da câmera lerp.

Profundidade mecânica: o arco do salto
Um salto no Vector é um movimento projetil. Ao decolar, o corredor carrega velocidade horizontal de correr e recebe velocidade vertical do salto. Em cada quadro, a gravidade consome a parte vertical enquanto a parte horizontal permanece aproximadamente constante, resultando em uma parábola. A consequência do jogo é direta: seu ponto de pouso é decidido no momento que seus pés deixam o chão. Salte cedo demais sobre um buraco e o arco simplesmente não cobre distância horizontal suficiente. É por isso que a verdadeira habilidade em Vector é o timing, não os reflexos. A parábola não negocia.

Pontos fortes

  • A movimentação é baseada em captura de movimento, então cada salto e rolamento parecem fisicamente críveis.
  • Um toque de entrada impulsiona um vocabulário inteiro de movimentos, mantendo os controles simples enquanto a saída permanece variada.
  • Niveis iniciais ensinam silenciosamente cada mecânica antes de combiná-las. A progressão da dificuldade é boa.

O que eu melhoraria
Eu vestiria o segurança diferente do homem em fuga para fazer uma pequena diferença.

Vector usa sua matemática no nome. Dos três jogos, ele é a prova mais clara de que um vetor de velocidade, gravidade e um valor de distância (a lacuna do caçador) são suficientes para criar um jogo envolvente.

O objetivo é apenas resolver o nível. A diversão é completamente diferente dos dois jogos de corrida: sem cronômetro, sem perseguição, apenas pensando. A satisfação está em desembaraçar um tabuleiro que parece impossível e transformá-lo em ordem perfeita.

O ciclo de jogo é: Tela Inicial → Começo do Nível → Jogo (selecionar tubo, derramar, repetir) → Empacotado? Use a função desfazer ou adicione um tubo extra → Nível Resolvido → Moedas/Recompensa → Próximo Nível.

Escolhi esse jogo esperando encontrar quase nada de matemática nele. Estava enganado.

Álgebra e Contagem
O jogo funciona com contagem e restrições. Cada tubo comporta exatamente 4 unidades, e um derramamento transfere:

derramado = min(unidades correspondentes no topo da fonte, espaço livre na destinação)

Se a fonte tem 3 unidades vermelhas no topo e a destinação tem 1 slot vazio, exatamente 1 unidade é derramada. Ao redor do tabuleiro há mais contagem: o contador de nível avança, moedas chegam por cada nível resolvido, e desfazer ou um tubo extra custa uma quantidade fixa de moedas.

Interpolação Linear (Lerp)
Quase toda a sensação desse jogo é interpolação. Toque em um tubo e ele sobe suavemente ao invés de pular para cima. Derrame, e o tubo selecionado desliza pela tela, inclina gradualmente e os níveis de líquido nos dois tubos animam para cima e para baixo durante cerca de 1 segundo. Esse nível de líquido é claramente sendo interpolado de seu valor antigo para seu novo valor. Mesmo a celebração ao completar o nível desvanece e escala suavemente.

Direção e Vetores
Quando um tubo viaja até sua posição de derramamento, ele se move pela linha reta entre seu slot e a destinação, deslizando ao longo do vetor entre os dois pontos. Um pequeno uso de vetores, mas claro em um jogo sem personagens.

Distância
A distância aparece no tratamento da entrada. Um toque seleciona o tubo mais próximo do ponto de toque, o que significa comparar a distância entre seu dedo e cada tubo na tela.

Lógica e Estado (além da lista de classes)
Cada tabuleiro é um estado, e cada derramamento legal move o jogo para um novo estado. Cada movimento tem que passar por duas condições (cores no topo correspondem ou a destinação está vazia, E a destinação tem espaço), e o jogo precisa notar o estado de vitória, onde todos os tubos são uniformes ou vazios. Assistir isso fez algo clicar para mim: um jogo sem física ainda é matemática. É apenas matemática discreta em vez de contínua.

Profundidade da mecânica: um derramamento, cinco etapas

  1. Uma verificação de distância resolve o toque no tubo escolhido
  2. O jogo valida o movimento: cores no topo correspondem ou a destinação está vazia, e a destinação tem espaço
  3. A quantidade derramada vem de min(unidades correspondentes no topo, espaço livre)
  4. O tubo levanta e viaja com lerp ao longo do vetor para a destinação
  5. Os níveis de líquido interpolam seus novos valores, então o estado do tabuleiro é atualizado

Um toque, e o jogo faz cinco cálculos antes que o líquido se estabilize.

Pontos Fortes

  • A interface é minimalista, basicamente nada na tela além do quebra-cabeça, então não há curva de aprendizado alguma.
  • A animação da transferência dá peso físico e satisfatório a uma ação lógica pura.
  • Níveis iniciais são trivialmente fáceis, e a dificuldade aumenta ao adicionar cores e remover tubos vazios. A fórmula de dificuldade é tão limpa assim.

O que eu melhoraria
Adicionaria uma contagem de movimentos par (resolvível em N movimentos) por nível para que os jogadores possam otimizar além de apenas resolver; cada nível se torna um problema de eficiência. E o jogo precisa urgentemente de um modo para color blindness com padrões ou símbolos em cada camada líquida, porque agora todo o estado do jogo é comunicado através da cor.

Color Sort provou o ponto da tarefa ao contrário. Escolhi-o esperando encontrar pouco matemática e encontrei-a em toda parte: na fórmula de transferência, na validação dos movimentos e na interpolação que faz o quebra-cabeça parecer vivo.

Reflexão
A ideia com a qual eu continuava me deparando era a interpolação linear. Estava em todos os jogos sem exceção: Jake deslizando entre faixas, o blend de animações e o glide da câmera em Vector, os níveis líquidos subindo e descendo em Color Sort. Antes desta tarefa eu teria arquivado tudo isso como "boa animação." Agora reconheço-o como uma fórmula única, um valor se movendo de um ponto inicial para um alvo ao longo do tempo, reutilizada em qualquer lugar que o jogo precisa parecer suave e não mecânico.

A tarefa também mudou a forma como eu assisto jogos. Usava a perguntar se um jogo era divertido. Agora me pego perguntando por que a câmera nunca treme, ou como o jogo sabe que um inimigo está próximo, ou qual fórmula define o preço de uma atualização. Como engenheiro de software, a maior surpresa foi quanto da "sensação do jogo" vem de matemática fácil. É checagem de distância, vetores de velocidade e lerp, executados consistentemente sessenta vezes por segundo.

Conclusão
Tres jogos muito diferentes, uma ferramenta única. Distância trata da detecção e colisão. Vetores tratam do movimento. Álgebra roda as pontuações e economias. Produto escalar e vetorial respondem às questões de orientação e rotação, e interpolação suaviza tudo que o jogador vê. Os gêneros, a velocidade e os públicos nada têm em comum, mas a matemática por baixo é a mesma, e após uma tarefa passada olhando para isso não consigo parar de ver.

Todas as capturas de tela são de minhas próprias sessões de jogo no iPhone.

Fonte original

Conteúdo traduzido e adaptado pela redação do Notícias Mobile. Confira também a matéria na fonte original.

Leia a matéria completa