O que veremos aqui?

Uma grande mudança no jovo será feita à partir deste post, iniciaremos o uso de uma nova física, muito mais completa e robusta.

Tentei manter o máximo de compatibilidade nesta atualização, isto é, a maior parte das funções que conhecíamos continuaram iguais. Isso vale também para a edição do mapa, onde deixei os tilesets antigos.

Nova física P2

Anteriormente usáva-mos a física ARCADE, que é simples e fácil para iniciar. Ela traz detecção de colisão quadrada entre objetos e funções simplificadas para gerenciamento do jogador.

A nova física P2 é mais robusta, e uma das principais melhorias que ela traz é a detecção de colisão por polígonos. Assim, podemos fazer uma colisão com qualquer superfície: quadrada, retangular, oval, circular etc.

Esta nova física permite também a criação de novos elementos no cenário, como uma corrente. Veja aqui o exemplo funcionando

Novo processo de criação do mapa

Antes o mapa possuia apenas uma camada, e todo fundo era construído diretamente no tiled map editor. Percebi depois de alguns testes, e principalmente, me inspirando nesta implementação incrível de phaser, que esse não é o jeito correto de se trabalhar.

Adicionalmente, camadas novas foram criadas. Agora temos camadas responsáveis por contato, em vez das áreas de contato serem controladas pelos blocos tiles (com a função map.setCollisionBetween). Isso significa que ficou muito mais customizável a definição de áreas de contatos no jogo.

Veja como a construção do mapa está diferente:

Criando fundos

Criar o fundo no Tiled Map Editor gera um overhead gigante no código, fazendo a taxa de FPS baixar muito e jogo todo ficar lento apresentando até alguns bugs que você pode conferir nos posts anteriores a este (rodando em uma máquina um pouco mais lenta).

O jeito correto de se gerar um fundo é adicionando as imagens de maneira independente via código fonte, como você pode ver dentro da função criaCenario, estas duas linhas:

    // Cria fundos do cenário com tamanho de 6600 largura por 660 de alutra
    paralax1 = game.add.tileSprite(0, 0, 6600,  660, 'mariomiddle');
    paralax0 = game.add.tileSprite(0, 0, 6600, 660, 'mariofront');

Elas criam duas imagens no jogo, veja que ambas foram previamente carregadas na função carregaAssets:

    // Carrega fundos do cenário
    game.load.image('mariomiddle', 'assets/mario-darkgreen-middle-blur.png');
    game.load.image('mariofront', 'assets/mario-darkgreen-front-blur.png');

E para fazer o fundo ficar dinâmico, gerando aquela sensação de 3d (com várias camadas) é importante fazê-lo se mover de acordo com o movimento do personagem. Para isso, basta mudar o posicionamento deles na função atualizaJogo:

    // Move fundos para gerar sensação de 3d
    paralax1.x= game.camera.x*0.5; 
    paralax0.x= game.camera.x*0.3; 

Detectando colisões

Anteriormente usávamos a função “game.physics.arcade.collide(jogador, layer)” para verificar se o jogoador havia colidido com alguma layer do mapa.

Agora usamos o conceito de Grupos de Colisões ou Collision Groups (CG). Assim, ao criar o jogador, inimigos e qualquer outro elemento do jogo, definimos qual é seu grupo de colisão.

Na função criaJogador, você irá encontrar esse comando desta forma:

    // Define qual grupo de colisão o jogador pertence (playerCG)
    jogador.body.setCollisionGroup(playerCG);

Isso significa que o jogador pertence ao grupo de colisão chamado playerCG (grupo de colisão do jogador) que, por sua vez, foi criado na função criaFisica:

    // Cria grupos de colisões (ColisionGroups) collisiongroups
    playerCG = game.physics.p2.createCollisionGroup();
    // ... demais grupos aqui

Uma vez que definimos qual grupo de colisão o jogador pertence, devemos definir com quais grupos ele irá colidir como visto abaixo:

    // Define qual quais grupos de colisão o jogador irá colidir
    jogador.body.collides([groundCG, enemyGroundCG, enemyAirCG, platformCG]);

Aqui definimos que o jogador irá colidir com os grupos de colisão: groundCG, enemyGroundCG, enemyAirCG, platformCG.

Jogo em ação

Aqui você pode ver o código que implementamos funcionando. Neste link você pode baixar esta versão do jogo:

Até breve!