Phaser.js #7 – Criando jogo Final!

Estamos chegando ao final de nosso projeto com Phaser pessoal! Lembrando que vocês podem acessar o projeto original em inglês na documentação diretamente no site do Phaser (deixarei o link no final do post).

Pontuação

O que é um jogo sem uma pontuação, não é mesmo? Como saberemos quantas estrelas coletamos?

Para isso, precisamos criar um objeto de jogo de texto. Vamos criar duas variáveis para conter uma pontuação e o objeto de texto:

var score = 0;
var scoreText;

O scoreText será configurado na função create():

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

A coordenada que exibiremos o texto score: 0 é na 16×16. A fonte padrão de textos do Phaser é a Courier.

Agora, precisamos modificar a função collectStar para que, quando o player coletar uma estrela, o contador seja aumentado, adicionando o nosso score:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);
}

Deste modo, cada vez que coletamos uma estrela, o nosso contador, que é a variável score, é incrementada em 10, ou seja, a cada estrela coletada, +10 pontos para você 🙂

Você pode verificar isso no seu arquivo part9.html!

Continue lendo “Phaser.js #7 – Criando jogo Final!”

Phaser.js #6 – Criando jogo Parte 5

E aí pessoal, dando sequência ao nosso tutorial de Phaser.js, iremos dar um propósito ao nosso jogo agora.

Já temos as plataformas, já temos a gravidade implantada, e já temos o nosso player com seus comandos especificados (andar para as laterais e pular para as plataformas). Agora, iremos inserir algumas estrelas no nosso cenário, para que o nosso player as colete. Para isso, criaremos um grupo chamado stars e o preencheremos dentro de nossa função create():

stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});

stars.children.iterate(function (child) {

    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

});

Este é um processo muito parecido como quando criamos nosso grupo de plataformas, mas como as estrelas precisam se mover e saltar, elas são um grupo dinâmico de física.

Ok, mas o que faremos agora?

Bom, primeiramente precisamos definir a chave de textura (key) para a nossa imagem. Mas o que isso significa?

Significa que todos os objetos filhos criados como resultado do objeto de configuração estrela receberão as texturas de estrela por padrão. 

Ok, já criamos uma estrela, e agora? Agora precisamos definir o repeat. O repeat é o valor de repetição das estrelas. Precisaremos de 12 estrelas saltitando pelo nosso mapa, então precisamos repeti-la 11 vezes.

Feito isso, usaremos o setXY para definir a posição das 12 estrelas criadas pelo nosso grupo star. cada estrela (child) será colocada começando em x:12 e y:0, e com um passo x de 70.

Mas o que isso significa?

Isso significa que a primeira estrela será posicionada em 12 x 0, a segunda terá 70 pixels em 82 x 0, o terceiro em 172 x 0, aumentando 70 pixels proporcionalmente para cada uma das 12 estrelas. Com o valor de 70 pixels, as estrelas vão se espalhar perfeitamente espaçadas na nossa viewport.

Mas e o que a última parte deste código faz?

Bem, esta parte do código itera entre todas as estrelas criadas pelo grupo e fornece a elas um valor aleatório entre 0,4 e 0,8 no eixo Y. O intervalo de rejeição é entre 0 e 1, sendo 0 sem rejeição e 1, rejeição completa. Como as estrelas iniciam sem gravidade, elas são puxadas para o solo, até que ocorra colisão com alguma plataforma.

Continue lendo “Phaser.js #6 – Criando jogo Parte 5”

Phaser.js #5 – Criando jogo Parte 4

Ok, já criamos a nossa colisão com os objetos, mas agora precisamos mover o player. Você pode utilizar um gerenciador de teclado embutido do Phaser:

cursors = this.input.keyboard.createCursorKeys();

Esse comando preenche o objeto cursors com as quatro propriedades: cima, baixo, esquerda e direita, que são todas as instâncias dos objetos-chave. Então, tudo que precisamos fazer é pesquisar isso dentro do nosso loop update:

if (cursors.left.isDown)
{
    player.setVelocityX(-160);

    player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
    player.setVelocityX(160);

    player.anims.play('right', true);
}
else
{
    player.setVelocityX(0);

    player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down)
{
    player.setVelocityY(-330);
}

A primeira coisa a fazer, é verificar se a tecla esquerda está sendo pressionada. Se ela estiver, aplicaremos uma velocidade horizontal negativa e iniciaremos a animação “left”. Se a tecla pressionada for a direita, faremos o oposto e utilizaremos a animação “right”. Em cada frame, criaremos um estilo de movimento “stop-start”.

