Além das linhas: desenhando imagens no canvas - Parte 2 - Clipping

Desenhar imagens no canvas é legal, mas, para ficar ainda mais bacana, precisamos aprender a técnica de clipping, ou recorte, de imagens.

Conceito

No jargão do desenvolvimento de jogos, um conjunto de imagens contida em um único arquivo é chamada de sprite sheet. É com esse grupo de imagens que criamos animações, que não é nada além que um conjunto de imagens em sequência, dando sensação de movimento quando exibidas com um curto intervalo de tempo entre elas. Vamos usar como base a imagem desse astronauta aqui.

Sprite sheet

Uma sequência de imagens forma uma tabela de imagens, um sprite sheet, que contém linhas e colunas. Na imagem do astronauta, temos uma tabela com uma linha e oito colunas. Assim, cada quadro corresponde a 1/8 da imagem. Como a imagem possui 408 pixels de largura, então cada quadro (408/8) possui 51 pixels. A altura da linha é de 50 pixels.

Usando esse conceito, então, caso eu queira acessar o 3º quadro da animação, basta fazer referência à posição x = 2*(408/8), y = 0 (a contagem de itens sempre começa no zero).

Desenhando via clipping

Vamos usar o método .drawImage() (saiba mais) para desenhar apenas a parte da imagem que nos interessa. O método .drawImage() possui mais opções que as já conhecidas. Vamos ao código:

var context = document.getElementById('output').getContext('2d');

//Recorte da imagem
var posicaoXOrigem = 2 * (408/8);
var posicaoYOrigem = 0;
var larguraOrigem = 51;
var alturaOrigem = 50;
var posicaoXDestino = 0;
var posicaoYDestino = 150;
var larguraDestino = 51;
var alturaDestino = 50;

var img = new Image();
img.src = 'spaceman.png';
img.onload = function() {
  context.drawImage(
    img,
    posicaoXOrigem,
    posicaoYOrigem,
    larguraOrigem,
    alturaOrigem,
    posicaoXDestino,
    posicaoYDestino,
    larguraDestino,
    alturaDestino
  );
}

Use o código base e adicione o script acima para checar o resultado. Tire um tempo para entender todos os parâmetros do .drawImage() antes de continuar. Teste outras posições, altere os valores das variáveis e confira o resultado.

Até breve!