Desenvolvimento de jogos web com Pixi.js � Parte 2

Demais posts desta s�rie:
Desenvolvimento de jogos web com Pixi.js � Parte 1

Artigo no estilo: Curso

Fique por dentro

Este artigo � �til por explorar os principais conceitos na pr�tica acerca da biblioteca de desenvolvimento de gr�ficos 2D Pixi.js. Essa biblioteca ficou famosa por sua capacidade de abstrair o WebGL (padr�o baseado no OpenGL ES 2.0 que fornece interfaces de programaç�o de gr�ficos em 3D) de forma r�pida e extremamente leve em comparaç�o com outras ferramentas do tipo. O leitor aprender� a implementar um mecanismo pr�prio e robusto de detecç�o de colis�es entre objetos no jogo e, sobretudo, a como executar aç�es quando elas ocorrerem. Esse trabalho se dar� atrav�s da biblioteca utilit�ria do Bump.js, que fornece uma linha de execuç�o pronta para detectar as colis�es. Veremos tudo isso atrav�s da construç�o de um jogo simples de caça � tocha em um cen�rio repleto de personagens inimigos, com barra de vida e cenas de game over e sucesso.

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 maioria dos casos, a checagem de colis�o deve ser feita em todos os frames do jogo, portanto � necess�rio incluir tal l�gica dentro da funç�o play() que ser� chamada a cada FPM.

Pr�tica de jogo: Em busca da tocha!

Com o intuito de assimilar a ideia da detecç�o de colis�o e unir a mesma aos conceitos vistos at� aqui, faremos um jogo completo e bem simples, cujo nome ser� �Em busca da tocha!�. Teremos um player central, um garoto, que ter� por objetivo buscar uma tocha dentro do cen�rio que estar� cercado por inimigos representados pelos personagens de fantasmas. Tamb�m exibiremos uma barra de vida no topo do cen�rio na cor verde, que decrescer� a medida que o personagem principal for atingido por algum dos fantasmas. Se ele for atingido o suficiente para zerar a barra, o jogo encerrar� e o jogador ser� redirecionado para a tela de game over. Caso contr�rio, ele ter� de levar a tocha at� a porta de sa�da do cen�rio, no canto superior esquerdo, a� sim o jogador ser� bem-sucedido e ganhar� o jogo e ent�o poderemos direcion�-lo para a tela de sucesso.

Tamb�m implementaremos a detecç�o de colis�o com as bordas do cen�rio, impossibilitando o jogador de ir al�m das paredes. E, para completar o jogo, criaremos um texto com o t�tulo do jogo e um contador regressivo antes do jogo começar para preparar o jogador, limpando os referidos objetos assim que o contador chegar em zero.

Para iniciar, crie um novo arquivo HTML (chamaremos aqui de cacatocha.html) e inicialize-o com a estrutura de HTML e imports demonstrados na Listagem 1. A mesma j� nos � conhecida dos exemplos anteriores.

Listagem 1. Estrutura inicial da p�gina cacatocha.html.


  01 <!doctype html>
  02 <meta charset="utf-8">
  03 <title>Caça � Tocha!</title>
  04 <style type='text/css'>
  05     * {
  06         padding: 0;
  07         margin: 0
  08     }
  09     
  10     @font-face {
  11         font-family: 'Pipe Dream';
  12         src: url('font/Pipe_Dream.ttf') format('truetype');
  13         font-weight: normal;
  14         font-style: normal;
  15     }
  16 </style>
  17 
  18 <body>
  19     <script src="js/pixi.min.js"></script>
  20     <script>
  21 
  22      </script>
  23     <div >.</div>
  24 </body>
  25 
  26 </html>
"

[...] continue lendo...

Desenvolvimento de jogos web com Pixi.js � Parte 2

O artigo traz uma série de conceitos sobre detecção de colisões entre objetos nos cenários de um jogo que faça uso do JavaScript implementado pela API do Pixi.js.

Artigos relacionados