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_vars() 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_vars(void);          // Initialize variables
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 variables
    init_vars();

    // 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_vars(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();
}