O que veremos aqui?

Neste post, mostrarei como adicionar moedas no jogo usando o Tiled Map editor que já usamos no post anterior (criando mapa do jogo).

Como adicionar moedas?

As moedas, assim como os inimigos, são objetos no jogo. Esses objetos interagem com o jogador de maneira diferente.

No futuro as moedas serão usadas para contabilizar pontos, já os inimigos, obiviamente para machucar ou até matar o jogador.

Para adicionar as moedas, usaremos então mais uma vez o Tiled Map Editor. Nele definiremos o posicionamento de cada moeda do jogo.

Vou continuar o último post, então caso tenha chegado agora, basta acessá-lo e baixar todos os arquivos para continuar este tutorial. No final de cada post disponibilizo os arquivos para download para que você consiga fazer exatamente o que vemos aqui.

Adicionando nova camada de objetos no mapa

Abra o arquivo do mapa que criamos no último post, chamado mapacaverna.json (que se encontra na pasta assets) e crie uma nova layer (camada) chamada camadaMoedas (sem espaço mesmo). Essa camada deve ser uma camada de objeto, então para criá-la vá no menu Layer -> Add Object Layer.

Adicionando tileset de moedas no mapa

Agora iremos adicionar o tileset das moedas, que neste caso é uma imagem simples com todas as posições da moeda para que depois possamos fazê-la girar no jogo.

Salve este arquivo na pasta assets:

E insira-o como tileset no Tiled Map Editor, indo no menu Map -> New Tileset. É importante adicionar o tileset com tamanho de 32×32 que é o tamanho de cada imagem de moeda no tileset:

Adicionando objeto de moedas no mapa

Agora basta selecionar o modo Insert Tile (canto superior direito do Tiled Map Editor), escolher o bloco (primeiro tile no cando inferior direito) e por fim, adicionar no mapa nos lugares desejados:

Inserindo as moedas via programação e definindo seu comportamento

O primeiro passo é carregar o novo tileset e o som para as moedas. Sim, vamos fazer com que ao serem coletadas elas façam o mesmo som das moedas do Super Mario!

Vamos editar agora o arquivo game.js (que se encontra na pasta js) como sempre fazemos, a fim de mudar o funcionamento do jogo.

Modifique a função carregaAssets, e adicione as duas linhas de código finais que carregam a imagem da moeda (coin.png) e do som (collect-coin.ogg):

/**
 *  Carrega imagens, sons etc, para usar no jogo
 */
function carregaAssets() {
    game.load.image('inimigo', 'assets/inimigo.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

    // Carrega imagem do novo mapa,
    // origem: http://www.ironstarmedia.co.uk/2010/10/free-game-assets-13-prototype-mine-tileset/
    game.load.image('tilesCenario', 'assets/tileset.png');

    // Carrega mapa em formato JSON
    game.load.tilemap('mapa', 'assets/mapacaverna.json', null, Phaser.Tilemap.TILED_JSON);

    // Carrega moedas
    game.load.spritesheet('coin', 'assets/coin.png', 32, 32);
    // Carrega som para moedas
    game.load.audio('collect-coin', ['assets/collect-coin.ogg']);
}

Assim como o arquivo das moedas (coin.png) o arquivo de audio também deve estar salvo na pasta assets. Portanto, baixe este arquivo de audio e o salve na pasta assets:

Você pode ouvir o som aqui:

E baixá-lo aqui (depois de abrir clique com o botão direito e vá em “salvar video como”):
Baixar select-coin.ogg

Agora, no final da função criaCenario adicione a seguinte chamada de função:

/**
 *  Cria cenário do jogo
 */
function criaCenario() {
    // ... demais código que já estava aqui

    // Chama função que cria moedas que será programada em breve
    criaMoedas();
}

E então, crie no final do arquivo game.js a função que cria as moedas:

/**
 * Carrega moedas no jogo e define seu comportamento
 */
function criaMoedas(){
    // Adiciona música da moeda no jogo, com o nome do asset (collect-coin)
    musicaMoedas = game.add.audio('collect-coin', 1, true);

    // Cria grupo de moedas
    coins = game.add.group();
    // Habilita corpo nos elementos deste grupo
    coins.enableBody = true;

    /**
     * Carrega moedas do grupo camadaMoedas (criado no tiled map editor) que estejam usando 
     * o GID 22 (tileset número 22). 
     * Substitui todas as moedas pela imagem 'coin' carregada em carregaAssets 
     * e insere todoas elas no grupo coins recém criado
     */
    map.createFromObjects('camadaMoedas', 22, 'coin', 0, true, false, coins);

    // Adiciona a função add no objeto animations e cria animação giraMoeda em todos as moedas
    coins.callAll('animations.add', 'animations', 'giraMoeda', [0, 1, 2, 3, 4, 5], 10, true);
    // Chama animação recém criada (giraMoeda) em todas as moedas
    coins.callAll('animations.play', 'animations', 'giraMoeda');
}

Se rodar o jogo agora, verá que as moedas já aparecem no local que você as criou no mapa, porém se o jogador encostar nelas, nada acontece:

Adicionando colisão entre jogador e moedas

Para que haja colisão entre o jogador e qualquer objeto do jogo, esta deve ser verificada a todo momento. Você já deve ter percebido que estou falando na função atualizaJogo.

Vamos editar esta função e adicionar a ela uma chamada a outra função que irá verificar a colisão entre o jogador e as moedas.

Edite a função atualizaJogo e adicione a última linha:

/**
 *  Atualiza jogo. Esta função roda em torno de 60 vezes em 1 segundo, ou seja,
 *  60 FPS (FPS = Frames Por Segundo)
 */
function atualizaJogo() {
    aproximaInimigo();

    game.physics.arcade.collide(jogador, layer);
    game.physics.arcade.collide(inimigos, layer);

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

Crie a função que faz a verficação de colisão:

/**
 * Verifica colisão entre jogador e moedas e chama função encostouEmMoeda 
 * quando isso ocorrer
 */
function verificaSeEncostouMoedas(){
    game.physics.arcade.overlap(jogador, coins, encostouEmMoeda, null, this);
}

Veja que dissemos no código acima que quando houver o contato entre o jogador e alguma moeda, deve ser chamada a função encostouEmMoeda. Implemente-a também:

/**
 * Quando jogador encosta em moeda, chama esta função
 * que irá dar play no som da moeda e remover a moeda do jogo
 */
function encostouEmMoeda(player, moeda) {
    // Executa som da moeda por 1 segundo
    musicaMoedas.play('', 0, 1, false);
    // Exclui a moeda do jogo
    moeda.kill();
}

Agora sim você verá que quando o jogador encosta nas moedas, elas somem:

Simples não?
O desafio agora fica para você: adicione inimigos ao jogo usando o Tiled Map Editor e na programação adicione eles no grupo inimigos que já existe, assim quando o jogador encostar em qualquer inimigo, será morto.

E claro, agora faça a parte mais divertida que é personalizar seu mapa e ver o jogo funcionando de acordo com isso.

Seja criativo e divirta-se!!!

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 adicionar dinamicamente inimigos no mapa usando o Tiled Map Editor.

Até breve!