Imágenes con <canvas>

Uno de los detalles más interesantes de trabajar con <canvas> es que puedes dibujar imágenes en el lienzo, utilizando la potencia de Javascript para realizar cualquier tarea adicional.

Para ello, utilizaremos el método .drawImage() que podemos utilizarlo de varias formas diferentes:

Además, ten en cuenta que en image podemos indicar varios tipos de elementos, no solo imágenes:

Primero, vamos a centrarnos en las dos primeras trabajando con una imagen simple, ya que son las más sencillas. Luego, trabajaremos con un spritesheet (imagen con varios frames) y utilizaremos la última.

Dibujo de imágenes

Vamos a utilizar la siguiente imagen de una gallina para dibujarla en el lienzo. Esta imagen tiene un tamaño de 32x32 píxels, mientras que nuestro canvas tiene un tamaño de 200x200:

• 1️⃣ El primer drawImage() dibuja la imagen con el mismo tamaño.
• 2️⃣ El segundo drawImage() dibuja la imagen con el tamaño indicado al final.

<canvas></canvas>

<script type="module">
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 200;
  canvas.height = 200;
  canvas.style.background = "#ccc";

  const chicken = document.createElement("img");
  chicken.src = "chicken.png";

  // Cuando la imagen haya cargado...
  chicken.addEventListener("load", () => {
    ctx.drawImage(chicken, 80, 45);               // Mismas dimensiones (32x32)

    ctx.imageSmoothingEnabled = false;            // Respeta pixel art
    ctx.drawImage(chicken, 65, 110, 64, 64);      // Ampliación x2      (64x64)
  });
</script>

Un fallo muy común al dibujar imágenes en canvas es pensar que la imagen está cargada inmediatamente. Esa tarea depende de la conexión, por lo que hay que esperar a que esté cargada. Para evitarlo, escucharemos un evento load para asegurarnos.

Observa que en nuestro caso concreto estamos usando imágenes pixel art. Hemos desactivado imageSmoothingEnabled para que no suavice la imagen al ampliarla, ya que en las imágenes pixel art no se usa ese suavizado.

Animaciones con Sprites

Observa el siguiente spritesheet (imagen con varios fotogramas). En él se muestran 8 fotogramas, divididos en dos filas de 4 fotogramas. La primera fila es la animación del pollo en idle, es decir cuando está quieto y la segunda fila es la animación del pollo caminando:

Dos detalles importantes sobre la animación de este spritesheet es como saltar de un frame a otro, y como acelerar o retrasar la velocidad de la animación. Vamos a explicarlo paso a paso:

let frame = 0;
const TOTAL_FRAMES = 4;

// update
let frame = (frame + 1) % TOTAL_FRAMES;

// draw
const frame_x = frame * frameSize

const FRAME_MAX_DELAY = 10;
let delay = 0;

// update
delay++;

if (delay >= FRAME_MAX_DELAY) {
  frame = (frame + 1) % TOTAL_FRAMES;
  delay = 0;
}

Una vez mencionados estos detalles, es hora de implementarlo todo junto. Veamos el ejemplo completo:

<canvas></canvas>

<script type="module">
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 200;
  canvas.height = 200;
  canvas.style.background = "#ccc";
  ctx.imageSmoothingEnabled = false;

  const chicken = document.createElement("img");
  chicken.src = "chicken-sprite.png";

  // Inicialización
  const frameSize = 32;
  const x = 65, y = 75;
  let frame = 0;
  const TOTAL_FRAMES = 4;
  const FRAME_MAX_DELAY = 10;
  let delay = 0;

  const update = () => {
    delay++;

    if (delay >= FRAME_MAX_DELAY) {
      frame = (frame + 1) % TOTAL_FRAMES;
      delay = 0;
    }
  }

  const draw = () => {
    const frame_x = frame * frameSize;
    const finalSize = frameSize * 2;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(
      chicken,
      frame_x, 0, // Coordenadas de recorte (source x,y)
      frameSize, frameSize, // Tamaño del recorte (WxH)
      x, y,                 // Posición en el canvas (destination x,y)
      finalSize, finalSize  // Tamaño en el canvas (WxH)
    );
  }

  function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
  }

  // Cuando la imagen haya cargado...
  chicken.addEventListener("load", () => gameLoop());
</script>

Recuerda que si estás buscando hacer algo más grande de forma más rápida y simple, una buena recomendación es utilizar Phaser, que te permite hacer muchas cosas con menos código.