O que veremos aqui?

Neste post, mostrarei como fazer o personagem do jogo andar e pular sendo controlado pelo teclado. Se você chegou agora, esta é a continuação do post onde criamos o cenário do jogo.

Adicionando um personagem ao jogo

Após criar o cenário básico, o próximo passo do nosso jogo será adicionar um personagem. Aproveitando os exemplos do framework phaser, vamos adicionar o personagem chamado dude, que visualmente é representado por este conjunto de frames:

Repare que neste frame temos todos os possíveis movimentos do jogador.
O primeiro passo para usarmos qualquer recurso de imagem ou som, é carregarmos ele no jogo usando a função carregaAssets. Altere ela para adicionar a sprite sheet:

function carregaAssets() {
    game.load.image('fundo', 'assets/fundo.jpg');
    game.load.image('chao', 'assets/chao.jpg');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}

Temos algumas obervações novas aqui. O arquivo de imagem do dude foi carregado como spritesheet, e não como image. Isso pois ele será uma folha sprite de animação, ou seja, uma imagem que pode ser animada.
Outro fator interessante é que a imagem é em png, diferente do fundo ou do chão que são em jpg. Isso, pois é importante que o fundo e demais elementos apareçam nas sombras do jogador.

As dimensões 32×48 são a largura e altura respectivas do nosso jogador dude.

Uma vez carregado a imagem do personagem, agora vamos inserí-lo no jogo. Para isto, crie esta função:

/**
 * Função que cria o jogador
 */
function criaJogador(){
    // Cria o player e o adiciona no jogo (x,y)
    jogador = game.add.sprite(50, game.world.height - 250, 'dude');

    // É necessário adicionar a física no jogador
    game.physics.arcade.enable(jogador);

    // Propriedades da física do jogador. Dá a ele, um salto "normal".
    jogador.body.bounce.y = 0.2;
    jogador.body.gravity.y = 1500;

    // Nâo deixa jogador "fugir" do mundo
    jogador.body.collideWorldBounds = true;

    // Define duas animações (esquerda e direita) para caminhar
    // 'nome', posições no quadro, quantas atualizações por segundo
    jogador.animations.add('left', [0, 1, 2, 3], 10, true);
    jogador.animations.add('right', [5, 6, 7, 8], 10, true);
}

E chame esta função na função criaCenario:

function criaCenario() {
    // A primeira coisa a criar deve ser o fundo
    criaFundo();

    // O grupo de plataformas contém o chão onde o personagem poderá pular
    plataformas = game.add.group();

    // Cria o chão
    criaChao();

    // Cria o jogador
    criaJogador();
}

O resultado será o nosso personagem presente no jogo. O efeito será ele caindo, dependendo da localização onde foi inserido:

Veja que ele não está em cima do chão, pois não definimos este comportamento. Para que o jogador se choque com o chão, devemos definir as possíveis colisões dentro da função atualizaJogo:

/**
 *  Atualiza jogo. Esta função roda em torno de 60 vezes em 1 segundo, ou seja,
 *  60 FPS (FPS = Frames Por Segundo)
 */
function atualizaJogo() {
    // Define colisão entre jogador e plataformas
    game.physics.arcade.collide(jogador, plataformas);
}

A variável plataformas foi criada na função criaCenario, ela contém um grupo de plataformas do jogo. No momento temos apenas o chão como uma plataforma, mas depois poderemos adicionar mais delas. Assim, o jogador irá colidir com todas elas, por isso a vantagem de se criar um grupo de plataformas como foi feito.

O resultado da mudança na função acima será que o jogador irá cair e colidir com o chão, parando em cima dele:

Controlando o jogador pelo teclado

Agora que já temos o jogado no jogo, o próximo passo é conseguir controlá-lo com o teclado.

Primeiramente adicione estas duas linhas à função criaCenario. A primeira linha cuida da dificuldade da física no jogo (ARCADE será definido por enquanto) e a segunda linha irá obter informações do teclado que serão usadas em breve.

    // Define que vai usar a física ARCADE - fácil no jogo
    game.physics.startSystem(Phaser.Physics.ARCADE);

    // Define os cursores do teclado para poder controlar o jogador
    cursors = game.input.keyboard.createCursorKeys();

Por fim, modifique a função atualizaJogo, como segue abaixo:

function atualizaJogo() {
    // Define colisão entre jogador e plataformas
    game.physics.arcade.collide(jogador, plataformas);

    // Pára o movimento do jogador
    jogador.body.velocity.x = 0;

    // Testa se a tecla da esquerda está pressionada
    if (cursors.left.isDown) {
        // Move jogador para esquerda
        jogador.body.velocity.x = -250;
        // Ativa animação esquerda esquerda
        jogador.animations.play('left');
    }
    // Ou se o cursor direito está pressionado
    else if (cursors.right.isDown)
    {
        // Move jogador para direita
        jogador.body.velocity.x = 250;
        // Ativa animação direita
        jogador.animations.play('right');
    }
    else
    {
        // Senão deixa o jogador parado
        jogador.animations.stop();
        // Ativa frame 4 da animação (jogador virado para frente)
        jogador.frame = 4;
    }

    //  Permite jogador pular somente se está tocando algum chão
    if (cursors.up.isDown && jogador.body.touching.down)
    {
        // Faz eixo y do jogador ser negativo (gera um pulo)
        jogador.body.velocity.y = -650;
    }
}

Agora sim, o jogador terá capacidade de correr para ambos os lados e pular somente se estiver tocando algum chão. Tente sair do chão verde (indo para o fim do chão) e perceba que o jogador não irá conseguir pular.

Jogo em ação

Aqui você pode ver o código que implementamos funcionando.

Neste link você pode baixar esta versão do jogo:

O que vem por aí?

No próximo post vou mostrar como adicionar um inimigo no jogo, até breve!