Parallax Scrolling

Nosso cérebro é, por incrível que pareça, muito ingênuo e facilmente ludibriado e no desenvolvimento de jogos temos que engana-lo constantemente. Um exemplo disso é o Parallax Scrolling, técnica facilmente encontrada em jogos 2D. Nela temos um background dividido em camadas, movendo-se em velocidades diferentes, criando assim um aspecto de movimento e profundidade.

Para entender melhor, quando você estiver em um veiculo em movimento (de preferencia quando você não esteja dirigindo), olhe para o lado e para o horizonte. Repare que as coisas que estão mais próximas a você “passam” mais depressa, e quanto mais distantes mais devagar elas parecem passar.

Mas, na verdade, quem está em movimento é você. E é essa sensação de movimento que queremos passar. Na maioria dos casos, queremos manter nosso personagem na tela, visível, mas para darmos a sensação de movimento e velocidade, precisamos mover então o cenário.

Para isso, duplicamos as camadas que irão se mover. Movendo-as em velocidades diferentes, na direção oposta a que queremos ir. Quando a primeira imagem de alguma camada passar totalmente do limite da tela, trazemos ela de volta para a posição zero e, consequentemente, a sua imagem subsequente.

É, basicamente, isso. Vou mostrar um exemplo em JavaScript novamente, por ser mais prático mostrar o resultado no blog, mas reforço aqui que o código é facilmente adaptado para outras linguagens.

E o resultado final você vê abaixo. Sinta-se a vontade para mudar os valores e testar velocidades diferentes. Você pode encontrar o projeto completo no Github.

Referencias:

Starting with Starling – Ep 5: Parallax Background
Parallax Scrolling: A Simple, Effective Way to Add Depth to a 2D Game
Principles Of HTML5 Game Design

  • TRUST ME, I’M AN ENGINEER

    Nice 🙂

  • Genilto Vanzin

    Very, very Nice 😉

  • Diego R. Santos

    Show!