Artigo no estilo: Curso

Por que eu devo ler este artigo: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 configurar seu ambiente, extrair os arquivos necessários, inicializar a biblioteca, bem como fazer uso de seus principais recursos: criação de cenários, mapeamento de imagens, tilesets, sprites, dinamização do estilo dos componentes, rotação, scale, dentre outros.

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.

Um dos maiores desafios de quem a usa ou quer se beneficiar de seus mecanismos, sua engine de renderização, seu forte suporte recebido de uma comunidade aberta e, sobretudo, sua gratuidade, é encontrar um framework de programação web baseado em JavaScript que possibilite uma fácil integração com o Blender. E é sobre isso que vamos falar neste artigo.

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.

Ela é extremamente leve e rápida e pode ser usada não somente para o desenvolvimento de jogos como de quaisquer tipos de softwares interativos, usando somente JavaScript e HTML5. E é por isso que precisamos ter conhecimentos nestas duas linguagens como pré-requisito para prosseguir nesse artigo.

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 se o processo foi feito com sucesso.

Em seguida, precisamos instalar também o pacote http-server do Node.js que será responsável por criar um servidor HTTP local e servir nossas aplicações futuras em um browser qualquer. Portanto, execute o seguinte comando no terminal:

npm install http-server -g

Esse comando faz uso do utilitário npm do Node.js. Trata-se de uma extensão responsável por gerenciar as extensões do framework, baixando-as via internet e configurando-as a nível global (flag -g).

Em seguida, escolha um diretório de sua preferência e dê-lhe o nome de “pixijs-devmedia”, o qual guardará todos os arquivos do projeto. Acesse o mesmo via terminal de comandos (comando cd nome_do_diretório).

Para baixar o Pixi.js para o nosso projeto, basta clicar no botão Download na página home do mesmo e você será redirecionado para a página do framework no GitHub. Clique no botão Download ZIP e o projeto inteiro, incluindo os fontes e arquivos de testes, será baixado em um arquivo .zip.

De todos os arquivos do projeto, o único que precisaremos é o JavaScript contido na pasta pixi.js-master/bin. Existem dois tipos: o com sufixo –min e o sem. O primeiro diz que o arquivo tem seu conteúdo interno minificado, isto é, comprimido para facilitar seu download via HTTP no site final.

Vamos importar esse para o projeto, mas se o leitor desejar ver a estrutura do JS do Pixi mais a fundo pode importar o outro arquivo.

Crie uma pasta js dentro do nosso projeto pixijs-devmedia, extraia o conteúdo do arquivo e copie o pixi.js para a mesma.

Criando um template básico

Vamos agora criar uma página HTML básica que apenas importa o arquivo JS na mesma e acessa o seu objeto principal, PIXI. Adicione à mesma o conteúdo exposto na Listagem 1.

Listagem 1. Conteúdo HTML da página que testa o Pixi.js.

  <!doctype html>
  <head>
            <meta charset="utf-8">
            <title>Hello World</title>
  </head>
   
  <body>
            <script src="js/pixi.min.js"></script>
            <script>
                        // Testa se o Pixi está funcionando
                        console.log(PIXI);
                        console.log('Versão do Pixi.js: ' + PIXI.VERSION);
                        console.log('Default FPMS do Pixi.js: ' + PIXI.TARGET_FPMS);
            </script>
  </body>

Na página primeiramente importamos o arquivo e acessamos algumas de suas propriedades na tag <script>. O objeto PIXI é o objeto principal da API que encapsula tudo que há no framework e será o mais usado daqui para frente. Também imprimimos a versão dele e a constante TARGET_FPMS que guarda o valor da variável de frames per milliseconds, muito usada em APIs de jogos. Abra o arquivo em um navegador de sua preferência e, em seguida, o Console da ferramenta de depuração (na maioria dos navegadores essa opção está disponível via atalho F12). O resultado será semelhante ao exibido pela Figura 1.

Desenvolvimento de jogos web

Figura 1. Saída no Console do exemplo.

Trabalhando com Sprites

O Pixi.js tem um objeto chamado renderer que cria e exibe uma tela. Este, por sua vez, automaticamente gera um elemento do tipo <canvas> da HTML5 e entende como exibir suas imagens no canvas (vide BOX 1).

Entretanto, também precisamos criar um objeto do tipo Container que representará o stage onde tudo acontecerá, isto é, esse objeto basicamente representa o container raiz que contém todas as coisas que o Pixi exibirá. Vejamos o código exibido na Listagem 2, necessário para criar um renderer e um stage.

BOX 1. Canvas

O elemento Canvas faz parte da nova API da HTML5 e sua tag (<canvas>) é muito similar a outras como <div> ou <a>, com a exceção de que seu conteúdo será renderizado pelo JavaScript.

