pedrocacique

Colisões - parte 1

27 de maio de 2016

Olá pessoas!

Um dos conceitos mais importantes para o desenvolvimento de jogos é a colisão entre objetos. Ela está presente desde a verificação de um personagem com a plataforma até a coleta de itens no espaço do jogo. É através dela que podemos garantir a interação entre os elementos do jogo.

Veja o exemplo abaixo:

See the Pen Platform Player Movement by Pedro Cacique (@phcacique) on CodePen.

Ao longo deste tutorial, vamos desenvolver uma mecânica de jogo como essa. Observe que a colisão com a plataforma é o que impede o personagem de continuar caindo infinitamente. Ela também é responsável pela coleta dos itens amarelos.

Desenho no canvas

Vamos começar com o desenho do personagem e sua movimentação. Em seguida, colocaremos as plataformas para trabalharmos a colisão.

Comece com uma página html com um elemento canvas simples:

Adicione um script a essa página para que possamos trabalhar com este canvas como o cenário principal.

Primeiramente, vamos colocar um evento para que quando a página for carregada, o contexto seja inicializado.

Observe que inicializamos o canvas, buscando-o pelo seu ID. Em seguida, determinamos o contexto (ctx) como sendo bidimensional. Aproveitamos para guardar as dimensões do canvas nas variáveis w e h, para usarmos mais adiante. Por fim, determinamos a cor do plano de fundo.

Neste jogo, todos os elementos serão retangulares para simplificarmos o código e focarmos apenas na mecânica do jogo. Vamos criar uma função que receba um objeto e o desenhe na tela. Usando uma notação simplificada de objetos em JS, determinaremos os atributos necessários para o desenho e movimento, como posição (x, y), largura, altura e cor do objeto. Nossa função deve interpretar este objeto e desenhar um retângulo correspondente na tela.

Vamos criar o personagem e chamar esta função no método onload (visto anteriormente) para teste.

O resultado deve ser um retângulo vermelho desenhado no canvas:

See the Pen Platform mechanics - part1 by Pedro Cacique (@phcacique) on CodePen.

Movimento Horizontal

Agora que temos o personagem desenhado na tela, podemos trabalhar com seu movimento pelo espaço do jogo. A interação com o usuário será feita via teclado. Usaremos as teclas direcionais para o movimento horizontal e outra tecla a sua escolha para o pulo. Neste exemplo, usaremos a tecla SHIFT.

Precisamos então, adicionar um evento para reconhecimento das teclas e uma estrutura que se repetirá a cada segundo (ou várias vezes em um segundo) que alterará a posição do jogador.

Esta estrutura é conhecida como Game Loop, um padrão de projeto de jogos que garante o teste das condições do jogo a cada instante e "desenha" o jogo de acordo com tais condições.

O GameLoop se repetirá em uma frequência determinada pelo programador. Esta frequência é conhecida como FPS (Frames per second), ou seja, o número de quadros por segundo. Quanto maior o número de quadros por segundo, mais suave será a interação com o jogador.

Para nosso exemplo, usaremos um valor de FPS comum para os jogos online bidimensionais, que garante a qualidade do nosso sistema. Para este game, FPS = 30.

Criamos então um intervalo de tempo que se repetirá nesta taxa determinada, verificando as condições do sistema e desenhando a tela como deve ser feito.

Nosso intervalo chamará a função gameloop(), que por sua vez chamará outros dois métodos: update() e draw(). O primeiro será responsável pelos cálculos do jogo e o segundo para o desenho da tela.

No método draw(), a princípio chamaremos apenas o método de desenho do personagem. No primeiro teste, o personagem permanecerá imóvel, mas ele será apagado e redesenhado 30 vezes por segundo.

Obsreve que, no método draw(), nós primeiro apagamos o canvas, para depois redesenhá-lo.

OK!

Como fazemos então para que o personagem se mova?

Já que ele está sendo desenhado constantemente, precisamos alterar, de alguma forma, o valor da sua posição em X e em Y, antes que ele seja redesenhado. Para isso usaremos duas variáveis que vão indicar se as teclas da esquerda e da direita estão apertadas ou não. Se estiverem, aumentaremos ou diminuiremos o valor de x do objeto player.

Criaremos as variáveis isLeft e isRight que receberão valores true quando as teclas forem pressionadas, e false quando forem soltas. No método update(), se as variáveis forem verdadeiras, alteramos a posição do personagem (imediatamente antes de desenhá-lo).

Criamos um atributo chamado speed (quando criamos o objeto do jogador), para que possamos controlar o incremento da posição.

No método onload, adicionamos então os eventos de teclado para alterar as variáveis. Veja:

Observe, no código acima, que o movimento do personagem foi limitado ao espaço da tela. Ou seja, quando isRight=true aumentamos o valor de x, mas não indefinidamente. Ele só pode ser aumentado se ainda for menor que o tamanho da tela. O análogo é válido para a esquerda.

See the Pen Platform mechanics - part2 by Pedro Cacique (@phcacique) on CodePen.

Gravidade

Muito bom!

Agora podemos adicionar um pouco de força gravitacional ao jogador. Criaremos uma variável que simule a gravidade do local. A sua ação será bem simples a princípio e apenas aumentará o valor de y a cada intervalo. Neste primeiro momento, pararemos o jogador ao chegar no fim da tela, para que ele não caia indeterminadamente. Na próxima parte deste tutorial, colocaremos a colisão com as plataformas e o pulo.

O que nos dá o seguinte resultado:

See the Pen Platform mechanics - part3 by Pedro Cacique (@phcacique) on CodePen.

Na próxima parte deste tutorial, vamos criar a lógica para o pulo do personagem e a colisão em si.

Até a próxima!

Parte 2