Câmera e scrolling 2D: mundos maiores que a tela

Jogos de plataforma e de exploração têm mundos muito maiores que a tela. O truque para isso não é mover a câmera de verdade — é manter o personagem mais ou menos no centro e mover TODO O RESTO na direção oposta. Dominar essa ideia abre a porta para fases longas, mapas e mundos abertos.

Coordenadas do mundo vs. da tela

A chave conceitual: cada objeto tem uma posição no MUNDO (onde ele está na fase, independente da tela) e uma posição na TELA (onde ele aparece no palco). A câmera é só um deslocamento entre as duas. Guarde a posição da câmera em variáveis globais scrollX e scrollY.

// converter mundo → tela para qualquer objeto:
vá para x: (mundoX - scrollX) y: (mundoY - scrollY)

Todo tile, inimigo e item usa essa mesma fórmula. Mudar scrollX move o mundo inteiro de uma vez — é isso que cria a sensação de câmera.

A câmera que segue o jogador

Para o personagem ficar centralizado, a câmera persegue a posição dele no mundo. Seguir diretamente fica “grudado” e enjoativo; um seguimento suave (lerp) parece profissional:

// no loop principal, depois de mover o jogador no mundo:
mude scrollX para scrollX + (jogadorMundoX - scrollX) ÷ 10
mude scrollY para scrollY + (jogadorMundoY - scrollY) ÷ 10

Dividir a diferença por 10 faz a câmera “correr atrás” do jogador com um leve atraso, suavizando paradas e mudanças de direção. Quanto maior o divisor, mais preguiçosa a câmera.

Limites da câmera

Sem limites, a câmera mostra o vazio além das bordas da fase. Prenda scrollX e scrollY dentro do tamanho do mundo depois de atualizá-los:

se scrollX < limiteEsquerdo: mude scrollX para limiteEsquerdo
se scrollX > limiteDireito:  mude scrollX para limiteDireito

Parallax: profundidade com camadas

Para dar sensação de profundidade, faça o fundo rolar MAIS DEVAGAR que o primeiro plano. Multiplique o scroll por um fator menor que 1 em cada camada:

// montanhas distantes (fundo):
vá para x: (-scrollX × 0,3) ...
// árvores intermediárias:
vá para x: (-scrollX × 0,6) ...
// chão (primeiro plano): fator 1,0

Esse efeito de parallax é o que faz um cenário 2D parecer ter quilômetros de profundidade, e custa apenas uma multiplicação por camada.

Integrando com tiles e clones

Combinado com o padrão de tiles por clones (veja o tutorial de variáveis e listas), o scrolling escala para fases enormes: cada clone de tile guarda sua posição no mundo e, a cada quadro, aplica a fórmula mundo → tela. Você pode até deixar de desenhar os tiles fora da tela para ganhar desempenho — uma otimização chamada culling.