Aprenda a criar jogos em 2D em Java-Script com Phaser

O que é Phaser

O Phaser é um framework que utiliza uma estrutura totalmente modular, combinada com uma abordagem orientada a dados, com um renderizador WebGL personalizado, projetado especificamente para as necessidades dos jogos 2D modernos.

 

O que é necessário para rodar

Para rodar o Phaser é preciso ter um servidor web instalado na sua máquina. Mas todo bom desenvolvedor já tem um instalado, não é?

Os desenvolvedores do Phaser indicam servidor Apache com PHP e Mysql.

Eles indicam os pacotes  servidor WAMP ou o XAMPP

Vou deixar links de vídeos  que ensinam como instalar este servidores tanto para windows quanto para o Linux. 

Para criar os códigos você pode utilizar qualquer editor de códigos; vou deixar aqui,um artigo que fiz sobre ferramentas essenciais para um desenvolvedor em PHP

Em sua página html você só precisa colocar dentro de head o código <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script> para carrega-lo;

Para um novo projeto de jogo em phaser, você precisa criar uma pasta dentro de WWW no servidor Wamp ou Xampp ou Ampps.

 

A estrutura de um código em Phaser

A estrutura do phaser é muito fácil de entender: 

Em config você vai definir as propriedades gerais do ambiente, como: tamanho que o jogo vai ser carregado, gravidade, além da ordens das cenas.

Em new Phaser.Game(config) inicializa o Phaser

Em function preload () - nesta funçao é que você vai carregar todos os arquivos de imagens, sprites e sons.

Em function create () - nesta função é que você vai definir as propriedades inciais dos objetos que farão parte do jogo, como posição dos objetos, funçoes de animação, funcionalidades, volume, escala, transparência dentre outras coisas.

Em function update () - Nesta função estará comandos que serão acionados a um ou mais objetos, durante todo o tempo de execução do jogo. Exemplo: verificar frequentimente as coordenados x e y dos objetos.

<script>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}
</script>

 

Agora veja este exemplo: Utilize as setas para movimentar o objeto.

 

Os códigos deste exemplo é este aqui:

 

<div id="phaser-example"></div>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<script>
/* configura as propriedades do ambiente */
var config = {
    type: Phaser.WEBGL,
    width: 350, // define a largura do ambiente em 350px
    height: 300, // define a altura do ambiente 300px
    "render.transparent":  true,
    backgroundColor: 'transparent',
    transparent: true,  // define o fundo como transparente
    parent: 'phaser-example',   // nome que deverá ser carregado na div. exemplo: <div id="phaser-example">
     physics: {     // Ativa a Física do Phaser
        default: 'arcade',
        arcade: {
            fps: 60,  //define 60 quadros por segundo.
            gravity: { y: 0 }  //define a gravidade como 0
        }
    }, 
    scene: { //define a ordem para carregar a cena
        preload: preload,
        create: create,
        update: update
    }
};

/* ativa o phaser */
var game = new Phaser.Game(config);

/* declaração das variáveis */
var logo;
var cursors;

function preload ()
{    /*carrega a imagem para a memória do phaser */
     this.load.image('logo', 'https://programarweb.mrab.com.br/sites/default/files/logo_programar_web_final_1.png');
}

function create ()
{
    /* define que logo terá propriedades físicas e configura para imagem entre na posição x=100 e y=50 
    logo = this.physics.add.image(100, 50, 'logo');
    logo.setDamping(true);
    logo.setDrag(0.99);
    logo.setMaxVelocity(200);

/* ativa o teclado */
    cursors = this.input.keyboard.createCursorKeys();
}

function update ()
{   /* quando clicado a seta para cima */
    if (cursors.up.isDown)
    {  /* altera a rotação e aceleração do objeto */
        this.physics.velocityFromRotation(logo.rotation, 200, logo.body.acceleration);
    }
    else
    {   /* altera para aceleração igual 0 */
        logo.setAcceleration(0);
    }
   
/* quando clicado a seta para esquerda */
    if (cursors.left.isDown)
    {   /* altera a velocidade angular para -300 */
        logo.setAngularVelocity(-300);
    }          
    else if (cursors.right.isDown) /* quando clicado a seta para direita */
    {  /* altera a velocidade angular para 300
        logo.setAngularVelocity(300);
    }
    else
    {   /* altera para aceleração igual 0 */
        logo.setAngularVelocity(0);
    }

   
    this.physics.world.wrap(logo, 32);

}
</script>

 

Espero que você tenha começado a entender a lógica para criar jogos em phaser