Animación 2D con sprites en three.js

Esta pequeña librería permite crear animaciones 2D en three.js a partir de una hoja de sprites. La idea es mantener la misma geometría y seleccionar la región de la textura correspondiente a cada fotograma.

Preparar el material

El material utiliza la textura de la hoja de sprites. En este ejemplo se descartan los fragmentos cuya transparencia queda por debajo del umbral indicado y se habilita el dibujo de ambas caras.

  const material = new THREE.MeshPhongMaterial({
    map: texture,
    alphaTest: 0.7,
    side: THREE.DoubleSide,
  });

Definir la geometría

La geometría describe un plano mediante posiciones, coordenadas UV e índices. Las UV permiten relacionar sus vértices con la textura.

const geometry = new THREE.BufferGeometry();

const positions = [ -0.5, 0.5, 0, 
                     0.5, 0.5, 0, 
                    -0.5,-0.5, 0, 
                     0.5,-0.5, 0];

geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));

geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2));

geometry.setIndex([0, 2, 1, 2, 3, 1]);
geometry.computeVertexNormals();

Con el material y la geometría preparados, se crea la malla y se añade a la escena.

mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

Organizar y reproducir secuencias

El constructor de Animation recibe la geometría y las dimensiones de la cuadrícula de sprites. Cada llamada a create registra un nombre, un fotograma inicial, uno final y un intervalo de tiempo.

 animation = new Animation(mesh.geometry, 12, 6)
 .create("run", 0, 25, 0.025)
 .create("jump", 30, 63, 0.020)
 .play("run");

play selecciona la secuencia que se quiere reproducir. Los fragmentos muestran la API utilizada por el proyecto original; el repositorio reúne las piezas necesarias para ejecutar el ejemplo.

También puedes explorar el motor de juegos 2D con HTML5 para ver otro enfoque de renderizado.

Código fuente

Explorar el proyecto en GitHub