Adicionamos um monte de códigos à nossa função create que merecem uma explicação mais detalhada. Primeiro, esta parte:

platforms = this.physics.add.staticGroup();

Ela cria um novo Grupo de F├¡sica Est├ítica e o atribui ├á vari├ível local platforms. No Arcade Physics existem dois tipos de corpos f├¡sicos: Din├ómico e Est├ítico. Um corpo din├ómico ├® aquele que pode se movimentar por meio de for├ºas como velocidade ou acelera├º├úo. Ele pode saltar e colidir com outros objetos e essa colis├úo ├® influenciada pela massa do corpo e outros elementos.

Em contraste, um corpo est├ítico simplesmente tem uma posi├º├úo e um tamanho. N├úo ├® afetado pela gravidade, voc├¬ n├úo pode ajustar a velocidade dele e quando algo colide com ele, ele nunca se move. Est├ítico por nome, est├ítico por natureza. E perfeito para o ch├úo e plataformas que vamos deixar o jogador correr por a├¡.

Mas o que ├® um grupo? Como o nome indica, s├úo maneiras de agrupar objetos semelhantes e control├í-los como uma ├║nica unidade. Voc├¬ tamb├®m pode verificar a colis├úo entre Grupos e outros objetos do jogo. Os grupos s├úo capazes de criar seus pr├│prios Game Objects atrav├®s de fun├º├Áes auxiliares como create. Um Grupo de F├¡sica criar├í automaticamente filhos habilitados para f├¡sica, poupando-lhe um pouco de trabalho bra├ºal no processo.

Com o nosso Grupo de plataformas feito podemos usá-lo para criar as plataformas:

platforms.create(400, 568, 'ground').setScale(2).refreshBody();

platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');

Como vimos anteriormente, ele cria esta cena:

No preload, importamos a imagem 'ground'. É um simples retângulo verde, com 400 x 32 pixels de tamanho e servirá para nossas necessidades básicas de plataforma:

image

A primeira linha de c├│digo acima adiciona uma nova imagem ground em 400 x 568 (lembre-se, as imagens s├úo posicionadas com base no seu centro) - o problema ├® que precisamos dessa plataforma para abranger toda a largura do nosso jogo, caso contr├írio o jogador cai dos lados. Para fazer isso n├│s escalamos x2 com a fun├º├úo setScale(2). O ch├úo agora mede 800 x 64, que ├® perfeito para as nossas necessidades. A chamada refreshBody() ├® necess├íria porque escalamos um corpo f├¡sico est├ítico, ent├úo temos que dizer ao physics world sobre as mudan├ºas que fizemos.

O ch├úo ├® escalado e no lugar, ent├úo ├® hora das outras plataformas:

platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');

O processo ├® exatamente o mesmo de antes, mas n├úo precisamos escalar essas plataformas j├í que elas j├í t├¬m o tamanho certo.

3 plataformas são colocadas ao redor da tela, separadas justamente para permitir que o jogador pule para elas.

Então vamos adicionar nosso jogador.