Desenvolvimento de jogos web com Pixi.js – Parte 2

O Pixi.js é um framework muito robusto que atende à grande maioria das implementações que você venha a precisar no desenvolvimento dos seus jogos ou aplicações gráficas na web. Entretanto, muitos dos recursos precisam fazer uso de APIs de terceiros e/ou bibliotecas utilitárias para atender a implementações não fornecidas pelo mesmo, como o mecanismo de detecção de colisões entre objetos nos jogos. Esse tipo de funcionalidade é extremamente importante, principalmente em jogos clássicos que seguem o estilo de personagem principal contra personagens inimigos. Além disso, mesmo que não tenhamos o choque entre personagens ao longo do jogo, o mínimo de detecção de espaço entre os limites do cenário e o personagem nele inserido precisa ser atendido pelo seu projeto.

E é justamente sobre isso que iremos tratar neste artigo: como detectar a colisão entre dois objetos e, a partir disso, determinar o que acontecerá com os mesmos e com o cenário como um todo. É importante salientar que esse recurso precisa ser o mais genérico possível, retornando sempre um booleano e recebendo os objetos que necessitam ser checados quanto à colisão; uma vez que só determinaremos a ação pós-colisão quando a mesma ocorrer. O leitor precisa, a este ponto, entender que os conceitos aprendidos até aqui se intercalam e comunicam entre si, tendo dependência direta e hierárquica. Por exemplo, para que possamos criar uma função que detecte uma colisão, precisamos antes criar os objetos de sprite via Texture Packer e JSON, bem como mapear seus eventos de clique nas teclas que resultarão na sua movimentação básica, etc. Portanto, uma boa revisão nos conceitos vistos seria muito aconselhada.

Detectando colisões

Agora que já temos a estrutura básica necessária para trabalhar, em JSON, com a criação dinâmica de sprites adicionando-os ao cenário, podemos partir para uma técnica muito importante no universo dos games: a detecção de colisões entre os objetos. Até o momento, nossos objetos apenas desempenham tarefas simples, como a caminhada (ou corrida, na qual incluímos os conceitos de velocidade, aceleração e fricção) e os eventos de movimento associados às teclas das setas do seu teclado.

O Pixi.js não fornece, por padrão, um mecanismo nativo de detecção de colisões, mas podemos fazer uso da biblioteca chamada Bump.js (vide seção Links), que já se integra automaticamente ao Pixi, disponibilizando uma série de funções para lidar com a manipulação de colisões em jogos 2D.

Como primeiro passo, vamos efetuar o download da biblioteca (apenas do arquivo bump.js) e importar o mesmo na nossa página HTML logo abaixo do script do Pixi (é interessante considerar a criação de um novo arquivo para o código que faremos a seguir). Finalmente, para fazer uso da API, basta criar um novo objeto do tipo Bump na sua função setup(), tal como:

var bump = new Bump(PIXI);

Veja que também passamos o objeto PIXI como parâmetro, já que a mesma precisa receber a engine de jogos que estamos usando.

O que vamos usar da API em si basicamente é o seu método principal: a função hitTestRectangle() (acesse o arquivo JavaScript para mais detalhes da sua implementação). Essa função, por sua vez, recebe dois parâmetros: os dois sprites a serem comparados; e retorna um booleano informando se há alguma colisão entre ambos. Assim, podemos usá-la em estruturas condicionais para atestar se houve ou não alguma colisão naquele momento. Na ...