Continuando nossa série de artigo traduzidos do site lazyfoo, agora iremos ver como lidar com o vewport, que basicamente controla o que é visto na tela.
Algumas vezes você precisa renderizar apenas parte da tela, para coisa como minimapas. Usando o viewport você pode controlar o que será renderizado na tela.
//Top left corner viewport SDL_Rect topLeftViewport; topLeftViewport.x = 0; topLeftViewport.y = 0; topLeftViewport.w = SCREEN_WIDTH / 2; topLeftViewport.h = SCREEN_HEIGHT / 2; SDL_RenderSetViewport( gRenderer, &topLeftViewport ); //Render texture to screen SDL_RenderCopy( gRenderer, gTexture, NULL, NULL );
Depois que a tela é limpa, é hora de efetuar o desenho. Existem 3 regiões que iremos desenhar uma imagem em tela cheia:
Primeiro iremos renderizar o canto superior esquerdo. Isso é tão fácil quanto criar um retângulo com metade da largura/altura da tela, e passar essa região para SDL_RenderSetViewport. Qualquer renderização realizada após essa chamado irá ser feita dentro da região definida pelo viewport dado. Também será usado o sistema de coordenadas da janela que foi criada, de forma a parte inferior da visualização que criamos será y=480 mesmo que esteja a apenas 240 pixels da parte superior.
//Top right viewport SDL_Rect topRightViewport; topRightViewport.x = SCREEN_WIDTH / 2; topRightViewport.y = 0; topRightViewport.w = SCREEN_WIDTH / 2; topRightViewport.h = SCREEN_HEIGHT / 2; SDL_RenderSetViewport( gRenderer, &topRightViewport ); //Render texture to screen SDL_RenderCopy( gRenderer, gTexture, NULL, NULL );
Aqui definimos a área superior direita e desenhamos ela. É basicamente o mesmo de antes, apenas que agora a coordenada x é metade da tela.
//Bottom viewport SDL_Rect bottomViewport; bottomViewport.x = 0; bottomViewport.y = SCREEN_HEIGHT / 2; bottomViewport.w = SCREEN_WIDTH; bottomViewport.h = SCREEN_HEIGHT / 2; SDL_RenderSetViewport( gRenderer, &bottomViewport ); //Render texture to screen SDL_RenderCopy( gRenderer, gTexture, NULL, NULL ); //Update screen SDL_RenderPresent( gRenderer );
Finalmente, renderizamos mais uma vez na metade inferior da tela. Novamente, o viewport usará o mesmo sistema de coordenadas da janela em que ele está, de forma que a imagem será mostrada espremida já que o viewport ocupa metade da tela.
Baixe o código fonte e os arquivos de mídia desse artigo aqui.