Recorte y sprite sheets

Un sprite sheet es una sola imagen que contiene muchas, y dibujar desde ella es exactamente para lo que existe la firma larga de drawImage. La técnica viene de los años ochenta y sigue siendo correcta por razones que han cambiado con el tiempo: antes era por el número de peticiones de red, ahora es por el coste de cambiar de textura y por el consumo de memoria de las imágenes sueltas.

Dibujar un fotograma

Con una rejilla regular, el cálculo es aritmética:

function dibujarCelda(ctx, hoja, indice, columnas, ancho, alto, dx, dy) {
  const col = indice % columnas;
  const fil = Math.floor(indice / columnas);
  ctx.drawImage(hoja,
    col * ancho, fil * alto, ancho, alto,   // origen: la celda
    dx, dy, ancho, alto);                    // destino
}

Con un atlas empaquetado —celdas de tamaños distintos colocadas por un algoritmo de empaquetado— hace falta un índice, que las herramientas de empaquetado generan como JSON:

const atlas = {
  imagen: null,
  marcos: {
    'nave-1':   { x: 0,   y: 0,  w: 48, h: 48 },
    'nave-2':   { x: 48,  y: 0,  w: 48, h: 48 },
    'explota-1':{ x: 96,  y: 0,  w: 64, h: 64 },
    'explota-2':{ x: 160, y: 0,  w: 64, h: 64 },
  },
};

function sprite(ctx, nombre, dx, dy, escala = 1) {
  const m = atlas.marcos[nombre];
  if (!m) return;
  ctx.drawImage(atlas.imagen, m.x, m.y, m.w, m.h,
                Math.round(dx), Math.round(dy), m.w * escala, m.h * escala);
}

Los Math.round de la posición de destino no son cosméticos: mantienen el camino rápido de copia y producen sprites nítidos.

Animación por fotogramas

Una animación de sprites es un índice que avanza con el tiempo. La forma correcta es basarla en tiempo transcurrido y no en número de fotogramas, para que la velocidad no dependa de la tasa de refresco:

class Animacion {
  constructor(marcos, fps = 12, bucle = true) {
    this.marcos = marcos;       // ['nave-1', 'nave-2', ...]
    this.duracion = 1000 / fps;
    this.bucle = bucle;
    this.transcurrido = 0;
    this.terminada = false;
  }
  actualizar(dt) {
    if (this.terminada) return;
    this.transcurrido += dt;
    const total = this.duracion * this.marcos.length;
    if (!this.bucle && this.transcurrido >= total) {
      this.transcurrido = total - 1;
      this.terminada = true;
    }
  }
  get marco() {
    const i = Math.floor(this.transcurrido / this.duracion) % this.marcos.length;
    return this.marcos[i];
  }
}

Con eso, dibujar es una línea y la velocidad es independiente del dispositivo:

let anterior = performance.now();
function bucle(ahora) {
  const dt = ahora - anterior; anterior = ahora;
  anim.actualizar(dt);
  ctx.clearRect(0, 0, W, H);
  sprite(ctx, anim.marco, x, y, 2);
  requestAnimationFrame(bucle);
}
requestAnimationFrame(bucle);

Por qué el atlas sigue ganando

Las tres razones actuales, en orden de importancia.

El cambio de textura cuesta. Un canvas acelerado agrupa las llamadas de dibujo en lotes, y el criterio de agrupación es la textura de origen. Cien drawImage desde la misma imagen se resuelven en un lote; cien desde cien imágenes distintas se resuelven en cien lotes, cada uno con su cambio de estado en la GPU. La diferencia es grande y crece con el número de elementos.

La memoria por imagen tiene sobrecoste. Cada imagen decodificada tiene su propia asignación, y las GPU redondean las texturas a potencias de dos en algunos caminos. Doscientos iconos de 24 por 24 sueltos ocupan bastante más que un atlas de 512 por 512 que los contiene todos.

Menos peticiones y mejor compresión. Sigue siendo cierto aunque HTTP/2 haya reducido el coste de las peticiones múltiples: un solo fichero comprime mejor que doscientos pequeños, porque el compresor ve más redundancia.

Lo que ha cambiado es que ya no es cierto que las peticiones múltiples sean el factor dominante. Con HTTP/2 y HTTP/3 el coste por petición es bajo, así que si tus recursos son pocos y grandes, el atlas aporta menos. Sigue aportando para muchos recursos pequeños, que es exactamente el caso de los iconos y los sprites.

Generar un atlas en tiempo de ejecución

Una técnica muy útil y poco conocida: construir el atlas al arrancar, en un canvas fuera de pantalla, a partir de formas dibujadas por código. Con eso obtienes las ventajas del atlas sin tener que producir ningún fichero de imagen.

function construirAtlas(definiciones, lado = 64, dpr = 1) {
  const columnas = Math.ceil(Math.sqrt(definiciones.length));
  const filas = Math.ceil(definiciones.length / columnas);
  const hoja = document.createElement('canvas');
  hoja.width = columnas * lado * dpr;
  hoja.height = filas * lado * dpr;
  const c = hoja.getContext('2d');
  c.scale(dpr, dpr);

  const marcos = {};
  definiciones.forEach((def, i) => {
    const col = i % columnas, fil = Math.floor(i / columnas);
    const x = col * lado, y = fil * lado;
    c.save();
    c.translate(x + lado / 2, y + lado / 2);   // cada icono se dibuja centrado
    def.dibujar(c, lado * 0.4);
    c.restore();
    marcos[def.nombre] = { x: x * dpr, y: y * dpr, w: lado * dpr, h: lado * dpr };
  });
  return { imagen: hoja, marcos, dpr };
}

const atlas = construirAtlas([
  { nombre: 'circulo', dibujar: (c, r) => {
      c.fillStyle = '#89b4fa'; c.beginPath(); c.arc(0, 0, r, 0, Math.PI * 2); c.fill(); } },
  { nombre: 'cuadrado', dibujar: (c, r) => {
      c.fillStyle = '#a6e3a1'; c.fillRect(-r, -r, r * 2, r * 2); } },
  { nombre: 'triangulo', dibujar: (c, r) => {
      c.fillStyle = '#f9e2af'; c.beginPath();
      c.moveTo(0, -r); c.lineTo(r, r); c.lineTo(-r, r); c.closePath(); c.fill(); } },
], 64, window.devicePixelRatio || 1);

A partir de ahí, dibujar diez mil marcadores en un mapa son diez mil drawImage desde una sola textura, en lugar de diez mil construcciones de ruta y diez mil rellenos. La diferencia de rendimiento en escenas densas es de un orden de magnitud, y esta es una de las optimizaciones más rentables que existen en canvas.