Animación subpíxel

Qué es

En un sprite pequeño, el movimiento entero más pequeño es un píxel, y un píxel puede ser mucho. Un personaje de 16 píxeles que sube el pecho un píxel para respirar parece que tiene hipo.

La animación de subpíxel lo resuelve. En lugar de mover la forma, cambias el color de los píxeles de su borde. Si un píxel del borde pasa del color del fondo a un tono medio, y luego al color completo de la forma, el borde parece avanzar hacia fuera un tercio de píxel, luego dos tercios. El ojo lee un movimiento pequeño y suave.

Por qué lo hacen los artistas

• Reposos suaves. Respirar, flotar y balancearse se ven tranquilos en lugar de bruscos.
• Sprites pequeños. A 16 o 32 píxeles no hay espacio para grandes movimientos, así que las fracciones importan.
• Suavidad sin más píxeles. Añade resolución aparente al movimiento sin redibujar a un tamaño mayor.

Errores comunes

• Demasiados colores intermedios. Si añades colores nuevos solo para los bordes, la paleta crece y el sprite se ve borroso. Usa colores que ya estén en tus rampas.
• Usarla para movimientos grandes. Un ciclo de carrera o un golpe de espada se leen mejor con poses claras en píxeles enteros.
• Bordes incoherentes. Si un lado de una forma usa pasos subpíxel y el otro salta, la forma parece estirarse.
• Parpadeo. Cambiar un píxel de un lado a otro entre fotogramas sin una dirección clara se ve como ruido y no como movimiento.

Cómo hacerlo a mano

1. Dibuja las poses inicial y final, a un píxel de distancia.
2. Entre ellos, añade uno o dos fotogramas en los que solo cambien los píxeles del borde.
3. Para cada píxel del borde que quedará cubierto por el movimiento, pásalo por un color intermedio de la rampa.
4. Reproduce el bucle a la velocidad del juego y con un zoom de 1×. Ajusta el ritmo antes de añadir más fotogramas.
5. Mantén quietos todos los demás píxeles del sprite, para que el cambio se lea como movimiento del borde.

Dónde encaja Pixor

El nodo de Estilo Movimiento subpíxel de Pixor muestra en los píxeles de su borde una parte que se mueve menos de un píxel por fotograma, como lo haría un artista. Además, Pixor mantiene una animación renderizada lo bastante estable como para que merezca la pena añadir retoques de subpíxel. El pivote queda fijo en un píxel en cada fotograma y lado, así que el cuerpo no tiembla. Las bandas de luz se mantienen hasta que una superficie gira claramente, el tramado se fija a la superficie, y un pase de limpieza elimina los píxeles sueltos y las líneas que aparecen solo durante un fotograma. Pixor también mide el parpadeo a lo largo de un clip.

Desde ahí, exporta a Aseprite, donde cada acción y lado tiene su propia etiqueta, y añade retoques de subpíxel en una capa aparte. Cuando vuelvas a renderizar, las capas pintadas a mano se quedan en sus fotogramas.

Relacionado

• Mixels: por qué los movimientos deben quedarse en la cuadrícula de píxeles
• Sprites prerrenderizados
• Animación, Aseprite y el manual de exportación