El parallax es cuando los objetos lejanos parecen moverse más lento que los cercanos. En pixel art lo armas con capas: la capa más cercana se mueve más píxeles por fotograma y la más lejana se mueve menos, por ejemplo 4, 3, 2 y 1 píxeles. Para que el loop sea suave, usa tantos fotogramas como píxeles de ancho tenga el lienzo.
Qué es el parallax
Imagina que vas en un auto. Los edificios junto a la carretera pasan volando, mientras que las montañas a lo lejos casi no se mueven. Ese es el efecto parallax, y le da profundidad a una animación.
Por qué pasa
Aquí viene lo interesante: el objeto cercano y el lejano en realidad se mueven a la misma velocidad. Pero tu campo de visión se hace más ancho con la distancia. Así que un objeto lejano necesita más tiempo para cruzarlo que uno cercano, y por eso parece más lento.
Capas y velocidades
El scroll parallax está hecho de capas que se mueven un número distinto de píxeles por fotograma. Cuanto más cerca está la capa, más píxeles se mueve, así que va más rápido. Normalmente se agrupan en fondo, plano medio y primer plano.
- Capa 4, las montañas: 1 píxel por fotograma, la más lenta.
- Capa 3, los edificios lejanos: 2 píxeles por fotograma, el doble de rápido.
- Capa 2, los edificios cercanos y la calle: 3 píxeles por fotograma.
- Capa 1, el puente y los personajes: 4 píxeles por fotograma, cuatro veces más rápido que las montañas.
Cerrar el loop
La animación nunca debe detenerse a la mitad y saltar al inicio. Debe correr suave hasta el final y volver a entrar por el otro lado. Para eso, el número de fotogramas tiene que coincidir con el ancho del lienzo en el scroll horizontal, o con su alto en el scroll vertical. La animación de arriba mide 114 píxeles de ancho, así que tiene exactamente 114 fotogramas.
Pruébalo primero en pequeño
Estos tres son del reto de mi curso. Cada lienzo mide 62 píxeles de ancho, así que cada loop tiene exactamente 62 fotogramas. El suelo se mueve más píxeles por fotograma que las nubes, así que se siente más cerca. Haz uno tuyo: unas pocas capas en un lienzo pequeño, y luego cuenta los fotogramas.
Cómo lo armé
Este mide 320 píxeles de ancho, así que necesita 320 fotogramas. Nadie dibuja eso a mano. Separé el arte del plataformas en capas (puente, edificios cercanos con la calle y el agua, edificios lejanos, montañas, fondo) y dejé que un script en Aseprite generara los fotogramas de cada capa, a 50 milisegundos por fotograma: 4 píxeles para el puente, 3 para los edificios cercanos, 2 para los lejanos, 1 para las montañas.
Si haces juegos en Unity o Godot, tu motor puede hacer el parallax por ti. Igual vale la pena saber armarlo en el sprite, para prototipos, conceptos y arte que quieras compartir.