Autor: Alexandre Machado

Nosso jogo já está tomando forma, pessoal! Para continuarmos, recomendo a leitura da Parte 2 desta série de artigos!

Adicionando o jogador:

Já temos nossas plataformas, mas ninguém para percorrê-las. Temos que resolver isso neste momento.

Criaremos uma variável chamada player e adicionaremos o seguinte código à função create().

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

Você pode conferir isso no seu arquivo part5.html.

Há duas coisas acontecendo neste código: a criação de um Sprite de física e a criação das animações que ele irá usar.

Physics Sprite:

A primeira parte do código cria o sprite:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

Isso cria um novo sprite chamado player, posicionado a 100×450 pixels da parte inferior do jogo. O sprite foi criado através da Physics Game Object Factory, ou seja, ele é um corpo de Física Dinâmica por padrão.

Depois de criar o sprite, ele recebe um valor de rejeição de 0,2. Mas o que isso significa?

Isso significa que, quando ele aterrissar de um salto, ele saltará levemente. O sprite é definido para colidir com os limites do jogo. Os limites, por padrão, estão do lado de fora da dimensão do jogo. Como o jogo foi definido em 800×600, o jogador não poderá avançar para fora desta área, impedindo o player de correr pelas bordas da tela ou pular pela parte superior.

Animando:

Se você olhar para a função preload, verá que o “dude” foi carregado como uma folha de sprites, não como uma imagem. Isso acontece porque ele possui vários quadros de animação.

Existem 9 quadros de animação dentro desta página de sprites: 4 para a esquerda, uma para a frente e 4 para a direita. O Phaser suporta sprites invertidos, para econimizar quadros de animação.

Definimos duas animações, “left” e “right”. Aqui está a animação “left”:

this.anims.create({
    key: 'left',: 'left',
    frames: this.anims.generateFrameNumbers('dude', {
        start: 0,
        end: 3
    }),
    frameRate: 10,
    repeat: -1
});

A animação “left” usa os frames 0, 1, 2 e 3 e é executada a 10 frames por segundo. O valor “repeat -1” informa que há repetição de animação.

Esse é o nosso ciclo de execução padrão e o repetimos para correr na direção oposta, usando a tecla “right” e a final para “turn”.

Velocidade do player:

O Phaser tem suporte para uma variedade de sistemas de física diferentes, cada um atuando em alguma cena do Phaser. Quando um Sprite de Física é criado, ele recebe uma propriedade body, que é uma referência ao seu corpo. Isso representa o sprite como um corpo físico no mecanismo de física do Phaser Arcade. O objeto body tem muitas propriedades e métodos. Por exemplo, para simular os efeitos da gravidade de um sprite, podemos adicionar o seguinte:

player.body.setGravityY(300);

Isso tornará o objeto mais pesado e mais rapidamente ele cairá. Verifique isso no seu código executando o part5.html, e verá que o player irá cair sem parar, ignorando completamente o terreno criado anteriormente:

Isso acontece pois ainda não estamos testando colisões entre o solo e o player. O Phaser já sabe que nosso solo e plataformas são corpos estáticos. Se tivéssemos os criado de forma dinâmica, o jogador entraria em contato com elas, pararia por um momento e o jogo colapsaria. Um sprite de solo dinâmico é um objeto físico em movimento e, quando o jogador o atinge, a força resultante da colisão também é aplicada ao solo, levando os dois corpos a trocarem suas velocidades, fazendo o solo começar a cair também. Para permitir a colisão com as plataformas, podemos criar um objeto Collider. Este objeto monitora dois objetos de física (que podem incluir grupos) e verifica as colisões ou sobreposições entre eles:

this.physics.add.collider(player, platforms);

Veja a mágica acontecer:

O Collider testa a colisão e realiza a separação entre dois objetos. Estamos fornecendo um sprite do player e o grupo de plataformar. Precisamos ter colisões com todas as plataformas, então precisamos fazer esta colisão com o grupo da plataforma. O resultado disso é uma plataforma firme que não entra em colapso.

Está gostando do jogo? Curtindo os seus resultados? Comente abaixo e aguarde o próximo artigo 🙂

Olá pessoal! Dando sequência ao tutorial de Phaser.js na prática, hoje iremos abordar a inserção de assets no nosso jogo. Recomendo fortemente uma leitura da nossa Parte 1 para seguirmos adiante.

Continuando…

Bom, já temos o nosso céu criado. Podemos usar o setOrigin para alterar a exibição da imagem. Veja como fazer isso:

this.add.image(0, 0, 'sky').setOrigin(0, 0);

Isso redefiniria a posição do nosso desenho (céu) no canto superior esquerdo da tela. No Phaser 3 existem as propriedades originX e originY.

A ordem de exibição dos objetos do jogo corresponde à ordem que você os cria. Agora, iremos colocar um sprite de estrelas que ficará acima do nosso plano de fundo, ou seja, precisamos garantir que ele seja adicionado depois da imagem do céu.

function create() {
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'star');
}

A sua saída deve ser assim:

Se a imagem da estrela for inserida antes, a imagem do céu a encobrirá.

