Viewport

In this section, we will examine the program that loads an image file with the extension .png into the created viewports in different methods and sizes.

When the program runs, in addition to the basic operations, the following operations occur:

1. In the load_img() function, the png image file is loaded into the texture with the IMG_LoadTexture() function.
2. With the init_vals() function, the last_time, current_time, img_width and height variables are initialized.
3. When the draw_screen() function runs,
   • The viewport is created in the main window size with SDL_SetRenderViewport() function.
   • Loads the entire texture into the created viewport.
   • Loads the texture to different coordinates (10, 10) in the same viewport at one-fourth the size.
   • Loads the entire 160 x 120 area at the top left of the texture (120, 100) to different coordinates (470, 10) within the same viewport.
   • Another viewport, half the size of the main window, is created in the lower left corner of the main window with SDL_SetRenderViewport() function.
   • Loads the entire texture into the created viewport.

SDL_SetRenderViewport() function

The SDL_SetRenderViewport() function sets the dimensions of the drawing area to be used for rendering on the current target.

The SDL_SetRenderViewport function is used to define the area where a render target will be displayed in applications that use SDL (Simple DirectMedia Layer). This ensures that rendering operations are only performed on a specific rectangular area. In other words, the render viewport defines the area on the screen where the content to be rendered will be placed.

bool SDL_SetRenderViewport(SDL_Renderer *renderer, const SDL_Rect *rect);

Usage

• Multiple Viewports: You can create multiple render areas and define a separate viewport for each. This can be used, for example, to show different players' screens in multiplayer games.
• HUD (Heads-Up Display): You can use the viewport to place in-game interface elements (health bar, scoreboard, etc.) in a specific part of the screen.
• Mini Map: You can use it to place a small version of the game's full-screen map in a corner.

main.c file content will be as follows:

#include <stdio.h>
#include <SDL3/SDL.h>
#include <SDL3_image/SDL_image.h>

// Window width and height
#define WINDOW_WIDTH 640
#define WINDOW_HEIGHT 480

// Global variables
int is_running = false;           // Variable that controls the execution of the main loop of the program
SDL_Window *window = NULL;        // Main window variable
SDL_Texture *texture = NULL;      // Texture variable for image
SDL_Renderer *renderer = NULL;    // Renderer variable

// Function prototypes
int init_window(void);            // Create window and renderer
void init_vals(void);             // Initialize values
void load_img(void);              // Load image to texture
void process_event(void);         // Process events
void update_screen();             // Update values
void draw_screen(void);           // Draw screen
void destroy_window(void);        // Destroy window

int main(int argc, char* argv[])
{
    // Create window and renderer
    is_running = init_window();

    // Initialize values
    init_vals();

    // Load .png file to texture
    load_img();

    // Main loop
    while (is_running) {
        process_event();       // Processing SDL events (Here keyboard inputs).
        update_screen();       // Updating variables
        draw_screen();         // Drawing objects on the window (Rendering)
    }

    // Destroy renderer and SDL window
    destroy_window();

    return 0;
}

// Create window and renderer
int init_window(void)
{
    // Initialize the SDL library.
    if(SDL_Init(SDL_INIT_VIDEO) == false) {
       SDL_Log("SDL init error: %s\n", SDL_GetError());
       return false;
    }

    // Create a window and a 2D rendering context for the window.
    if(!SDL_CreateWindowAndRenderer("SDL3 window - Viewport", WINDOW_WIDTH, WINDOW_HEIGHT, 0, &window, &renderer)) {
       return false;
    }

    return true;
}

// Initialization function that runs only once at the beginning of the program
void init_vals(void)
{

}

// Load image to texture
void load_img(void)
{
     // Load an image into a GPU texture.
     texture = IMG_LoadTexture(renderer, "bird.png");

	 if(texture == NULL)	{
	    SDL_Log("Load texture error: %s\n", SDL_GetError());
	 }
}

// Function to control SDL events and process keyboard inputs
void process_event(void)
{
     SDL_Event event;

     // Creating a loop to process user inputs
     while (SDL_PollEvent(&event)) {
        switch (event.type) {
            case SDL_EVENT_QUIT: // Logout action by the user (x button at the top right of the window)
                 is_running = false; // Terminates the execution of the program main loop.
                 break;

            case SDL_EVENT_KEY_DOWN: // Indicate that a key was pressed.
                 if(event.key.key==SDLK_ESCAPE) {
                    is_running = false;
                 }
                 break;
        }
     }
}

// Updates objects in the main window
void update_screen(void)
{

}

// Render function used to draw game objects in the main window
void draw_screen(void)
{
     SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255); // Set the color used for drawing operations.
     SDL_RenderClear(renderer); // Clear the current rendering target with the drawing color.

     // Loads the image into the viewport created at window size.
     SDL_Rect viewport_full;
     viewport_full.x = 0;
     viewport_full.y = 0;
     viewport_full.w = WINDOW_WIDTH;
     viewport_full.h = WINDOW_HEIGHT;
     SDL_SetRenderViewport(renderer, &viewport_full);
     SDL_RenderTexture(renderer, texture, NULL, NULL);

     // Loads the image at one-fourth size at different coordinates (10, 10) within the same viewport.
     SDL_FRect rect_dst = { 10, 10, 160, 120 };
     SDL_RenderTexture(renderer, texture, NULL, &rect_dst);

     // Loads the entire 160 x 120 area at the top left of the image to different coordinates (470, 10) within the same viewport.
     SDL_FRect rect_src = { 120, 100, 160, 120 };
     rect_dst.x = 470;
     SDL_RenderTexture(renderer, texture, &rect_src, &rect_dst);

     // Loads the image into a viewport created at half the size of the window.
     SDL_Rect viewport_half;
     viewport_half.x = 0;
     viewport_half.y = WINDOW_HEIGHT/2;
     viewport_half.w = WINDOW_WIDTH/2;
     viewport_half.h = WINDOW_HEIGHT/2;
     SDL_SetRenderViewport(renderer, &viewport_half);
     SDL_RenderTexture(renderer, texture, NULL, NULL);

     // Loading all objects drawn one by one to the back buffer to the front buffer at once and loading them onto the screen
     // This process prevents each drawn object from being displayed on the screen one by one.
     SDL_RenderPresent(renderer); // Update on screen all operations performed since the previous call
}

// Destroy Renderer and SDL window, exit from SDL3
void destroy_window(void)
{
     SDL_DestroyTexture(texture);
     SDL_DestroyRenderer(renderer);
     SDL_DestroyWindow(window);
     SDL_Quit();
}