
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!
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?
Abraço.
Olá Ralf,
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/
Bons estudos!