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.
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.