Por baixo dos panos, this.add.image cria um objeto de jogo de imagem e o adiciona a lista de exibição das cenas. Essa lista é onde ficam os objetos do seu jogo. Cuidado para não adicionar as imagens fora da tela. Você não as verá visualmente, mas ainda existirão.

A cena em si não possui tamanho fixo e se estende em todas as direções, mas a câmera controla sua visualização na cena. Agora, criaremos elementos da cena, adicionando uma imagem de fundo e também, algumas plataformas, utilizando a função create:

var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

Olhando o código, você deve ter percebido uma chamada this.physics. Estamos utilizando o sistema Arcade Physics do Phaser. Precisamos adicioná-lo ao Game Config para informar ao Phaser. Aqui está a configuração:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

A sua saída deve ficar algo parecido com isso:

Observação:

Comente a inserção da estrela no seu código.

Você pode verificar o seu código olhando o arquivo part4.html.

Ok, já temos um cenário e algumas plataformas. Mas como essas plataformas funcionam?

platforms = this.physics.add.staticGroup();

Criamos um grupo de física e atribuímos à variável platforms. Na Arcade Physics existem dois tipos de corpos físicos: Dinâmico e Estático. O corpo dinâmico pode se mover através de aceleração ou velocidade, podendo saltar e colidir com outros objetos. Um corpo estático simplesmente possui posição e tamanho. Quando algo colide com ele, ele não se move. É perfeito para solo e plataformas.

O que é um grupo?

São maneiras de agrupar objetos e controlá-los como uma única unidade. Você pode verificar colisões entre grupos e objetos de jogo. Eles são capazes de criar seus próprios objetos de jogo por meio de funções auxiliares úteis. Em um grupo criado para a física, os filhos automaticamente herdarão as habilidades de física, poupando trabalho.

platforms.create(400, 568, 'ground').setScale(2).refreshBody();

platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');

Este código cria uma imagem “ground”: um retângulo verde simples, que servirá de plataforma.

Para fazer a plataforma abranger toda a largura do nosso jogo, utilizamos a função setScale(2), que dobrará em x2 o tamanho original. A chamada refreshBody() é necessária pois escalamos um corpo estático, portanto, precisamos fazer alterações na física do jogo.

O processo de criação das outras plataformas é exatamente o mesmo, apenas não precisamos escalar a imagem.

Você pode ler o artigo original em inglês neste link: http://phaser.io/tutorials/making-your-first-phaser-3-game/part2

Está gostando desta sequência? Comente abaixo!

Olá pessoal, nesta sequência de artigos, iremos criar um jogo utilizando a Phaser.js. É necessário que você conheça os procedimentos de instalação de servidores web e instalação do Phaser. Recomendo a leitura desta postagem, que é a primeira postagem da série Phaser.js. Você pode acessá-lo clicando aqui.

Vamos começar?

Primeiro, se faz necessário o download deste arquivo zip, que contém tudo o que você necessita para criar o jogo.

[download id=”3357″]

Passo 1:

Abra o arquivo part1.html no seu editor de código favorito. Você deverá ver um código parecido com este:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 1</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    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>

</body>
</html>

Este é a nossa configuração inicial. Muitas coisas serão inseridas nessa configuração, a medida que o nosso conhecimento em Phaser é expandido. Agora, nós definiremos o renderizador, as dimensões e uma cena padrão.

Uma instância de um objeto Phaser.Game é atribuída a uma variável local chamada game e o objeto de configuração é passado para ela. Isso inicia o processo de dar vida ao seu jogo em Phaser!

Renderização:

A propriedade type pode ser Phaser.CANVAS, Phaser.WEBGL ou Phaser.AUTO. Este é o contexto de renderização que você deseja usar no seu jogo. O valor recomendado é o Phaser.AUTO, que usa automaticamente o WebGL, mas se não houver suporte do navegador, ele usará o Canvas. O elemento criado será anexado ao documento no momento que o script for chamado.

Dimensões:

As propriedades width e height definem a largura e altura do seu elemento tela, respectivamente. Usaremos 800 x 600 pixels.

Cena:

Vamos carregar os assets que precisamos para o nosso jogo. Faremos isso criando chamadas para o Phaser dentro de uma função chamada preload. O Phaser procurará automaticamente essa função quando carregar a tela e carregará qualquer coisa que esteja definida dentro dela.

Insira o seguinte código dentro de sua função preload vazia:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Isso irá carregar 5 assets: 4 imagens e uma folha de sprites. O Primeiro parâmetro, chamado de asset key (por exemplo, “sky”, “bomb”), é uma sequência que é um link para o material carregado, e é o que você usará no seu código ao criar objetos do jogo.

Exibindo o background:

Para exibir o background do seu jogo, colocaremos o seguinte código dentro da função create:

this.add.image(400, 300, 'sky');

Isso irá carregar um background de um céu azul. Você pode encontrar isso feito no seu arquivo part3.html.

Sua saída deve ser assim:

Você pode ler o artigo original em inglês neste link: http://phaser.io/tutorials/making-your-first-phaser-3-game/part1

Está gostando destes artigos sobre Phaser? Siga acompanhando e comente abaixo!