Para fazer uso da mesma precisamos inserir a tag no documento HTML, acessá-la via JavaScript, criar um contexto (2d ou webgl – 3d), e então usar a sua API para desenhar as visualizações. Vejamos um exemplo básico:

// No HTML

<canvas id="canvas" width="200" height="200">

Este texto é exibido caso o navegador não tenha suporte ao Canvas.

</canvas>

// No JavaScript

var canvas = document.getElementById( 'canvas' ),

contexto = canvas.getContext( '2d' );

contexto.fillStyle = 'green';

contexto.fillRect( 130, 130, 130, 130 );

Este exemplo mostra a criação de um canvas simples de id “canvas” que é recuperado em seguida pelo JavaScript e associado a um contexto de desenho 2d. Em seguida, preenchemos a forma com a cor verde e definimos suas dimensões através do método fillRect(), que desenha um retângulo de acordo com os valores passados por parâmetro.

Listagem 2. Criando objetos renderer e stage.

    <!doctype html>
  <head>
         <meta charset="utf-8">
         <title>Hello World</title>
  </head>
   
  <body>
         <script src="js/pixi.min.js"></script>
         <script>
               "use strict";
         
               // Cria o renderer
               let renderer = PIXI.autoDetectRenderer(500, 500);
               // Add o canvas ao documento HTML
               document.body.appendChild(renderer.view);
               
               //Cria um objeto container `stage`
               let stage = new PIXI.Container();
               // Diz ao `renderer` para `render` (renderizar) o `stage`
               renderer.render(stage);
         </script>
  </body>

Veja que a primeira linha do nosso script faz referência ao modelo de modo estrito do JavaScript (vide BOX 2), ele é importante para definirmos o acesso à palavra reservada let (usada para declarar variáveis locais no JavaScript). A função autoDetectRenderer() recebe dois parâmetros para definir o tamanho do canvas a ser renderizado, retornando-o após criado. Em seguida, adicionamos o referido objeto ao corpo do nosso documento HTML.

Para criar um container chamamos a função construtora Container() do objeto PIXI e adicionamos o mesmo ao objeto de renderer via função render(). Após executar a página no browser teremos um resultado semelhante ao exibido na Figura 2.

BOX 2. Strict Mode (Modo Estrito)

O modo estrito é uma forma de não silenciar o JavaScript.

Em outras palavras, é uma forma de definir comportamentos a nível de browser (que pode ou não suportar tal modo), o qual elimina alguns erros silenciosos no JavaScript, passando a lançá-los. Por exemplo, quando criamos uma variável qualquer e não a declaramos através da palavra chave “var”, ela se torna uma variável válida para o JavaScript de nível global, isto é, visível para todo código JavaScript carregado no DOM.

A questão é que para o modo estrito isso é um erro, pois ele força o uso da palavra “var” para definições de variáveis. Portanto, se o browser estiver com tal modo habilitado, receberemos um erro no Console informando isso.

Desenvolvimento de jogos web

Figura 2. Objeto canvas criado e adicionado à página.

O método autoDetectRenderer(500, 500) já se encarrega de definir o contexto do canvas automaticamente: se é 2d ou webgl. Mas precisamos forçar estas definições através do seguinte código, respectivamente:

  renderer = new PIXI.CanvasRenderer(500, 500);
  renderer = new PIXI.WebGLRenderer(500, 500); 

O objeto renderer.view é apenas um objeto <canvas> simples, assim podemos controlá-lo da mesma maneira que qualquer outro objeto canvas. Veja como dar à tela uma borda tracejada opcional:

 renderer.view.style.border = "1px dashed black";

Se tiver que mudar a cor do fundo do canvas depois de criado, defina a propriedade backgroundColor do objeto renderizador para qualquer valor de cor hexadecimal. Aqui está um exemplo de como podemos configurá-lo para branco puro:

renderer.backgroundColor = 0xFFFFFF;

Veja na Listagem 3 um exemplo de uso de tais propriedades.

Listagem 3. Mudando propriedades padrão do renderer.

  <!doctype html>
  <head>
         <meta charset="utf-8">
         <title>Hello World</title>
  </head>
   
  <body>
         <script src="js/pixi.min.js"></script>
         <script>
               "use strict";
         
               var renderer = PIXI.autoDetectRenderer(500, 500, {antialiasing: false, transparent: false, resolution: 1});
               document.body.appendChild(renderer.view);
               renderer.backgroundColor = 0x8cc53e;
   
               var scene = new PIXI.Container();
   
               var render = function() {
                      renderer.render(scene);
                      requestAnimationFrame(render);
               }
    ... 

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo