Implementando uma animação

Uma primeira ideia para fazer uma animação, digamos, da posição y de um objeto, é criar um laço for fazendo o valor da variável ir de seu valor inicial 0 até o final 140. E digamos que queremos que a animação tenha duração de 5s.

const ctx = canvasEl.getContext('2d');              // linha 1

function desenhaQuadrado(x, y) {                    // linha 3
    ctx.fillStyle = 'yellow';
    ctx.fillRect(x, y, 30, 30);
}

for (let y = 0; y <= 140; y++) {                    // linha 9
    desenhaQuadrado(10, y);
}

Ué, mas o que aconteceu ali ➚? Não houve animação... vamos pensar...

O laço for das linhas 9-11 é executado 141 vezes, muito rapidamente. Tão rápido quanto o navegador consegue, o que pode ser algo próximo de instantaneamente. Vamos fazer um teste.

console.time();        // começa a contar
for (let y = 0; y <= 140; y++) {
    desenhaQuadrado(10, y);
}
console.timeEnd();     // pára de contar

Usando imagens: sprites

Além de desenhar formas geométricas no canvas, também é possível desenhar imagens. O objeto de contexto do canvas possui o método drawImage(...), que tem o seguinte formato:

ctx.drawImage(imagem, x, y);

Para definir qual imagem usar, podemos criar um objeto new Image(caminho) e passá-la para a função ctx.drawImage(...). Tipo assim:

const ctx = canvasEl.getContext('2d');
const slime = new Image();
slime.src = 'imgs/slime.png';
                   // x,  y
ctx.drawImage(slime, 10, 10);

Se quisermos desenhar o slime com um tamanho maior, por exemplo, também existe uma versão da função ctx.drawImage(...) que recebe 5 parâmetros:

const ctx = canvasEl.getContext('2d');
const slime = new Image();
slime.src = 'imgs/slime.png';
                         // larg, alt
ctx.drawImage(slime, 10, 10, 128, 128);

Como podemos ter várias propriedades que descrevem uma sprite, como sua posição, tamanho e imagem, podemos criar uma classe para representá-las.

Apesar de os códigos acima parecerem funcionar, eles têm um problema: se a imagem do slime não tiver sido baixada previamente pelo navegador (e estiver em cache), ao executar ctx.drawImage(slime...), podemos receber o seguinte erro:

Uncaught TypeError: Type error

Isso acontece porque a imagem começou a ser baixada na linha 3 e quando a linha 5 tentar desenhá-la, é muitíssimo provável que ela ainda não tenha sido baixada.

Para resolver esse problema, devemos aguardar o carregamento da imagem para então desenhá-la... usando a classe Sprite, podemos fazer assim:

class Sprite {
    constructor(imagem, x, y, largura, altura) {
        this.x = x;
        this.y = y;
        this.largura = largura;
        this.altura = altura;
        this.imagem = imagem;
        this.imagem.addEventListener('load', () => this.imagemCarregada = true);
    }

    desenhar(ctx) {
        if (this.imagemCarregada) {
            ctx.drawImage(this.imagem, this.x, this.y, this.largura, this.altura);
        }
    }
}

Assim como fizemos quando animamos um quadrado, podemos animar a posição do slime.

Mas e se quisermos fazer uma animação como se fosse uma imagem .gif?

Se mandarmos desenhar um arquivo .gif contendo uma animaçãozinha em um <canvas></canvas>, apenas o primeiro quadro da animação será mostrado, como se fosse um arquivo .png ou .jpg.

Pra ter uma animação de imagens dentro de um canvas, então, precisamos de uma imagem que contenha todos os quadros de animação e usar uma técnica chamada animação com spritesheets.

Animação com spritesheets

Para fazermos uma animação de imagens em um <canvas></canvas>, precisamos de ter uma mesma imagem contendo todos os quadros de animação (em inglês, uma spritesheet). Olha essa imagem do slime-atoa-spritesheet.png.

Tudo bem, mas o que fazemos com isso?!

A função ctx.drawImage(...) tem uma terceira (e última) forma, que recebe 9 parâmetros. Eles são os seguintes:

ctx.drawImage(
    imagem,                     // a imagem sendo desenhada
    xQuadro,                    // o x do retângulo dentro da imagem 
    yQuadro,                    // o y do retângulo ...
    larguraQuadro,              // largura do quadro
    alturaQuadro,               // altura do quadro
    x,                          // x do canvas onde vai aparecer
    y,                          // y do canvas ...
    largura,                    // largura no canvas
    altura                      // altura no canvas
);

Repare que a imagem slime-atoa-spritesheet.png tem o tamanho de 320x32 representando 10 quadros de animação ("subimagens"). Ou seja, se em 320 pixels de largura há 10 quadros, cada quadro tem tamanho 32x32.

Quando formos desenhá-la, vamos pegar apenas um desses quadros para desenhar. Se quisermos o primeiro, o segundo ou o último, faríamos respectivamente assim:

ctx.drawImage(
    imagem,
    0,    // xQuadro
    0,    // yQuadro
    32,   // larguraQuadro
    32,   // alturaQuadro
    x,
    y,
    largura,
    altura
);

ctx.drawImage(
 imagem,
    32,   // xQuadro
    0,    // yQuadro
    32,   // larguraQuadro
    32,   // alturaQuadro
    x,
    y,
    largura,
    altura
);

ctx.drawImage(
 imagem,
    320-32, // xQuadro
    0,      // yQuadro
    32,   // larguraQuadro
    32,   // alturaQuadro
    x,
    y,
    largura,
    altura
);

Nesse exemplo, para desenhar cada quadro, nós simplesmente precisamos encontrar qual o xQuadro para desenhar cada quadro. Como a largura (e altura) de cada quadro é 32, ficou moleza!

function desenhaQuadro(quadro, x, y) {
    ctx.drawImage(
        slime,      // imagem do slime
        ???,        // xQuadro: uma fórmula
        0,          // yQuadro sempre 0
        32,         // larg/alt do quadro é 32
        32,
        x,          // x,y do parâmetro
        y,
        32,         // larg/alt sempre 32
        32
    );
}

Muito bem! Agora, se juntarmos essa forma de desenhar apenas 1 quadro de uma imagem, com o que vimos sobre animação, podemos alterar uma variável quadro ao longo do tempo.

const animacao = new Animacao(800, 0, 9);

function desenhaQuadro(quadro, x, y) {
    ctx.drawImage(
        slime,
        // origem na imagem
        quadro * 32,
        0,
        32,
        32,
        // destino no canvas
        x, y, 32, 32
    );
}

function atualiza() {
    animacao.atualizar();

    let quadro = animacao.valor;
    quadro = Math.floor(quadro);
    desenhaQuadro(x, y, quadro);
}

animacao.comecar();
setInterval(atualiza, 33);

Show!! O resultado é ← este aqui. Com esse conhecimento, não é difícil imaginar como fazer uma animação com spritesheets se a imagem tiver os quadros não apenas em linha, mas em colunas também, como ⬋ esta aqui.

à toa ›› rolando ›› pulando ›› atacando ›› morrendo ››

Com essa pequena alteração e a nova imagem, ficaria assim: experimente alterar a linha

let linha = 2;

function desenha(quadro, x, y) {
    ctx.drawImage(
        slime,
        // origem na imagem
        quadro * 32,
        linha * 32,
        32,
        32,
        // destino no canvas
        x, y, 32, 32
    );
}