Setas

HTML5/JavaScript para Jogos (Parte 10)

Se você perdeu a parte anterior, acesse-a aqui: Parte 9

Nesta parte, vamos ler todas as direções de movimento da spritesheet (que não estão bem alinhados, como vocês vão ver) e vamos alterar a direção do personagem de acordo com a seta pressionada no teclado.

Então, primeiro, vamos acrescentar algum código, como a seguir

DIR_S= 0;
DIR_SW = 1;
DIR_W= 2;
DIR_NW = 3;
DIR_N = 4;
DIR_NE  = 5;
DIR_E = 6;
DIR_SE = 7;

var dir = DIR_S;
...
var x2 = 0;
var dx2 = 0;
var sx;
var sy;
var spritesheet2;
var boyAnimUp = [];
var boyAnimDown = [];
var boyAnimLeft = [];
var boyAnimRight = [];

...

  spritesheet2.onload = function() {

    sx = canvas2.width-spritesheet2.width;
    sy = canvas2.height-spritesheet2.height;
    
    ctx2.drawImage(spritesheet2, canvas.width-spritesheet2.width, canvas.height-spritesheet2.height);
  
    for (currentSprite=0; currentSprite<3; currentSprite++)
    {
      boyAnimDown.push(ctx2.getImageData(sx, sy+(84*currentSprite), 68, 84));
      boyAnimUp.push(ctx2.getImageData(sx+68, sy+(84*currentSprite), 68, 84));
      boyAnimLeft.push(ctx2.getImageData(sx+136, sy+(84*currentSprite), 68, 84));
      boyAnimRight.push(ctx2.getImageData(sx+(3*68), sy+(84*currentSprite), 68, 84));
    }

    currentSprite = 0;
    requestAnimationFrame(secondLoop);
  };

Aproveitamos as variáveis de direção que já estavam sendo usadas no primeiro canvas (linhas de 1 a 10) e declaramos novos vetores, um para cada direção do personagem (linhas 17 a 20). Depois, na função chamada após o carregamento de spritesheet2, no mesmo laço for que tínhamos antes, lemos as três imagens de cada direção, gravando no vetor correspondente. Novamente, determinei os valores do tamanho de cada sprite empiricamente e, como vamos ver na animação, a spritesheet não está bem alinhada, pois a animação apresentará alguns movimentos que não deveria.

Então, vamos aumentar a função que trata as teclas pressionadas, document.onkeydown, que já modificamos na Parte 6, da seguinte forma

document.onkeydown = function(e) {
  switch (e.keyCode) {
  case 38:	
    dir = DIR_N;
    moving = true;
    break;
  case 37:
    dir = DIR_W;
    moving = true;
    dx2 = -3;
    break;	
  case 39:	
    dir = DIR_E;
    moving = true;
    dx2 = 3;
    break;
  case 40:
    dir = DIR_S;
    moving = true;
    break;
  }
};

A função anterior, que é chamada quando uma tecla é pressionada, trata qual seta foi pressionada e altera o valor da variável dir para a direção correspondente. Lembre-se que os códigos das teclas são os seguintes

Tecla Código
seta para esquerda 37
seta para cima 38
seta para direita 39
seta para baixo 40

Finalmente, o valor de dir é lido na função que redesenha o canvas para usar o vetor de sprites da direção correspondente, conforme a estrutura switch no trecho de código a seguir

function secondLoop(timestamp) {
...
  if (spriteChangeCounter == 10)
  {
    spriteChangeCounter = 0;
    currentSprite++;
  }
  else
  {
    spriteChangeCounter++;
  }
  
  switch(dir)
  {
    case DIR_N:
      ctx2.putImageData(boyAnimUp[currentSprite%3], 0, 240);
      break;
    case DIR_S:
      ctx2.putImageData(boyAnimDown[currentSprite%3], 0, 240);
      break;
    case DIR_E:
      ctx2.putImageData(boyAnimRight[currentSprite%3], 0, 240);
      break;
    case DIR_W:
      ctx2.putImageData(boyAnimLeft[currentSprite%3], 0, 240);    
  }
  
  requestAnimationFrame(secondLoop);
}

Agora é só pressionar uma das setas e ver o menino se virar para a direção selecionada no link a seguir

https://jsbin.com/yiwepi

Na próxima parte, vamos substituir o retângulo móvel pelos sprites que animamos. Até lá!

Anúncios

2 comentários sobre “HTML5/JavaScript para Jogos (Parte 10)

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s