Viewport zoom

In this section, we will examine a program that displays an image file with a .png extension by zooming in on the created viewports.

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

1. At the beginning of the program, the global variables shown below are first defined:
   • int x_view: Variable that indicates the mouse x coordinate
   • int y_view: Variable that indicates the mouse y coordinate
2. In the load_img() function, the png image file is loaded into the texture with the IMG_LoadTexture() function.
3. With the init_vals() function, the x_view and y_view variables are assigned initial values.
4. In the process_event() function, when the SDL_EVENT_MOUSE_MOTION option is activated with the movement of the mouse on the main window,
   • In the main window, the x coordinate value of the mouse is multiplied by 3 (since the original image size is 3 times larger than the main window size) and the difference with 80 is assigned to the x_view variable, which indicates the x coordinate of the section to be taken from the texture containing the original image.
   • In the main window, the y coordinate value of the mouse is multiplied by 3 (since the original image size is 3 times larger than the main window size) and the difference with 60 is assigned to the y_view variable, which indicates the y coordinate of the section to be taken from the texture containing the original image.
5. When the draw_screen() function runs,
   • The SDL_SetRenderViewport() function creates a viewport in the size of the main window.
   • It loads the entire texture into the created viewport.
   • Another viewport with the size of 160x120 is created in the upper right corner of the main window with the SDL_SetRenderViewport() function.
   • As the mouse moves over the main window, the area where the mouse is located is read from the original image with the size of 1920 x 1440 and displayed in the upper right viewport.

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
int x_view, y_view;

// 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 zoom", 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)
{
     x_view = 0;
     y_view = 0;
}

// Load image to texture
void load_img(void)
{
     // Load an image into a GPU texture.
     texture = IMG_LoadTexture(renderer, "horses.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_MOUSE_MOTION:
                 x_view = (event.motion.x * 3)-80;
                 y_view= (event.motion.y*3)-60;
                 break;

            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);

     // Load texture to the viewport.
     SDL_Rect viewport_view;
     viewport_view.x = WINDOW_WIDTH-(WINDOW_WIDTH/4);
     viewport_view.y = 0;
     viewport_view.w = WINDOW_WIDTH/4;
     viewport_view.h = WINDOW_HEIGHT/4;
     SDL_FRect rect_src = { x_view, y_view, 160, 120 };
     SDL_SetRenderViewport(renderer, &viewport_view);
     SDL_RenderTexture(renderer, texture, &rect_src, 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();
}