Agora, precisamos adicionar um pulo, para podermos ir para as plataformas suspensas, correto? Clicaremos na tecla com a seta para cima para pular, testando se ela está pressionada e se o player está no chão. Se ambas as condições forem atendidas, aplicaremos uma velocidade vertical de 330 px/s sq. O player voltará para o chão, devido à gravidade.

imagem

Esse é o resultado esperado para esta situação. Verifique isso em part7.html.

Você pode verificar o artigo original em inglês em: https://phaser.io/tutorials/making-your-first-phaser-3-game/part8

Está gostando desta sequência de artigos? Comente abaixo!

Phaser.js #4 – Criando jogo Parte 3

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 🙂

Phaser.js #3 – Criando jogo Parte 2

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!

Phaser.js #2 – Criando jogo Parte 1

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!

Phaser.js #1 – Intro

Nesta série de artigos iremos abordar o desenvolvimento de jogos utilizando o Phaser.js, uma ferramenta para criação de jogos JavaScript. Abordaremos um ambiente para que você crie seus jogos. Nisto, se inclui a execução de um servidor Web local e obtenção da versão mais recente do Phaser.

Por que utilizar um servidor web local?

Quando você solicita algo na web, você usa o protocolo http, que garante que você acesse apenas os arquivos aos quais está destinado. Se você utiliza o file:// para arquivos locais, não há segurança a nível de servidor.

O seu jogo precisará carregar alguns recursos, como imagens, arquivos de áudio, JSON e alguns arquivos JavaScript. Ele precisa ter a segurança necessária para ficar livre de possíveis ataques. Por isso utilizaremos o servidor web, que disponibiliza o http://

Recomendo o uso do XAMPP, que possui uma configuração fácil.

Qual editor de código usar?

Realmente, fica a seu critério. Utilize o seu editor de texto favorito. Particularmente, eu prefiro o Visual Studio Code.

Fazendo o download do Phaser:

Você pode fazer o download diretamente da página de downloads.

npm:
npm install phaser@3.21.0
cdn:
<script src="//cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.min.js"></script>

Instalados o servidor, editor de texto e baixado o Phaser? Então vamos começar!

Criando um Olá Mundo!

Chegou a hora de criarmos algo e verificarmos se tudo está funcionando perfeitamente. Certifique-se de descobrir o webroot do seu servidor e crie um arquivo index.html dentro dele. Insira o seguinte código:

<! DOCTYPE html>
<html>
<head>
    <script src = "https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"> </script>
</head>
<body>

    <script>
    var config = {
        tipo: Phaser.AUTO,
        largura: 800,
        altura: 600,
        física: {
            padrão: 'arcade',
            videogames: {
                gravidade: {y: 200}
            }
        }
        cena: {
            preload: preload,
            criar: criar
        }
    };

    var game = novo Phaser.Game (config);

    função preload ()
    {
        this.load.setBaseURL ('http://labs.phaser.io');

        this.load.image ('céu', 'ativos / céu / espaço3.png');
        this.load.image ('logo', 'assets / sprites / phaser3-logo.png');
        this.load.image ('vermelho', 'ativos / partículas / red.png');
    }

    função create ()
    {
        this.add.image (400, 300, 'céu');

        partículas de var = this.add.particles ('red');

        var emissor = particulas.createEmitter ({
            velocidade: 100,
            escala: {início: 1, final: 0},
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image (400, 100, 'logo');

        logo.setVelocity (100, 200);
        logo.setBounce (1, 1);
        logo.setCollideWorldBounds (true);

        emitter.startFollow (logo);
    }
    </script>

</body>
</html>

Inicialize o seu servidor, e acesse o endereço 127.0.0.1/index.html.

Você deve ver uma saída parecida com isso:

Detalhe: é uma animação xD

Se ocorreu algum erro, ou a animação não está sendo visualizada, abra as suas opções de desenvolvedor do navegador e verifique o que o console está logando.

Onde consigo mais exemplos?

Você pode verificar os exemplos em Phaser aqui. Você encontrará um editor de código ativo, para modificar o código e executá-lo em tempo real para ver as alterações imediatamente.

Você também pode fazer o download de todos os exemplos no repositório do github. Você encontrará todos os recursos para uso em seus próprios jogos.

Você pode ler o artigo original em inglês neste link: https://phaser.io/tutorials/getting-started-phaser3/index

Gostou deste artigo? Fique atento à sequência que logo será lançada 😀