Desenvolvimento de jogos web com Pixi.js

Desenvolver jogos para a web não é uma tarefa fácil. Você provavelmente já ouviu falar no Blender, ferramenta de manipulação e geração de gráficos e animações 2D e 3D extremamente usado por profissionais de games.

Quando se trata de iniciar no universo de jogos para a web, dispositivos móveis e até mesmo desktops, uma das melhores opções para isso é a biblioteca Pixi.js.

O Pixi nos dá ainda a possibilidade de trabalhar com grafos de cenas, isto é, hierarquias de sprites (imagens interativas) aninhados, além de permitir atrelar eventos de mouse e click diretamente aos mesmos.

Neste artigo trataremos de explanar acerca desse framework, seus principais conceitos, componentes e como criar seu ambiente de desenvolvimento de jogos do zero, explorando os recursos ricos que a web fornece quando bem usada.

Veremos como mapear tilesets (conjunto de imagens acopladas em uma imagem só, usadas para facilitar o manuseio de desenháveis nos jogos e evitar ter de usar inúmeras imagens ao mesmo tempo), imagens individuais, cenários, plano de fundo, estilização do design de elementos, bem como as principais funções e objetos da API do Pixi.js. Na seção Links você encontra a URL oficial do projeto.

Mãos à obra

Antes de partirmos para o download e configuração do Pixi.js, é importante que o leitor saiba que ele não fará todo o trabalho sozinho.

Precisaremos de algumas bibliotecas auxiliares que serão estendidas pelo framework para absorver determinadas funcionalidades como a detecção de colisões de objetos nos jogos, por exemplo.

Além disso, também precisamos ter um ambiente de servidor funcional para executar algum código de suporte ao projeto cliente. A melhor opção para isso é fazer uso do Node.js, um framework robusto e fácil de usar que nos possibilita executar código JavaScript no servidor, além de gerenciar inúmeros pacotes de dependências para adicionar funcionalidades aos projetos. Mas o leitor pode ficar à vontade para usar qualquer outra tecnologia de servidor que lhe melhor convir.

Acesse a seção Links e baixe o instalador do Node.js para o seu Sistema Operacional. Verifique de antemão se você já não tem o software instalado na sua máquina executando o seguinte comando na interface de linha de comando:

node -v

Isso será o suficiente para exibir a versão do Node.js instalado na máquina. Caso contrário, você receberá uma mensagem do tipo “’node’ não é reconhecido como um comando interno” no console.

Além disso, verifique se a versão é a mais recente comparando-a com a apresentada no site oficial. É importante sempre trabalhar com os últimos recursos do Node.js para evitar conflitos com as atualizações que a sua aplicação for receber no futuro.

A atualização neste caso também se dará via download e instalação do último executável.

Após concluída a instalação, feche a janela de comandos e abra-a novamente, executando o mesmo comando para verificar s ...