Cauculando Movimentação de Câmera [C++, Raylib] - Quick Tips #001

Para iniciar, você deve entender que o movimento das câmeras nos jogos nada mais é que movimentar tudo na cena mas de tal forma que pareca que há uma câmera no jogo. Tanto em cenas 3D quanto em cenas 2D, tudo é apenas uma mágica da matemática.

Obviamente existe muitas maneiras de conseguir reproduzir isso matematicamente em jogos, e uma das formas que mais gosto é a seguiente equação:

Você tem que adapta-la ao suas necessidades e botar com que o centro se ajuste com o tamanho do seu personagem, mas vou explicar o que cada variável representa:

• S_x scroll.position.x É a posição do scroll em X, o tanto que deve deslocar todos os objetos na cena.
• \frac{W}{2} é o tamanho máximo da tela dividido por 2, então, espera-se que o scroll deixe a câmera centralida.
• E_x é a posição X da entidade referência, o qual a "câmera" se ajustara, assim ela em outra palavras deve seguir a entidade/player.
• J é o quão lento a camera deve ficar para se estabilizar no meio da tela, dando aquela sensação de movimento suave.

Simplificando com código

Para ficar mais didático, vou expressar esse equação em código C++ simples usando o raylib.

camera_position.x += (720.f / 2.f - player_position.x - camera_position.x) / 8.f;
camera_position.y += (480.f / 2.f - player_position.y - camera_position.y) / 8.f;

Bem, é so isso. Agora para renderizar, dando a impressão de câmera em um jogo de plataforma simples, você deve criar uma cópia do objeto que vai ser renderizado e então renderize fazendo a seguinte alteração nas posições:

for(Tile tile : world)
{
  tile.rect.x -= camera_position.x;
  tile.rect.y -= camera_position.y;

  DrawTexturePro(/*draw tile*/);
}

Para renderizar o player é levemente diferente, pois ele ficara no centro da tela:

Player player_scrolled = player;

player_scrolled.x += camera_scroll.x;
player_scrolled.y += camera_scroll.y;

DrawTexturePro(/*draw player_scrolled*/);

Assim você já deve notar que a câmera funciona, irei deixar um código de exemplo aqui usando raylib, para que seja possível ver uma aplicação real dessa câmera em um projeto pequeno.

Obs: Eu sei que o raylib tem um sistema de câmera já embutido na lib, mas é sempre bom entender um pouco da matemática por trás.

Também fiz isso para uns estudos que fiz, acho que vou fazer bastante posts desses, expressando coisas que aprendi da forma que entendi.