Tutorial de SDL – Parte 31 – Rolagem do plano de fundo

Continuando nossa série de artigos traduzidos do site lazyfoo.net, agora veremos como, usando uma imagem com dimensões maiores do que a área visível da tela, rolar essa imagem para exibir novas partes dela no decorrer do tempo.

Muitas vezes em jogos você pode precisar de um fundo infinito ou em loop. Com a rolagem do plano de fundo, você pode deslocar-se ciclicamente pelo plano de fundo infinitamente.

Digamos que queremos mover um ponto em um fundo infinito:

Tudo que temos que fazer é renderizar duas iterações do plano de fundo próximas uma da outra e move-las um pouco a cada frame. Quando o plano de fundo tiver se movido completamente,você pode reiniciar o movimento:

//The dot that will move around on the screen
class Dot
{
    public:
        //The dimensions of the dot
        static const int DOT_WIDTH = 20;
        static const int DOT_HEIGHT = 20;
        //Maximum axis velocity of the dot
        static const int DOT_VEL = 10;
        //Initializes the variables
        Dot();
        //Takes key presses and adjusts the dot's velocity
        void handleEvent( SDL_Event& e );
        //Moves the dot
        void move();
        //Shows the dot on the screen
        void render();
    private:
        //The X and Y offsets of the dot
        int mPosX, mPosY;
        //The velocity of the dot
        int mVelX, mVelY;
};

Nesse artigo estaremos usando uma versão do ponto que apenas permanece na tela.

            //The dot that will be moving around on the screen
            Dot dot;
            //The background scrolling offset
            int scrollingOffset = 0;

Antes de entrarmos no loop principal declaramos um objeto Dot e o deslocamento da rolagem.

                //Move the dot
                dot.move();
                //Scroll background
                --scrollingOffset;
                if( scrollingOffset < -gBGTexture.getWidth() )
                {
                    scrollingOffset = 0;
                }

Aqui atualizamos o ponto e a rolagem do plano de fundo.
Atualizar a posição da rolagem do plano de fundo significa apenas diminuir a posição x e se a posição x for menor do que o comprimento do plano de fundo significa que o plano de fundo foi completamente para fora tela e a posição precisa ser reiniciada.

                //Clear screen
                SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0xFF, 0xFF );
                SDL_RenderClear( gRenderer );
                //Render background
                gBGTexture.render( scrollingOffset, 0 );
                gBGTexture.render( scrollingOffset + gBGTexture.getWidth(), 0 );
                //Render objects
                dot.render();
                //Update screen
                SDL_RenderPresent( gRenderer );

Aqui estamos renderizando o plano de fundo e o ponto. Primeiro, renderizamos o plano de fundo pela renderização de duas iterações da textura próximas uma da outra e em seguida renderizamos o ponto sobre ela. Isso nos dá o efeito de uma rolagem infinita e suave do plano de fundo.

Baixe os arquivos de mídia e do código fonte para o exemplo desse artigo aqui.