Parte 5 – Criando moedas no jogo com audio de captura – Paulo Trentin
Paulo Marcos Trentin 14 de setembro de 2014 2 Comments
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
// 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:
http://www.paulotrentin.com.br/wp-content/uploads/2014/09/collect-coin.ogg
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
// ... 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
// 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)
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:
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!!!
No próximo post veremos como adicionar dinamicamente inimigos no mapa usando o Tiled Map Editor.
11 de fevereiro de 2015 às 19:05
Muito bons os tutoriais! Fáceis de acompanhar, entender e bem completos, dão uma boa noção geral do framework! Mas essa física aí hein? Meu pc tá meio acabado e antes do tutorial 11 o maior desafio pra mim foi conseguir ficar no cenário… hehe
Tem previsão de mais algum artigo sobre o Phaser ou a "série" foi finalizada mesmo?
fico feliz que tenha gostado. Sim a série foi finalizada.
Este tutorial (parte 11) mostra a nova física P2 que funciona muito melhor, e a construção do mapa foi mudada, oque parou de gerar o problema em computadores mais lentos: http://www.paulotrentin.com.br/programacao/criando-jogos-com-html5-e-phaser/parte-11-mudando-fisica-do-jogo-grande-atualizacao/