Jogos: Game Loop e Tratamento de colisão em Javascript

Esta é o segundo Post sobre uso de Javascript e do  Canvas do html  5 para o desenvolvimento de jogos 2D.  No Post anterior (Jogos: Introdução ao Canvas do HTML5) abordamos os conceitos de  Canvas,  Sprite, frame e de movimento. 

Conceitos Abordados neste Post

1. Game Loop
2. Tratamento de Colisão

Nesta aula, abordaremos os conceitos de game loop e o tratamento de colisões.

Game Loop

Jogos, geralmente, são implementados em um loop que obedece à seguinte sequência a cada iteração do loop. Primeiramente, as entradas são lidas, tais como teclas pressionadas, ou movimentos no Joystick.  A partir das entradas, as informações sobre o mundo do jogo, são  atualizadas. Após isso, a pontuação é calculada.  Na última, etapa iteração, o jogo é redesenhado para refletir o estado atual. 

Abaixo segue o código HTML da página para o nosso exemplo.

  Vamos mostrar o uso do game loop, a partir do nosso exemplo anterior da tartaruga. 

 

Nesta forma de implementar o GameLoop para o exemplo da tartaruga, criamos uma função que realiza as seguintes tarefas em sequência. Primeiramente, a tela anterior é limpa. Depois, o frame corrente  da tartaruga é alternado entre um e zero. Estamos apenas usando esses dois frames, porque esse é apenas um exemplo simples, e queremos dar impressão que a tartaruga está se movendo, mesmo que nenhuma tecla seja pressionada. Após isso, a função, desenha, é chamada para desenhar o estado atual do jogo. Finalmente, a função setTimeout é chamada, passando a função game loop como argumento é passando o tempo em milissegundos que a função GameLoop deve ser executada novamente.  Nesse exemplo, estamos passando o tempo de 1000 milissegundos, ou seja, 1 segundo.  Para o nosso exemplo, esse é um tempo de atualização de jogo suficiente, no entanto, para jogos dinâmicos esse tempo é insuficiente, sendo necessário taxas de redesenho ou refresh por volta de 60 frames por segundo. 

Outra possibilidade é o uso da função setInterval.  Essa função dispensa a chamada recursiva no fim da função, bastando que seja definido o tempo de re execução.

Finalmente, mais recentemente, os  navegadores passaram a  suportar uma nova função, a requestAnimationFrame.  Ela deve ser preferencialmente adotada, uma vez que os navegadores já estão desenhando na tela e, o que a chamada dessa função causa é dizer ao navegador para desenhar os elementos indicados quando for desenhar o próximo frame, mantendo as animações suaves. 

O navegador consegue,também, executar  até a taxa de atualização da tela do dispositivo, que é normalmente 60fps. Mas isso  nem sempre é possível.  Além disso, como o navegador controla o que está sendo desenhado, se minimizarmos o navegador ou trocarmos de guia, ele pode desacelerar o loop para que sua CPU não funcione desnecessariamente, tornando-o também o método mais eficiente.

Resultado

Como resultado, do uso do game loop, podemos ver a tartaruga se movendo, mesmo quando nenhuma tecla é pressionada.  Isso ocorre em função das sucessivas chamadas da função game loop.

Tratando Colisões

Outro elemento essencial de um jogo é o tratamento de colisões.  O tratamento de colisões é fundamental para verificar se um personagem tocou outro ou alguma coisa, ou para verificar se dois objetos se tocaram. A partir desta detecção, alguma ação é realizada.

O tratamento de colisões pode ser algo simples, como simplesmente definir um retângulo que envolve o elemento gráfico, denominado de bounding box, e verificar se ocorreu a colisão verificando se dois bounding box se tocaram, ou se sobrepuseram.  Porém, isso pode não ser suficiente para jogos mais complexos, com personagens graficamente mais elaborados, onde a colisão tem que ser tratada em um nível mais detalhada. Nesse caso, pode ser necessário envolver os elementos gráficos em formatos mais complexos, ou até mesmo usar bibliotecas apropriadas, uma vez que o tratamento de colisões pode ser computacionalmente caro.

 

Colocando mais um elemento

Para exemplificar o tratamento de colisões, iremos acrescentar um outro personagem em nosso jogo:  Uma formiga. A formiga realiza movimentos aleatórios na tela, e nosso objetivo será mover a tartaruga, usando as teclas de setas, para se aproximar da formiga até que ocorra a colisão.

O código mostrado implementa a função de colisão usando a ideia de bounding box. Ele testa todas as possibilidades de sobreposição entre os retângulos que delimitam os personagens.  Na imagem é possível ver qual linha de código que trata a colisão exibida.

Esse é o resultado da execução do código. 

Chegamos ao final deste Post. O código completo desta lição está no Github e pode ser acessado por meio do link nos comentários.  A execução do código pode ser vista neste link.  Se esse Post foi útil para você, por favor, considere deixar um comentário.