Parallax é quando objetos distantes parecem se mover mais devagar que os próximos. Em pixel art você monta isso com camadas: a camada mais próxima se move mais pixels por quadro, a mais distante se move menos, por exemplo 4, 3, 2 e 1 pixel. Para o loop ficar suave, use tantos quadros quanto a largura da tela em pixels.
O que é parallax
Imagine que você está num carro. Os prédios na beira da estrada passam voando, enquanto as montanhas lá longe quase não se mexem. Esse é o efeito parallax, e ele dá profundidade a uma animação.
Por que isso acontece
Aqui vem a parte interessante: o objeto próximo e o distante se movem, na verdade, na mesma velocidade. Mas o seu campo de visão fica mais largo com a distância. Então um objeto distante precisa de mais tempo para atravessá-lo do que um próximo, e é por isso que ele parece mais lento.
Camadas e velocidades
A rolagem parallax é feita de camadas que se movem um número diferente de pixels por quadro. Quanto mais perto a camada, mais pixels ela se move, então mais rápido ela vai. Normalmente elas são agrupadas em fundo, plano intermediário e primeiro plano.
- Camada 4, as montanhas: 1 pixel por quadro, a mais lenta.
- Camada 3, os prédios distantes: 2 pixels por quadro, duas vezes mais rápido.
- Camada 2, os prédios próximos e a rua: 3 pixels por quadro.
- Camada 1, a ponte e os personagens: 4 pixels por quadro, quatro vezes mais rápido que as montanhas.
Fechando o loop
A animação nunca deve parar no meio e pular de volta. Ela deve correr suave até o fim e voltar entrando pelo outro lado. Para isso, o número de quadros tem que ser igual à largura do canvas na rolagem horizontal, ou à altura na rolagem vertical. A animação acima tem 114 pixels de largura, então tem exatamente 114 quadros.
Comece pequeno
Esses três são do desafio do meu curso. Cada canvas tem 62 pixels de largura, então cada loop tem exatamente 62 quadros. O chão se move mais pixels por quadro que as nuvens, por isso parece mais perto. Faça um seu: algumas camadas num canvas pequeno, depois conte os quadros.
Montando a animação
Esta aqui tem 320 pixels de largura, então precisa de 320 quadros. Ninguém desenha isso à mão. Eu dividi a arte do platformer em camadas (ponte, prédios próximos com a rua e a água, prédios distantes, montanhas, fundo) e deixei um script no Aseprite gerar os quadros de cada camada, a 50 milissegundos por quadro: 4 pixels para a ponte, 3 para os prédios próximos, 2 para os distantes, 1 para as montanhas.
Se você faz jogos no Unity ou no Godot, a sua engine pode fazer o parallax por você. Mesmo assim vale a pena saber montar isso no sprite, para protótipos, conceitos e artes que você quer compartilhar.