O que veremos aqui?

Neste post, mostrarei como subir as escadas, ou qualquer estrutura no jogo.

Como subir uma escada?

O comportamento esperado é que ao pular em direção à escada e apertar a tecla cima (ou simplesmente ao estar na frente da escada apertar tal tecla) faça com que o jogador suba a escada.

Espera-se também que visualmente o jogador mostre que está subindo, ou seja, fique de costas para a tela e faça movimentos de subida. Por hora, esta animação não será vista aqui, pois o tileset do dude é limitado e não tem essas imagens. Futuramente ativaremos suporte completo e o veremos de costas.

Criando nova camada para cuidar das escadas

O primeiro passo é criarmos uma nova camada no Tiled Map Editor chamada camadaEscada, e estando nela, desenhar por cima das escadas anteriormente criadas na camada cenario, novas escadas. Essa camada não será visível, ou seja, só será usada pelo código para poder saber onde estão as escadas.

Isso mesmo, a camadaEscada terá uma escada por cima de cada escada anteriormente criada no cenário. Veja como fica se ocultarmos a camada cenario:

Preparando o código

Após criar as escadas na nova camadaEscada, precisamos então importar essa camada no código, lembrando que essa nova camadaEscada não será visível. Apenas será utilizada para que o código encontre o posicionamento de cada escada ou estrutura escalável no jogo.

Modifique a função criaCenario, e adicione essas duas linhas logo após executar layer.resizeWorld():

function criaCenario(){
    // Código que já estava aqui...

    // Essas 2 linhas já existem, apenas adicione abaixo dela as outras duas linhas
    layer = map.createLayer('cenario');
    layer.resizeWorld();

    // Cria camada das escadas não visível
    layerEscada = map.createLayer('camadaEscada');
    layerEscada.visible = false;
}

A função criaCenario irá então ficar assim:

/**
 *  Cria cenário do jogo
 */
function criaCenario() {
    // Define que vai usar a física ARCADE - fácil no jogo
    game.physics.startSystem(Phaser.Physics.ARCADE);

    // Adiciona mapa
    map = game.add.tilemap('mapa');

    // Insere tileset
    map.addTilesetImage('tileset', 'tilesCenario');

    // Define quais blocos do tileset serão de colisão
    //map.setCollision(1);
    map.setCollisionBetween(1,5);
    map.setCollisionBetween(8,12);

    // Cria camada do cenário e define-a do tamanho do mundo
    layer = map.createLayer('cenario');
    layer.resizeWorld();

    // Cria camada das escadas não visível
    layerEscada = map.createLayer('camadaEscada');
    layerEscada.visible = false;

    // Cria o jogador
    criaJogador();

    // Chama função que cria vários inimigos
    criaInimigos();

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

    criaMoedas();

    criaTextoPontuacao();

    // Adiciona objeto de controle de músicas do jogo
    musicaMoedas = game.add.audio('collect-coin', 1, true);
    musicaKick = game.add.audio('kick', 1, true);
    musicaLose = game.add.audio('lose', 1, true);
}

Como percebe-se, esta função está crescendo bastante, futuramente precisaremos fazer um refactor nela, ou seja, quebrá-la em partes melhores à fim de deixar o código mais legível e manutenível.

Agora precisamos a todo tempo verificar se o jogador encostou em uma escada. Se pensou em editar a função atualizaJogo está correto!

Atualize a função atualizaJogo para que ela chame outra função, a verificaEscada, que como o nome já diz, faz a verificação das escadas do jogo:

function atualizaJogo() {
    game.physics.arcade.collide(jogador, layer);
    game.physics.arcade.collide(inimigos, layer, inimigoColidiuTile);

    movimentaJogador();
    verificaSeEncostouInimigo();
    verificaSeEncostouMoedas();
    verificaEscada();
}

Por fim, crie a nova função verificaEscada:

/**
 *  Função que verifica se jogador encostou em uma escada e se
 *  ao mesmo tempo pressionou a tecla cima
 */
function verificaEscada(){
    // Aqui revificamos se o jogador está em "cima" de um bloco de escada na camada layerEscada
    var encostouEmEscada = map.getTileWorldXY(jogador.body.x + 16, jogador.body.y,32,32, layerEscada);

    // Verifica se encostou em um bloco de escada e se pressionou a tecla cima
    if ( encostouEmEscada && cursors.up.isDown ) {
        // Altera gravidade do jogador
        jogador.body.gravity.y = 0;
        // Leva o jogador um pouco para cima
        jogador.body.velocity.y = -150;
        // Não permite jogador ir para o lado
        jogador.body.velocity.x = 0;
        // Define que está na escada (usada para controlar movimentos do jogador)
        jogadorNaEscada = true;
    }else{
        // Se não está na escada, restabelece a gravidade normal do jogador
        jogador.body.gravity.y = 1600;
        // Define que não está na escada
        jogadorNaEscada = false;
    }
}

Pronto, já temos o jogador subindo a escada! Veja que legal:

Lembrando que agora basta criar um tileset do jogador subindo a escada e chamar ele na função verificaEsccada. Aí o jogador terá a experiência completa!

Futuramente faremos isso com um novo tileset do jogador e do cenário.

Divirta-se agora adicionando mais escadas, inimigos e moedas no jogo. Agora já temos algo mais animado para brincar!

Desafio

Use o conhecimento aprendido neste post para criar um chão, que se o jogador pular nele, ele morre. Por exemplo um chão de lava.

Bons estudos :)

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 veremos como gerenciar a vida do jogador, permitindo que, caso tenha vida adicional, encoste uma vez em um inimigo e não morra.

Até breve!